---
version: alpha
name: xAI
description: "Near-black type on pure white — a supercluster's worth of restraint."
colors:
  on-surface: "#404040"
  surface: "#FFFFFF"
  outline: "#EBEBEB"
  primary: "#0051C3"
  mid-grey: "#595959"
typography:
  caption-nav:
    fontFamily: system-ui
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: system-ui
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  heading-subhead:
    fontFamily: system-ui
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  display:
    fontFamily: system-ui
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0em
rounded:
  default-small-controls: 5px
  pill-ctas-nav-badge: 9999px
  product-cards: 16px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
---
# xAI — Style Reference
> Near-black type on pure white — a supercluster's worth of restraint.

**Theme:** light

xAI dresses frontier ambition in monochrome. The canvas is pure white, the type is a thin near-black grotesque set enormous, and almost nothing else is allowed on the stage — the one signature move is a light-weight display headline (weight 300, 60px) that fills the viewport and ends in a hard period, treating a single sentence as the entire hero. Colour is rationed to two greys and one editorial blue: near-black `#404040` carries every heading and CTA, mid-grey `#595959` handles secondary voice, and a lone link-blue `#0051C3` is the only chromatic note — never a fill, only a text link. Surfaces are conveyed by the faintest luminance step (`#EBEBEB` panels on white) rather than shadow; the scan captured no shadows at all. Radii stay minimal (a measured 5px), and where the hero shows pill CTAs and rounded product cards, the geometry is soft but the palette never warms. The result reads like an instrument panel for a research lab: white space as confidence, type as the only ornament.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#FFFFFF` | `--color-canvas` | The page. Everything sits on pure white; it is the dominant "colour" of the system. |
| Panel Grey | `#EBEBEB` | `--color-panel` | Faint surface + hairline border. The only way depth is drawn — a one-step luminance lift, never a shadow. |
| Near-Black | `#404040` | `--color-ink` | Primary ink: display headline (300), heading (400), and the dark CTA fill. Reads as "black" on screen; the darkest token the scan measured. |
| Mid Grey | `#595959` | `--color-ink-muted` | Secondary voice: subheads and the descriptive line under the hero. Softer than ink, never for primary CTAs. |
| Link Blue | `#0051C3` | `--color-link` | The single accent. Text links and inline buttons only — never a background, never a CTA fill. The one chromatic permission slip. |

## Tokens — Typography
### Display / Body Grotesque — one custom sans, set thin and huge for the hero, tight and small for chrome
The hero headline is a low-contrast geometric grotesque with a single-story lowercase and a decisive full stop. The scan captured only the `-apple-system` fallback in the loaded stack; branding metadata reports the family as **Universal Sans / Universal Sans Display** *(inferred — branding source, low confidence)*. Treat it as one super-family used across two extremes: thin display and small UI.
- **Substitute:** `Universal Sans`, `Inter`, `-apple-system`, `system-ui`, `sans-serif`
- **Weights:** 300 (display + subhead), 400 (body, nav, CTAs), 600 (rare emphasis)
- **Sizes:** 60px (display), 30px (heading / subhead), 15px (body), 13px (nav, links, captions)
- **Line height:** Tight on display (~1.0–1.05), comfortable on body (~1.5) *(inferred)*
- **Letter spacing:** Near-zero; the display face is drawn tight and needs no tracking
- **Role:** One family, two registers — a whisper-thin 60px headline versus workmanlike 13–15px chrome. Contrast lives in size and weight, not in typeface swaps.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption / Nav | 13px | 1.4 *(inferred)* | 0 | `--text-xs` |
| Body | 15px | 1.5 *(inferred)* | 0 | `--text-base` |
| Heading / Subhead | 30px | 1.2 *(inferred)* | 0 | `--text-2xl` |
| Display | 60px | 1.05 *(inferred)* | 0 | `--text-display` |

## Tokens — Spacing & Shapes
**Base unit:** 4px *(inferred — branding source)*   **Density:** comfortable (generous vertical air around the hero)

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px *(inferred)* | `--spacing-xs` |
| sm | 8px *(inferred)* | `--spacing-sm` |
| md | 16px *(inferred)* | `--spacing-md` |
| lg | 32px *(inferred)* | `--spacing-lg` |
| xl | 64px *(inferred)* | `--spacing-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Default / small controls | 5px |
| Pill CTAs & nav badge | full / `9999px` *(inferred — observed in screenshot)* |
| Product cards | ~16px *(inferred — observed in screenshot)* |

### Shadows
None. The scan captured zero shadows; depth is drawn with the `#EBEBEB` luminance step and hairline borders only.

### Layout
- **Page max-width:** centered content column, generous side gutters (hero text centered) *(inferred)*
- **Section gap:** large — the hero owns a full viewport of white before content begins
- **Card padding:** comfortable interior padding on chat/code panels *(inferred)*
- **Element gap:** tight within the nav row, airy between hero blocks

