Color Palette
Background Colors
Black 4 (25%)
rgba(10,10,10,.25)
Dark Gray 2 (50%)
rgba(31,34,40,.5)
Gradient / Tint Colors (10% opacity fills)
Orange (10%)
rgba(255,99,8,0.1)
Light Blue (10%)
rgba(151,196,255,0.1)
Light Blue 2 (10%)
rgba(189,201,230,0.1)
Semantic Color System (CSS Custom Properties)
Typography
Base · Times / universalSans
Understand
Understand the Universe. xAI builds AI systems to advance scientific understanding for the long-term benefit of humanity.
Times · Regular 400
universalSans · 400
Mono · GeistMono
GeistMono
grok-3-mini · api.x.ai/v1 · model.generate()
Regular · 400
Single weight system — xAI defines only font-weight-regular: 400. No bold, no medium, no semibold. Hierarchy is created entirely through font size (12px → 80px) and letter-spacing (−2px → +1.4px). This extreme restraint is shared with no other brand in this series.
Grok
Display XL · 80px · Regular · Times · line-height: 80px · letter-spacing: −2px
Understand the Universe
Display LG · 48px · Regular · Times · line-height: 48px · letter-spacing: −1.2px
Advanced AI systems for the benefit of humanity
Body LG · 20px · Regular · Times · line-height: 28px · letter-spacing: −1.2px
The mission of xAI is to advance human scientific discovery and understand the true nature of the universe.
Body SM · 16px · Regular · universalSans · line-height: 24px · letter-spacing: −1.2px
Released April 2026 · Model weights available
Caption · 14px · Regular · universalSans · line-height: 20px
GROK · COLOSSUS · AURORA · API
Label · 12px · Regular · wide tracking +1.4px · caps
Letter Spacing
Grok
Tight · −2px
--letter-spacing-tight · display 80px
Understand
Normal · −1.2px
--letter-spacing-normal · headings 48px+
xAI
Wide · +1.2px
--letter-spacing-wide · UI labels
GROK API
Wider · +1.4px
--letter-spacing-wider · micro caps
Spacing
Spacing Scale
17 tokens — 1px → 256px · Powers of 2 with a few additions
Borders
Border Radii
Only 2 radius tokens — the most minimal radius system in this series. xAI uses 24px for cards and containers, and 9999px for buttons and badges. There is no intermediate or rectangular radius — everything is either softly rounded or fully pill-shaped.
Border Widths
--border-width-hairline
1px · ×74 · all borders, dividers, inputs
Single border width throughout. Used exclusively in combination with rgba(255,255,255,0.06) — a near-invisible 6% white on dark backgrounds — to define surfaces with maximum subtlety. No colored borders, no thick borders.
Shadow / Elevation
No Shadow Tokens Defined
xAI defines zero shadow tokens
No shadow tokens were detected in xAI's design system. This aligns with the brand's extreme minimalism — depth is conveyed purely through layered near-black backgrounds (#000000 → #0A0A0A → #0C0C0B → #1F2228) and hairline borders at 6% opacity. No elevation, no drop shadows, no inner shadows. Pure surface-color stacking. xAI and Warp are the two brands in this series with zero shadow tokens.
Z-Index
| Layer | Value | Usage |
|---|
| --z-1 | 10 | Base interactive layer — inline elements, hover effects, card overlays |
| --z-2 | 20 | Navigation and sticky headers — site chrome that stays above content |
| --z-3 | 50 | Top-level overlays — modals, dialogs, the Grok chat widget, consent banners |
Only 3 z-index layers (10, 20, 50) — the simplest stacking context in this series alongside Supabase. All values start at 10 (unlike most brands that use 1), and the maximum is 50 — no astronomical values, no int32 max. This reflects xAI's single-page app architecture with minimal overlay complexity.
Breakpoints
📱
--breakpoint-xs
640px
Mobile max
💻
--breakpoint-sm
768px
Tablet min
💻
--breakpoint-md
1000px
Mid desktop
💻
--breakpoint-lg
1024px
Desktop min
🖥️
--breakpoint-xl
1280px
Wide desktop
🖥️
--breakpoint-2xl
1536px
XL widescreen
🖥️
--breakpoint-3xl
2000px
Ultrawide / Colossus cluster
7 breakpoints (640px → 2000px). The 2000px breakpoint is notable — xAI is one of two brands in this series (alongside Warp's 1500px) targeting very wide screens. This likely serves ultrawide monitor users and possibly dashboard views for research infrastructure. The 1000px / 1024px near-pair adds fine control at the tablet-to-desktop threshold.
Opacity
Opacity Tokens
3 tokens — 0.40 → 0.75
xAI's opacity range starts at 40% — unlike most brands that include very low values (10%, 20%). There is no ghost or near-invisible opacity. The 3 tokens are used for disabled states (40%), hover overlays (50%), and partially visible UI elements (75%). The heavy lifting of surface opacity is done through the color tokens directly, using rgba values.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
xAI uses --color-mid-gray (#7D8187) as its only text color — tested against all background values.
| Text Token | Background Token | Ratio | WCAG Rating |
|---|
| --color-mid-gray | --color-black-2 (#0A0A0A) | 5.06:1 | AA |
| --color-mid-gray | --color-black-3 (#0C0C0B) | 5.00:1 | AA |
| --color-mid-gray | --color-black-4 (rgba 25%) | 4.99:1 | AA |
| --color-mid-gray | --color-white (#FFFFFF) | 3.92:1 | AA Large |
| --color-white (#FFFFFF) | --color-black (#000000) | 21:1 | AAA |
| --color-white (#FFFFFF) | --color-black-2 (#0A0A0A) | 19.7:1 | AAA |
| --color-white (#FFFFFF) | --color-dark-gray (#1F2228) | 13.9:1 | AAA |
Note: --color-mid-gray against white (3.92:1) only meets AA Large — not standard AA. xAI's product is primarily dark-mode, where the 5:1 ratios hold. The light-mode usage of mid-gray would need size/weight compensation to pass for body text.
CSS Variables Reference
White (×555)--color-white#FFFFFF
Black (×187)--color-black#000000
Black 2 (page bg)--color-black-2#0A0A0A
Black 3--color-black-3#0C0C0B
Black 4 (25%)--color-black-4rgba(10,10,10,.25)
Dark Gray (×486 border)--color-dark-gray#1F2228
Dark Gray 2 (50%)--color-dark-gray-2rgba(31,34,40,.5)
Mid Gray (×30 text)--color-mid-gray#7D8187
Blue (border)--color-blue#6B7280
Orange (10% gradient)--color-orangergba(255,99,8,0.1)
Light Blue (10%)--color-light-bluergba(151,196,255,0.1)
Light Blue 2 (10%)--color-light-blue-2rgba(189,201,230,0.1)
jet--color-jethsl(0,0%,4%)
charcoal--color-charcoalhsl(0,0%,10%)
umbra--color-umbrahsl(221,12%,14%)
ink--color-inkhsl(213,11%,16%)
ash--color-ashhsl(216,5%,19%)
steel--color-steelhsl(216,4%,22%)
fog--color-foghsl(216,4%,51%)
pewter--color-pewterhsl(213,12%,70%)
dove--color-dovehsl(222,19%,86%)
ivory (light bg)--color-ivoryhsl(40,18%,97%)
sunset (accent)--color-sunsethsl(22,100%,51.6%)
dawn--color-dawnhsl(37,100%,76%)
dusk (purple)--color-duskhsl(263,70%,50.4%)
twilight--color-twilighthsl(255,92%,76%)
midnight--color-midnighthsl(214,58.3%,9.4%)
breeze--color-breezehsl(214,48.9%,73.9%)
evenfall--color-evenfallhsl(214,16.1%,28%)
Times (base serif)--font-family-baseTimes
universalSans (UI)--font-family-2universalSans
GeistMono--font-family-3GeistMono
Regular (only weight)--font-weight-regular400
Caption--font-size-2xs12px
Body SM--font-size-xs14px
Body MD--font-size-sm16px
Body LG--font-size-base20px
Display LG--font-size-lg48px
Display XL--font-size-xl80px
Tight (display)--letter-spacing-tight−2px
Normal (heading)--letter-spacing-normal−1.2px
Wide (labels)--letter-spacing-wide+1.2px
Wider (micro caps)--letter-spacing-wider+1.4px
Instant--duration-instant100ms
Fast--duration-fast150ms
Normal--duration-normal200ms
No easing tokens defined——
Strong 75%--opacity-7575%
MD Full Pill--radius-md9999px
Base layer--z-110
Navigation--z-220
Overlays--z-350
Design System Preview · xAI (Dark) · Generated 18/04/2026 · 12 color tokens · 18 semantic colors · 6 font-size · 3 font-family · 1 font-weight · 6 line-height · 4 letter-spacing · 17 spacing · 2 radius · 1 border-width · 0 shadow · 3 duration · 0 easing · 3 z-index · 7 breakpoints · 3 opacity