## Components
### Display Headline
**Role:** The hero, and effectively the whole brand statement.
Near-black `#404040` at 60px, weight **300**, centered, single sentence ending in a hard period ("…everything you imagine."). One word may carry a thin underline as the only emphasis. No colour, no decoration — size and thinness do all the work.

### Hero Subline
**Role:** One-line descriptor under the headline.
Mid-grey `#595959`, ~15–30px, weight 300, centered. States capability plainly ("Reasoning, code, voice, images, and video.") and gets out of the way.

### Primary CTA ("Get API Access")
**Role:** The main call to action.
Dark fill using ink `#404040` (reads as black on white), white label, pill radius (`9999px`, *inferred from screenshot*), trailing chevron. High contrast against the white canvas is the entire emphasis strategy — no shadow, no gradient.

### Secondary CTA ("View Documentation")
**Role:** The alternate action beside the primary.
White fill, near-black label `#404040`, thin hairline border in panel-grey `#EBEBEB`, matching pill radius. Reads as a ghost of the primary — same shape, inverted weight.

### Nav Bar
**Role:** Top-level site navigation.
White bar, 13px labels in near-black weight 400, chevron dropdown affordances, sitting on the plain canvas with no divider. A dark pill CTA and a white "Contact Sales" pill anchor the right edge.

### Announcement Badge ("NEW · Meet Grok…")
**Role:** Product-launch pill above the headline.
Rounded-full outline chip on white, a small "NEW" label in the brand's one warm exception (orange, *observed in screenshot — not captured in the token scan, so left un-tokenized*), followed by 13px text and a play glyph. The only place a non-mono hue appears in the hero.

### Text Link / Inline Button
**Role:** Low-emphasis navigation inside content.
Link-blue `#0051C3`, 13px, weight 400, no background, no border, no radius (measured 0px). The single chromatic accent in the system — used as text, never as a fill.

### Chat Demo Card
**Role:** Product illustration panel (Grok conversation).
Very light panel on white (`#EBEBEB`-family surface), rounded corners, user prompts in small pill bubbles, model replies in light rounded blocks. Quiet, near-monochrome, letting the copy carry the demo.

### Code Editor Card
**Role:** The one dark surface — a developer/agent demo.
Near-black panel with a mac-style traffic-light header, monospaced syntax with green/red diff rows and a muted "Thinking…" agent trace. The deliberate inverse of the white page: dark chrome to signal "this is the machine at work."

### Media / Gallery Tile
**Role:** Image + video generation showcase.
Rounded rectangular tiles on the light grid, edge-to-edge imagery (a cocktail render, a stylized fox illustration, a green roadster) with no captions or frames — the imagery speaks, the chrome disappears.

## Do's and Don'ts
### Do
- Keep the canvas pure white `#FFFFFF` and let empty space do the persuading.
- Set the hero as one thin (weight 300) near-black sentence at 60px, ending in a period.
- Ration colour: near-black `#404040` for ink and CTAs, `#595959` for secondary text, `#0051C3` for links only.
- Draw depth with the `#EBEBEB` luminance step and hairline borders — never a drop shadow.
- Use the dark code panel sparingly as the single high-contrast surface.

### Don't
- Don't introduce brand colours or gradients into the hero — monochrome is the identity.
- Don't paint the link-blue `#0051C3` as a button fill or background; it is text-only.
- Don't add shadows — the scan measured none; elevation is luminance, not blur.
- Don't set the display headline bold; its whole character is thinness at scale.
- Don't crowd the hero — one sentence, one CTA pair, then a viewport of white.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | The page. The default and dominant surface. |
| 1 | Panel | `#EBEBEB` | Cards, chat bubbles, hairline borders — a single luminance step up from white. |
| 2 | Dark Inverse | `#404040` | The code-editor panel and dark CTA — the one inverted surface, used sparingly. |

## Elevation
Depth is expressed almost entirely by luminance, not shadow. The scan captured zero box-shadows. A card lifts off the page by being one grey step (`#EBEBEB`) different from the white canvas, sometimes with a matching hairline border. The only strong "elevation" is contrast inversion: the near-black code panel reads as forward simply because it is the darkest thing on an otherwise white screen.

## Imagery
Sparse and purposeful. The hero itself carries **no imagery** — it is type on white, which is the point. Imagery appears only in the product showcase below: photoreal renders (a coffee cocktail), stylized character illustration, and rendered video frames, all in rounded edge-to-edge tiles with no borders or captions. Imagery is confined to "here is what the model makes," never decoration for the brand chrome. The brand mark is a minimal monochrome glyph, in keeping with the black-and-white system.

## Layout
Full-white, centered, and vertical. The nav is a borderless top row (logo left, link groups center, CTA pills right). The hero is centered single-column: badge → thin 60px headline → grey subline → CTA pair, surrounded by a full viewport of white. Below, product demos drop into a loose two-column grid of rounded cards — a light chat panel beside a dark code panel, then a media gallery. Sections are separated by whitespace rather than rules or dividers. The rhythm is: state one thing, breathe, then show the proof.

## Typography Voice
The system runs a single grotesque across two opposite registers. In display mode it is impossibly thin (weight 300) and enormous (60px), so the headline reads as calm confidence — the restraint of a lab that doesn't need to shout. In UI mode the same family drops to 13–15px at weight 400 for nav, body, and CTAs, entirely utilitarian. There is no serif, no second typeface, no italic flourish — contrast is manufactured purely through **size and weight**, which is why the one thin headline can anchor an entire page. The hard period at the end of the hero sentence is the signature punctuation move: it frames a marketing line as a declarative fact.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` / text: `#404040` / muted text: `#595959` / surface: `#EBEBEB` / border: `#EBEBEB` / accent (link only): `#0051C3` / primary action: `#404040` fill with white label (no distinct CTA colour — the CTA is near-black)

## Example Component Prompts
1. **Hero**: Full white section, centered. A rounded-full outline badge reading "NEW" above a 60px weight-300 near-black (`#404040`) headline set as one sentence ending in a period, one word thin-underlined. Grey (`#595959`) one-line subhead below. Then two pills: a dark `#404040` fill "Get API Access" with white label and chevron, beside a white pill "View Documentation" with a `#EBEBEB` hairline border. Surround with a full viewport of whitespace, no shadows.
2. **Primary CTA**: Pill button (`border-radius: 9999px`), background `#404040`, white 13px label weight 400, trailing chevron, no shadow, no gradient. High contrast against white is the only emphasis.
3. **Nav Bar**: Borderless white top bar. Monochrome glyph logo left; centered 13px near-black nav links (weight 400) with chevron dropdowns; right side a white "Contact Sales" pill and a dark `#404040` "Try for free" pill. No divider under the bar.
4. **Code Panel**: The single dark surface — near-black `#404040` card with a mac traffic-light header, monospaced syntax with green/red diff rows and a muted grey "Thinking…" agent trace. Rounded corners, no shadow.
5. **Text Link**: Inline `#0051C3` text at 13px weight 400 — no background, no border, no radius. Never render this blue as a fill.

## Similar Brands
- **Vercel** — the same near-monochrome, whitespace-first, developer-frontier aesthetic where black type on white does all the talking.
- **Linear** — kindred restraint: thin large type, luminance-based surfaces, and colour rationed to a single accent.
- **OpenAI** — a comparable calm, near-black-on-white research-lab register with imagery confined to model output.
- **Apple** — the huge, light-weight centered headline over vast whitespace is a direct descendant of Apple product-page typography.
- **Stripe (docs)** — shares the disciplined greyscale UI with one editorial blue reserved strictly for links.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #FFFFFF;
  --color-panel: #EBEBEB;
  --color-ink: #404040;
  --color-ink-muted: #595959;
  --color-link: #0051C3;

  /* Typography — Families */
  --font-display: 'Universal Sans', 'Inter', -apple-system, system-ui, sans-serif;
  --font-body: 'Universal Sans', 'Inter', -apple-system, system-ui, sans-serif;

  /* Typography — Scale */
  --text-xs: 13px;
  --text-base: 15px;
  --text-2xl: 30px;
  --text-display: 60px;
  --leading-display: 1.05;
  --leading-heading: 1.2;
  --leading-body: 1.5;

  /* Font weights */
  --weight-thin: 300;
  --weight-regular: 400;
  --weight-semibold: 600;

  /* Spacing (inferred, 4px base) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;

  /* Border Radius */
  --radius-default: 5px;
  --radius-card: 16px;   /* inferred — screenshot */
  --radius-pill: 9999px; /* inferred — screenshot */
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-canvas: #FFFFFF;
  --color-panel: #EBEBEB;
  --color-ink: #404040;
  --color-ink-muted: #595959;
  --color-link: #0051C3;

  /* Typography — Families */
  --font-display: 'Universal Sans', 'Inter', -apple-system, system-ui, sans-serif;
  --font-body: 'Universal Sans', 'Inter', -apple-system, system-ui, sans-serif;

  /* Typography — Scale */
  --text-xs: 13px;
  --text-base: 15px;
  --text-2xl: 30px;
  --text-display: 60px;
  --leading-display: 1.05;
  --leading-heading: 1.2;
  --leading-body: 1.5;

  /* Font weights */
  --font-weight-thin: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  /* Spacing (inferred, 4px base) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;

  /* Border Radius */
  --radius-default: 5px;
  --radius-card: 16px;
  --radius-pill: 9999px;
}
```