---
name: xAI
tagline: 'White canvas, Universal Sans, a stark near-black pill, and warm-grey terminal panels — frontier minimalism.'
updated_at: 2026-05-29T21:43:54.558Z
published_at: 2026-05-29T21:43:54.558Z
author: webdesignhot
source_url: https://x.ai
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [ai]
tags: [light, minimal, mono, sans, monochrome, technical, spacious, structured]
preview_swatch: ['#ffffff', '#0a0a0a', '#f9f8f6']
related: [openai, anthropic, vercel]
description: 'xAI''s corporate site is frontier minimalism in two inks — a pure `#ffffff` canvas and a stark near-black `#0a0a0a` that carries every heading, body line, and the single full-pill `Get API Access` CTA. The type is **Universal Sans**: a display cut at a calm 500 weight for the 60px H1, a humanist body cut at 16px/400 for prose. Where most AI labs reach for gradients, xAI reaches for restraint — the one warm note in the system is an off-white `#f9f8f6` surface used for the Grok terminal panels (r16px), where a frugal diff palette (green `#248430`, red `#be2e31`) hints at the engineering register underneath. The corporate marketing surface is light-mono and almost monastic; the Grok product UI runs darker. The result reads technical and self-assured: a company that builds the model and lets the work speak.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: accent
  muted: text-muted
  border: border
  ring: ring

colors:
  bg: '#ffffff'                    # pure white canvas — corporate marketing surface
  bg-soft: '#fafafa'               # barely-there grey for subtle module floors
  surface: '#f9f8f6'               # warm off-white — Grok terminal panels, demo cards
  surface-terminal: '#f8f7f5'      # terminal editor background (--terminal-bg)
  surface-card: '#fffffff2'        # near-opaque white card lift (--terminal-surface)
  surface-hover: 'rgba(10,10,10,0.04)' # 4% near-black wash on hover
  surface-press: 'rgba(10,10,10,0.08)' # 8% near-black for active state
  header-bg: 'rgba(255,255,255,0.85)'  # sticky header — 85% white with backdrop-blur
  text: '#0a0a0a'                  # stark near-black — body, headings, the brand ink
  text-strong: '#0a0a0a'           # no separate display tier — same near-black at all weights
  text-terminal: '#262626'         # terminal foreground (#000000d9 over white)
  text-muted: '#6b7280'            # captions, metadata, secondary copy
  text-subtle: '#8a8f98'           # tertiary, timestamps, footer micro-text
  text-on-brand: '#ffffff'         # white label on the near-black pill
  brand: '#0a0a0a'                 # primary CTA fill — stark near-black pill
  brand-hover: '#1f1f1f'           # subtle warm-up on hover
  brand-active: '#2c2c2c'          # pressed state
  on-brand: '#0a0a0a'
  link: '#111827'                  # prose links — cool near-black (--tw-prose-links)
  link-hover: '#0a0a0a'            # link hover deepens to the brand ink
  link-visited: '#111827'          # xAI doesn't differentiate visited
  ring: '#3b82f6'                  # focus ring — the one blue in the system (--tw-ring-color base)
  border: '#d5d9e2'                # cool hairline divider
  border-soft: 'rgba(10,10,10,0.08)' # 8% near-black sub-divisions
  border-strong: 'rgba(10,10,10,0.16)' # heavier divider / focus hairline
  scrim: 'rgba(10,10,10,0.5)'      # modal backdrop
  shadow-color: 'rgba(0,0,0,0.10)' # --tw-shadow-color base 0000001a
  terminal-fg: '#262626'           # Grok terminal text
  terminal-green: '#248430'        # diff insert / success accent in terminal
  terminal-green-bg: '#e3efe4'     # diff-insert wash (#24843021 over white)
  terminal-red: '#be2e31'          # diff delete / error accent in terminal
  terminal-red-bg: '#f8eaea'       # diff-delete wash (#be2e311a over white)
  success: '#248430'               # terminal green — semantic success
  success-bg: '#ecfdf3'            # success surface (hsl 143 85% 96%)
  info: '#3b82f6'                  # the system blue — links / focus / info
  info-bg: '#f0f8ff'               # info surface (hsl 208 100% 97%)
  warning: '#b45309'               # amber for caution copy
  warning-bg: '#fffcf0'            # warning surface (hsl 49 100% 97%)
  danger: '#be2e31'               # terminal red — error states
  danger-bg: '#fff0f0'             # error surface (hsl 359 100% 97%)

typography:
  display:
    family: '"Universal Sans Display", universalSansDisplay, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif'
    weights: [500, 600, 700]
    opentype-features: ['liga', 'kern']
  body:
    family: '"Universal Sans", universalSans, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif'
    weights: [400, 500, 600]
    opentype-features: ['liga', 'kern']
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace'
    weights: [400, 500]
    opentype-features: ['liga', 'tnum']
  scale:
    display-hero:    { size: 80, weight: 500, lineHeight: 1.0,  tracking: '-0.03em',  family: display, opentype: ['liga'] }
    display-lg:      { size: 60, weight: 500, lineHeight: 1.05, tracking: '-0.025em', family: display, opentype: ['liga'] }
    h1:              { size: 60, weight: 500, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    h2:              { size: 48, weight: 400, lineHeight: 1.1,  tracking: '-0.015em', family: display }
    h3:              { size: 32, weight: 600, lineHeight: 1.2,  tracking: '-0.01em',  family: display }
    h4:              { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
    h5:              { size: 20, weight: 600, lineHeight: 1.3,  tracking: '0',        family: body }
    sub-section:     { size: 18, weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    nav-link:        { size: 14, weight: 500, lineHeight: 1.0,  tracking: '0',        family: body }
    button-cta:      { size: 14, weight: 500, lineHeight: 1.0,  tracking: '0',        family: body }
    caption:         { size: 12, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    eyebrow:         { size: 12, weight: 500, lineHeight: 1.3,  tracking: '0.06em',   family: body, transform: uppercase }
    code:            { size: 13, weight: 400, lineHeight: 1.5,  tracking: '0',        family: mono }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  card: 12
  xl: 16
  terminal: 16
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64
  rhythm: 8

components:
  button-primary:
    bg: '#0a0a0a'
    color: '#ffffff'
    radius: 9999
    padding: '10px 20px'
    height: 44
    font: 'Universal Sans 500 / 14px'
    use: 'Get API Access — the single full-pill hero CTA. Solid near-black, no shadow.'
  button-ghost:
    bg: 'transparent'
    color: '#0a0a0a'
    radius: 9999
    border: '1px solid #d5d9e2'
    padding: '10px 20px'
    height: 44
    font: 'Universal Sans 500 / 14px'
    use: 'Secondary actions — outlined pill, fills with 4% near-black on hover.'
  button-soft:
    bg: '#f9f8f6'
    color: '#0a0a0a'
    radius: 16
    padding: '12px 18px'
    font: 'Universal Sans 500 / 14px'
    use: 'Warm-surface suggestion chips inside the Grok demo — "Explain quantum entangle".'
  button-tertiary:
    bg: 'transparent'
    color: '#0a0a0a'
    radius: 9999
    padding: '8px 14px'
    use: 'Nav action items — invisible until hover, then gains the 4% near-black wash.'
  card:
    bg: '#f9f8f6'
    color: '#0a0a0a'
    border: '1px solid #d5d9e2'
    radius: 12
    padding: '24px'
    use: 'Content / feature card — warm off-white surface, cool hairline, 12px radius.'
  card-terminal:
    bg: '#f8f7f5'
    color: '#262626'
    border: '1px solid #d5d9e2'
    radius: 16
    padding: '20px'
    use: 'Grok terminal / code-demo panel — warm bg, monospace fg, diff palette inside.'
  input:
    bg: '#ffffff'
    color: '#0a0a0a'
    radius: 8
    padding: '8px 12px'
    border: '1px solid #d5d9e2'
    focus: '2px solid #3b82f6'
    use: 'Text input — white fill, cool hairline, blue focus ring.'
  badge:
    bg: '#f9f8f6'
    color: '#0a0a0a'
    radius: 9999
    padding: '4px 10px'
    font: 'Universal Sans 500 / 12px'
    use: 'Status pill — "New", "Beta". Warm off-white background, near-black text.'
  nav-global:
    bg: 'rgba(255,255,255,0.85)'
    color: '#0a0a0a'
    height: 64
    use: 'Sticky top bar — 85% white with backdrop-blur, wordmark left, pill CTA right.'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-out: 'cubic-bezier(0, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  duration-instant: 100
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  cta-press: 'CTA fill deepens #0a0a0a → #1f1f1f over 150ms on :hover'
  hover-fade: 'nav / tertiary buttons fade-in a 4% near-black surface (rgba(10,10,10,0.04)) over 150ms'
  terminal-type: 'Grok demo terminal types responses in monospace with a blinking caret'
  page-fade: 'opacity 0 → 1 over 320ms on initial paint; subsequent navigation has no transition'
  reduced-motion: 'respects prefers-reduced-motion: reduce — typing / scale / translate suppressed; opacity remains'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  ambient: 'none — xAI defaults flat'
  card: 'rgba(0,0,0,0.06) 0 1px 3px — barely-there on terminal panels'
  card-hover: 'rgba(0,0,0,0.10) 0 4px 12px'
  modal: 'rgba(0,0,0,0.20) 0 24px 48px'
  ring: '0 0 0 3px rgba(59,130,246,0.5)'

accessibility:
  contrast-text-on-bg: 19.8                 # #0a0a0a on #ffffff — AAA
  contrast-text-on-cta: 19.8                # #ffffff on #0a0a0a — AAA
  contrast-text-on-surface: 18.65           # #0a0a0a on #f9f8f6 — AAA
  contrast-terminal-fg: 14.26               # #262626 on #f9f8f6 — AAA
  contrast-link-on-bg: 17.74                # #111827 on #ffffff — AAA
  contrast-muted-on-bg: 4.83                # #6b7280 on #ffffff — AA
  contrast-subtle-on-bg: 3.25               # #8a8f98 on #ffffff — AA-large only
  contrast-terminal-green: 4.48             # #248430 on #f9f8f6 — AA (and AA-large)
  contrast-terminal-red: 5.46               # #be2e31 on #f9f8f6 — AA
  focus-ring: '2px solid #3b82f6 with 2px outline-offset; the one chromatic accent on the otherwise mono surface'
  reduced-motion-honored: true
  touch-target-min: 44
  keyboard-nav: 'Tab: skip → masthead → main content → terminal demo → footer; Esc closes overlays.'

dark-mode: optional

colors-dark:
  bg: '#0a0a0a'                    # Grok product UI canvas — near-black
  bg-soft: '#141414'
  surface: '#1a1a1a'
  surface-card: '#1f1f1f'
  surface-hover: 'rgba(255,255,255,0.04)'
  text: '#f5f5f5'
  text-strong: '#ffffff'
  text-muted: '#a1a1aa'
  text-subtle: '#71717a'
  brand: '#ffffff'                 # CTA inverts to white-on-near-black in product UI
  brand-hover: '#e5e5e5'
  on-brand: '#0a0a0a'
  border: 'rgba(255,255,255,0.1)'
  border-soft: 'rgba(255,255,255,0.06)'
  link: '#ffffff'                  # --tw-prose-invert-links
  ring: '#3b82f6'
  success: '#46954a'               # --added-accent-color
  danger: '#cf222e'                # --deleted-accent-color

lineage:
  summary: |
    xAI's corporate site is frontier minimalism rendered in two inks. The
    canvas is pure `#ffffff`; the only other primary value is a stark
    **near-black `#0a0a0a`** that carries every heading, every body line,
    and the single full-pill **Get API Access** CTA. The typeface is
    **Universal Sans** — a display cut at a calm 500 weight for the 60px
    H1, a humanist body cut at 16px / 400 for prose — chosen for the same
    reason OpenAI chose OpenAI Sans and Anthropic chose its Styrene/serif
    pairing: a custom-feeling, neutral-technical voice that reads as a
    research institution rather than a startup. The one warm note in the
    whole system is an off-white **`#f9f8f6`** surface used for the Grok
    terminal panels at a 16px radius, where a frugal engineering palette
    — diff-green `#248430`, diff-red `#be2e31`, monospace foreground — lets
    the product's command-line heritage show through. The blue `#3b82f6`
    appears only as a focus ring and a prose-link tone; it is never a brand
    colour. The lineage is unmistakably the post-2020 AI-lab editorial wave
    — Apple's white-paper reduction, the broadsheet's monochrome type
    discipline, and the Unix terminal's spare functional honesty fused into
    a single light-mono surface. The Grok product UI runs darker, but the
    public face is almost monastic: black ink on white paper, one pill, one
    warm panel, no decoration.
  influences:
    - name: Apple
      role: White-paper reduction — pure white canvas, generous whitespace, a single CTA, type-as-image.
      url: https://www.apple.com
    - name: OpenAI
      role: Sibling-lab light-mono register — custom sans at calm medium weight, monochrome restraint, one black pill.
      url: https://openai.com
    - name: Vercel
      role: Stark black-on-white technical minimalism with a monospace accent and frontier-engineering posture.
      url: https://vercel.com
    - name: Universal Sans (Newglyph)
      role: The grotesque/humanist sans family the site's display and body cuts derive from.
      url: https://universalsans.com
    - name: Tailwind CSS
      role: Token scaffolding under the hood — prose, ring, and semantic HSL variables are Tailwind's defaults.
      url: https://tailwindcss.com
---

## 1. Visual Theme & Atmosphere

xAI's corporate site opens onto pure white. There is no hero gradient, no animated mesh of particles, no glowing orb — just a stark near-black `#0a0a0a` headline set in Universal Sans Display at 60px / 500, a line of calm body copy beneath it, and a single full-pill **Get API Access** button. The temperature of the page is cool and even; the only warmth anywhere is the off-white `#f9f8f6` of a Grok terminal panel sitting lower on the page. Walking in from a typical AI-startup site — gradients, hero video, three competing CTAs — the shift is immediate: this surface is quieter, more confident, and more technical.

The chromatic identity is essentially two inks. **Pure white** (`#ffffff`) is the canvas; **near-black** (`#0a0a0a`) is everything that matters — body, headings, the brand pill, the wordmark. xAI deliberately stops just short of true `#000000`; the `#0a0a0a` value is a hair softer, which reads as engineered rather than absolute. There is no brand blue, no brand green, no accent gradient. The single blue value in the system (`#3b82f6`) lives only in the focus ring and the prose-link tone — it is functional chrome, never identity.

The typeface carries the whole register. **Universal Sans** is a contemporary grotesque-humanist family (Newglyph); the site runs a Display cut for headings and a text cut for body. The H1 holds a calm 500 weight at 60px with tight `-0.02em` tracking — the same discipline OpenAI uses with OpenAI Sans, where medium weight does the work that bold does elsewhere. The H2 actually drops to a 400 weight at 48px, which is unusually light for a section opener and reinforces the spare, un-shouty atmosphere. Body is 16px / 400 at a generous 1.55 line-height — editorial, paced like a paper rather than a landing page.

The one place the brand lets its engineering personality show is the **Grok terminal panel**. Set on the warm off-white `#f9f8f6` surface at a 16px radius, it renders a monospace foreground (`#262626`) with a frugal diff palette — insert-green `#248430`, delete-red `#be2e31`, each backed by a faint tinted wash. It is the only moment of colour on the page, and it is borrowed straight from the command line. The message is clear: this is a company that builds the model, and the terminal is where the work actually happens.

The defining experience is **restraint that reads as capability**. xAI's marketing surface doesn't perform — it states. A near-monochrome page, one pill, one warm panel, and the implicit claim that the product is interesting enough not to need decoration. The corporate site is light-mono and almost monastic; the Grok product UI runs darker (near-black canvas, inverted pill), but the public face stays stark, white, and self-assured.

**Key Characteristics:**
- Pure white canvas (`#ffffff`) with a stark near-black (`#0a0a0a`) for text, headings, and the brand pill — two-ink monochrome
- Universal Sans Display at a calm 500 weight for the 60px H1; H2 actually lighter (400) — un-shouty hierarchy
- One full-pill (`9999px`) CTA — solid near-black **Get API Access**, no shadow, no gradient
- A single warm note: off-white `#f9f8f6` surface for Grok terminal panels at 16px radius
- Engineering register inside the terminal — monospace fg `#262626`, diff-green `#248430`, diff-red `#be2e31`
- The only blue (`#3b82f6`) is functional chrome — focus ring + prose links, never brand identity
- Cool hairline dividers (`#d5d9e2`) and 4% near-black hover wash — flat, no drop shadows on the marketing surface
- Generous 96–128px section rhythm; body at 16 / 1.55 — broadsheet pacing
- Corporate site light-mono; Grok product UI inverts to a near-black canvas

## 2. Color Palette & Roles

### Primary
- **Canvas** (`#ffffff`) [→ `bg`, `body bg`]: pure white page floor — no warmth, no tint
- **Bg Soft** (`#fafafa`) [→ `bg-soft`]: barely-there grey for subtle module floors
- **Near-Black Ink** (`#0a0a0a`) [→ `text`, `body color`]: the stark near-black that carries body, headings, and the brand pill
- **Text Strong** (`#0a0a0a`) [→ `text-strong`]: no separate display tier — the same near-black at all weights

### Brand & Action
- **Brand Near-Black** (`#0a0a0a`) [→ `brand`, CTA bg]: the single full-pill CTA fill — **Get API Access**
- **Brand Hover** (`#1f1f1f`) [→ `brand-hover`]: subtle warm-up on hover, barely perceptible
- **Brand Active** (`#2c2c2c`) [→ `brand-active`]: pressed state on `:active`
- **On-Brand White** (`#ffffff`) [→ `text-on-brand`]: white label on the near-black pill

### Accent
- **System Blue** (`#3b82f6`) [→ `ring`, `info`, `--tw-ring-color`]: the only blue — focus ring and prose-link tone. Functional chrome, never brand.
- **Terminal Green** (`#248430`) [→ `terminal-green`, `--terminal-diff-insert-fg`]: diff-insert / success accent inside the Grok terminal
- **Terminal Red** (`#be2e31`) [→ `terminal-red`, `--terminal-diff-delete-fg`]: diff-delete / error accent inside the terminal

### Interactive
- **Link Default** (`#111827`) [→ `link`, `--tw-prose-links`]: prose links — a cool near-black, distinct from the warm `#0a0a0a` body ink
- **Link Hover** (`#0a0a0a`) [→ `link-hover`]: deepens to the brand ink on hover
- **Visited** (`#111827`) [→ `link-visited`]: no differentiation
- **Focus Ring**: `2px solid #3b82f6` with 2px outline-offset — the system's one chromatic moment
- **Hover Surface** (`rgba(10,10,10,0.04)`) [→ `surface-hover`]: 4% near-black wash on nav / tertiary buttons

### Neutral Scale
- **Near-Black Ink** (`#0a0a0a`): primary text
- **Terminal FG** (`#262626`) [→ `terminal-fg`, `--terminal-fg` `#000000d9`]: monospace foreground inside terminal panels
- **Muted** (`#6b7280`) [→ `text-muted`]: captions, secondary copy, metadata
- **Subtle** (`#8a8f98`) [→ `text-subtle`]: tertiary, timestamps, footer micro-text
- **Hairline** (`#d5d9e2`) [→ `border`]: cool primary divider
- **Border Soft** (`rgba(10,10,10,0.08)`) [→ `border-soft`]: 8% near-black sub-divisions
- **Border Strong** (`rgba(10,10,10,0.16)`) [→ `border-strong`]: heavier dividers

### Surface & Borders
- **Canvas** (`#ffffff`): default ground
- **Warm Surface** (`#f9f8f6`) [→ `surface`]: the off-white for terminal panels, demo cards — the page's one warm note
- **Terminal Bg** (`#f8f7f5`) [→ `surface-terminal`, `--terminal-bg`]: the editor background inside the Grok terminal
- **Card Surface** (`#fffffff2`) [→ `surface-card`, `--terminal-surface`]: near-opaque white lift on raised panels
- **Header Bg** (`rgba(255,255,255,0.85)`) [→ `header-bg`, `--site-header-bg`]: sticky header — 85% white over backdrop-blur
- **Hairline** (`#d5d9e2`): cool divider, used wherever a separator is needed

### Shadow Colors
xAI defaults flat. The marketing surface uses hairline borders rather than elevation; the only shadows are a near-imperceptible `0 1px 3px rgba(0,0,0,0.06)` on raised terminal panels and a heavier overlay on modals. Depth comes from spacing and the warm-surface contrast, not from drop shadows.

- `rgba(0,0,0,0.06) 0 1px 3px` — raised panel (rare)
- `rgba(0,0,0,0.10) 0 4px 12px` — card hover
- `rgba(0,0,0,0.20) 0 24px 48px` — modal

### Semantic
- **Success Green** (`#248430`) [→ `success`]: the terminal green doubles as semantic success; `success-bg` `#ecfdf3` for surfaces
- **Info Blue** (`#3b82f6`) [→ `info`]: the system blue; `info-bg` `#f0f8ff`
- **Warning Amber** (`#b45309`) [→ `warning`]: caution copy; `warning-bg` `#fffcf0`
- **Danger Red** (`#be2e31`) [→ `danger`]: error states, reusing the terminal delete-red; `danger-bg` `#fff0f0`

## 3. Typography Rules

### Font Family

**Display**: `Universal Sans Display` — the display cut of the Universal Sans family (Newglyph), used on every heading. Fallback chain: `universalSansDisplay, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif`. The Display cut runs tighter and more characterful at large sizes; the H1 sits at 60px / 500 with `-0.02em` tracking.

**Body**: `Universal Sans` — the text cut, used for all prose, nav, buttons, and labels. Same fallback chain through `universalSans`. The body cut is optimised for legibility at 14–18px and carries the calm, paced editorial feel of the page.

**Mono**: a system monospace stack — `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace` — used exclusively inside the Grok terminal panels for code, diffs, and command output. xAI does not ship a custom mono on the marketing surface.

**OpenType features**: `liga` and `kern` everywhere; `tnum` on the mono stack so terminal numerics align in columns. No stylistic-set swaps.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| display-hero | Universal Sans Display | 80 | 500 | 1.0 | -0.03em | Page-take-over hero (flagship launches) |
| display-lg | Universal Sans Display | 60 | 500 | 1.05 | -0.025em | Standard hero — observed H1 variant |
| h1 | Universal Sans Display | 60 | 500 | 1.05 | -0.02em | Major page titles — calm medium weight |
| h2 | Universal Sans Display | 48 | 400 | 1.1 | -0.015em | Section openers — unusually light (400) |
| h3 | Universal Sans Display | 32 | 600 | 1.2 | -0.01em | Sub-section heads |
| h4 | Universal Sans Display | 24 | 600 | 1.25 | -0.005em | Card / panel titles |
| h5 | Universal Sans | 20 | 600 | 1.3 | 0 | Minor heads inside long bands |
| sub-section | Universal Sans | 18 | 500 | 1.4 | 0 | Lead-in copy above body |
| body-lg | Universal Sans | 18 | 400 | 1.55 | 0 | Hero sub-copy |
| body | Universal Sans | 16 | 400 | 1.55 | 0 | Default paragraph — observed base |
| body-sm | Universal Sans | 14 | 400 | 1.5 | 0 | Card body, secondary copy |
| label | Universal Sans | 13 | 500 | 1.4 | 0 | Form labels, metadata |
| nav-link | Universal Sans | 14 | 500 | 1.0 | 0 | Top nav links |
| button-cta | Universal Sans | 14 | 500 | 1.0 | 0 | Primary CTA label — medium, never bold |
| caption | Universal Sans | 12 | 500 | 1.4 | 0.02em | Timestamps, fine print |
| eyebrow | Universal Sans | 12 | 500 | 1.3 | 0.06em | Uppercase section eyebrows |
| code | system mono | 13 | 400 | 1.5 | 0 | Terminal / diff content |

### Principles

- **Universal Sans at 500 is the headline register.** The 60px H1 holds a calm medium weight — Universal Sans Display does the work that bold does on other sites, the same discipline OpenAI applies with OpenAI Sans.
- **The H2 is lighter than the H1.** At 48px / 400, the section opener is actually *lighter* in weight than the page title — an unusual, deliberately un-shouty move that keeps the surface even and spare.
- **Tracking tightens with size.** `-0.02em` at 60px, `-0.03em` at 80px. The negative tracking gives large headings a compressed, frontier-technical feel without ever feeling cramped.
- **No 700+ bold on the marketing surface.** The Display family ships heavier cuts, but the public site overwhelmingly uses 500–600. Restraint reinforces the institutional register.
- **Body at 16 / 1.55** is the editorial baseline; hero sub-copy lifts to 18 / 1.55. The generous line-height paces the page like a paper.
- **Mono lives only in the terminal.** The system monospace stack appears exclusively inside Grok terminal panels — code, diffs, command output — never in prose.
- **No display serif, no italic counter-voice.** Universal Sans is the only family on the marketing surface; there are no decorative typographic moments.
- **Cool prose links.** Links use `#111827`, a fractionally cooler near-black than the `#0a0a0a` body ink — the only typographic tell that a span is interactive (alongside underline).

## 4. Component Stylings

### Buttons

**`button-primary`** — solid near-black (`#0a0a0a`) fill, white text in Universal Sans 14 / 500, **full-pill `9999px` radius**, ~10×20px padding, ~44px height. The defining CTA: "Get API Access". On hover the fill warms to `#1f1f1f` over 150ms — barely perceptible. No drop-shadow, no border, no gradient. One per viewport.

**`button-ghost`** — transparent fill, near-black text, `1px solid #d5d9e2` cool hairline border, full-pill radius, same height. Used for secondary actions beside the primary CTA. On hover it gains the 4% near-black wash (`rgba(10,10,10,0.04)`).

**`button-soft`** — warm off-white (`#f9f8f6`) fill, near-black text, **16px radius** (not pill), ~12×18px padding. The Grok-demo suggestion chips — "Explain quantum entanglement", "Write a poem". These live on the terminal surface and borrow its rounding and warmth.

**`button-tertiary`** — fully transparent until hover, near-black text, full-pill radius. Used for nav action items; materialises the 4% near-black wash only on interaction. The "invisible-until-hover" pattern.

### Cards

**`card`** — warm off-white (`#f9f8f6`) surface, `1px solid #d5d9e2` cool hairline, **12px radius**, 24px padding. The general content / feature card. Flat by default; depth comes from the warm-surface contrast against the white canvas, not from shadow.

**`card-terminal`** — the signature panel. Terminal background (`#f8f7f5`), `1px solid #d5d9e2` hairline, **16px radius**, ~20px padding. Renders monospace foreground (`#262626`) with a diff palette inside — insert lines on `#e3efe4` with green `#248430` accent, delete lines on `#f8eaea` with red `#be2e31` accent. Often animated with a typing caret.

**`card-surface`** — near-opaque white lift (`#fffffff2`) over the warm surface, used for raised sub-panels inside the terminal (e.g. an editor pane floating above the terminal floor). Carries the only near-imperceptible shadow on the surface.

### Inputs / Forms

**`input`** — white (`#ffffff`) fill, `1px solid #d5d9e2` cool hairline, **8px radius**, ~8×12px padding, Universal Sans 16 / 400. On focus the border is replaced by a `2px solid #3b82f6` ring with 2px offset — the system blue making its only appearance as state, not identity.

**`textarea`** — same hairline + fill, 8px radius, ~96px min-height, `resize: vertical`. Used for the Grok prompt box.

**`prompt-box`** — the Grok input on the terminal surface: warm `#f9f8f6` fill, 16px radius to match the terminal panels, with the send affordance inset right.

### Badges, Tags, Pills

**`badge`** — warm off-white (`#f9f8f6`) fill, near-black text in Universal Sans 12 / 500, full-pill `9999px` radius, ~4×10px padding. Status pills like "New", "Beta", "Available now". Subtle; fades into the page.

**`badge-eyebrow`** — no fill, 12 / 500 uppercase Universal Sans with `0.06em` tracking in muted grey. Section eyebrow labels above titles.

**`diff-chip`** — inside the terminal: a small inline marker (`+` / `−`) on the green-wash (`#e3efe4`) or red-wash (`#f8eaea`) background, signalling code insert / delete.

### Navigation

**`nav-global`** — sticky top bar, `rgba(255,255,255,0.85)` fill rendered with `backdrop-filter: blur(...)`, ~64px height. Wordmark left, primary links centre/right (Grok, API, Company, Careers), the near-black **Get API Access** pill anchored right. Nav links are near-black at 14 / 500; on hover each link gains a 4% near-black pill surface.

**`nav-mobile`** — full-screen overlay with stacked nav items in Universal Sans Display 24 / 600. Closing X anchored top-right; the Get API Access pill pinned at the bottom.

**`footer`** — multi-column link list with 14 / 400 links over the white canvas, `1px solid #d5d9e2` top hairline. Bottom band carries the xAI wordmark + copyright in 12 / 500 subtle grey.

### Modals & Overlays

**`modal`** — centred dialog over a 50% near-black scrim (`rgba(10,10,10,0.5)`). White surface, 12px radius, no border, `0 24px 48px rgba(0,0,0,0.20)` shadow. Close X anchored top-right.

## 5. Layout Principles

### Spacing System

- Base unit: **4px**; modular grid runs on an **8px** rhythm
- Scale: `0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128`
- Section padding (vertical): **96–128px** between major bands — broadsheet rhythm
- Card internal padding: **24px** for content cards; **~20px** for terminal panels
- Gutters: **24px** between columns at desktop, **16px** at tablet

### Grid & Container

- Max content width: **1280px** centred
- Prose width inside long-form: **720px**
- Hero: full-width band, content capped at 1280, type left-aligned
- Terminal demo: typically a single wide panel or a two-up (prompt left / output right)

### Whitespace Philosophy

xAI gives each section generous breath. The 96–128px vertical rhythm, combined with a 16px body type at 1.55 line-height, paces the marketing surface like a paper rather than a landing page. Inside a section, density stays moderate — the hero column rarely fills more than 60% of the viewport, and the lone warm terminal panel sits in a sea of white. The visual rhythm is **stark type → generous breath → one warm panel → repeat**.

### Section Cadence

The site overwhelmingly uses **white bands** (default `#ffffff`). The only break in the monochrome is the **warm off-white terminal panel** (`#f9f8f6`), which appears as a contained surface inside an otherwise white section rather than as a full-width alternating band. xAI resists chromatic alternation entirely — most pages run pure white top to bottom, with the terminal demo providing the single moment of warmth and the diff palette providing the single moment of colour.

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|------|-------|-----|
| Micro | 2px | Hairline accents, the smallest UI marks |
| Small | 4px | Tight internal controls |
| Comfortable | 8px | Inputs, ghost-button corners, small modules |
| Card | 12px | Content cards, modals |
| Terminal | 16px | Grok terminal panels, soft suggestion chips |
| Pill | 9999px | Primary CTA, badges, nav hover surfaces |

The radii ladder is **comfortable controls (8px) → cards (12px) → terminal panels (16px) → full pills (9999px)**. The defining shapes are the **full-pill CTA** and the **16px terminal panel** — the pill carries the action, the 16px rounding signals the warm engineering surface. xAI keeps a complete small-to-large scale (unlike OpenAI's deliberate gap), but the visible identity lives at the two extremes.

## 7. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | no shadow | Body, masthead, footer, most editorial bands (~95% of surface) |
| 1 — Hairline | `1px #d5d9e2` border | Cards, inputs, terminal panels, footer top rule |
| 2 — Hover Surface | `rgba(10,10,10,0.04)` fill | Nav / tertiary buttons on hover |
| 3 — Press Surface | `rgba(10,10,10,0.08)` fill | Active state |
| 4 — Raised Panel | `0 1px 3px rgba(0,0,0,0.06)` | Sub-panel floating above the terminal floor |
| 5 — Card Hover | `0 4px 12px rgba(0,0,0,0.10)` | Interactive card hover |
| 6 — Modal | `0 24px 48px rgba(0,0,0,0.20)` | Centred dialog over scrim |

### Shadow Philosophy

xAI achieves depth almost entirely through **spacing and surface contrast**. Cards and terminal panels are flat with a cool `#d5d9e2` hairline; the warm `#f9f8f6` fill reading against the white canvas is what makes a panel feel raised — not a shadow. The single faint shadow (`0 1px 3px`) appears only on a sub-panel floating inside the terminal. Buttons have no elevation treatment at all: the near-black pill is solid `#0a0a0a` on white, and that flatness is the point. Where Linear and Stripe use layered elevation, xAI uses the white-paper-and-one-warm-panel contrast.

## 8. Interaction & Motion

### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover, focus, fades
- **Out**: `cubic-bezier(0, 0, 0.2, 1)` — entering surfaces
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry

### Durations
| Bucket | Value | Use |
|--------|-------|-----|
| Instant | 100ms | Focus ring fade-in |
| Fast | 150ms | CTA warm-up, nav hover surface fade |
| Standard | 240ms | Card / panel transitions |
| Slow | 320ms | Initial page paint fade |

### Per-Component Recipes

- **CTA hover**: fill transitions `#0a0a0a` → `#1f1f1f` over 150ms standard easing — barely perceptible, a press of breath.
- **CTA press**: deepens to `#2c2c2c` momentarily on `:active`.
- **Nav hover**: nav buttons fade-in a 4% near-black surface (`rgba(10,10,10,0.04)`) over 150ms — the invisible-until-hover pattern.
- **Terminal typing**: the Grok demo terminal types its response character-by-character in monospace with a blinking caret — the page's one signature motion, evoking a live command line.
- **Diff reveal**: insert / delete lines animate in on their tinted washes as the terminal "runs".
- **Focus ring**: `2px solid #3b82f6` appears instantly on `:focus-visible`, fading opacity 0 → 1 over 100ms.
- **Page transitions**: initial paint fades opacity 0 → 1 over 320ms; subsequent navigation has no transition — perceived speed over flourish.
- **Modal enter**: scrim fades over 240ms; dialog scales `0.96 → 1` and translates from `translateY(8px)` over 240ms emphasized.

### Reduced Motion

Respects `prefers-reduced-motion: reduce`. The terminal typing animation, card scale, and modal translate all degrade — the terminal renders its final state instantly, scale and translate become opacity-only. The page-paint fade and CTA warm-up remain because they communicate state without large movement.

## 9. Accessibility & A11y

### Contrast Pairs

| Pair | Ratio | Level |
|------|-------|-------|
| #0a0a0a text on #ffffff | 19.8 | AAA |
| #ffffff on #0a0a0a CTA | 19.8 | AAA |
| #0a0a0a text on #f9f8f6 warm surface | 18.65 | AAA |
| #262626 terminal-fg on #f9f8f6 | 14.26 | AAA |
| #111827 prose link on #ffffff | 17.74 | AAA |
| #6b7280 muted on #ffffff | 4.83 | AA |
| #8a8f98 subtle on #ffffff | 3.25 | AA-large only — used on micro / decorative text |
| #248430 terminal green on #f9f8f6 | 4.48 | AA (and AA-large) |
| #be2e31 terminal red on #f9f8f6 | 5.46 | AA |
| #3b82f6 focus ring on #ffffff | 3.68 | AA-large / non-text UI (passes 3:1 for focus indicators) |

xAI's core pairs sit at AAA — the near-black on white CTA hits 19.8:1, and the warm-surface body ink holds 18.65:1. The muted grey clears AA for body text; the subtle grey is reserved for non-essential micro-text where it only needs AA-large. The terminal diff colours clear AA against the warm surface, and the system blue clears the 3:1 threshold required of focus indicators and non-text UI.

### Focus Indicators

Focus ring is **2px solid `#3b82f6`** with 2px outline-offset, applied via `:focus-visible`. It is the one consistently chromatic element on the otherwise monochrome surface — the blue makes a focused control unmistakable against white. On the dark Grok product canvas the ring keeps the same blue, which reads clearly against near-black.

### ARIA Patterns

- **Skip link**: `<a href="#main">Skip to content</a>` as the first focusable element.
- **Global nav**: `<header role="banner">` wrapping `<nav aria-label="Global">`.
- **Hero CTA**: `<a href="/api">Get API Access</a>` — standard link, no extra ARIA.
- **Terminal demo**: the live terminal output is `aria-live="polite"` so the typed response is announced; the typing animation is decorative and `aria-hidden` on the caret.
- **Diff lines**: insert / delete lines carry `aria-label` ("added line", "removed line") so colour is not the sole signal.
- **Modal**: `role="dialog"` + `aria-modal="true"` + focus trap + Esc closes.
- **Status badges**: "Beta" / "New" pills include `aria-label` with full meaning.

### Keyboard Navigation

- Skip link → masthead → main content → terminal demo (focusable, controls reachable) → footer
- Nav: Tab moves through links; Esc closes any open dropdown
- Terminal: the prompt input is reachable by Tab; output region is read by screen readers via the live region
- Modal: focus trapped; Esc closes; focus returns to trigger

### Screen Reader Hints

Verbose `aria-label` on icon-only buttons (the terminal "run" / "copy" controls announce their action). The xAI wordmark is `<svg aria-hidden="true">` with the brand name as visible text. Diff colour is always backed by an `aria-label` so green/red are never the only signal.

### Reduced Motion

The terminal typing animation and all scale / translate transitions degrade to instant or opacity-only under `prefers-reduced-motion: reduce`. Page-paint fade and CTA warm-up remain.

## 10. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Masthead collapses to wordmark + Get API Access pill + hamburger; hero drops to ~36/500; terminal panel full-bleed |
| Tablet | 640–1024px | Partial nav; hero at ~48/500; terminal at comfortable width |
| Desktop | 1024–1280px | Full nav with all primary links; hero at 60/500; terminal at native width |
| Wide | 1280–1536px | Content caps at 1280; hero may scale to 80/500 on flagship pages |

### Touch Targets

- Primary CTA: ~44px height — meets AAA touch sizing
- Nav links: ~44px hit area (text 14px + padding)
- Form inputs: ~40–44px
- Terminal controls: ≥40px tap targets

### Collapsing Strategy

- Masthead: primary links collapse to a hamburger below tablet; the Get API Access pill stays visible at all sizes
- Hero: display scales 80 → 60 → 48 → 36px across breakpoints
- Terminal panel: a two-up (prompt / output) collapses to stacked single-column on mobile
- Footer: multi-column link list collapses to 2-column at tablet, 1-column at mobile

### Image Behavior

The marketing surface is type-led and uses little imagery; where product screenshots appear they use `aspect-ratio` with `object-fit: cover` and `loading="lazy"` for off-screen art. The terminal panel is rendered as live DOM (not an image), so it stays crisp and accessible at every size.

### Container Queries

Terminal sub-panels use container queries to switch from side-by-side (editor + output) to stacked when the panel narrows below its two-column threshold.

## 11. Content & Voice

### Tone

Spare, technical, frontier-confident. xAI's voice is "the lab that builds the model" — direct, engineer-coded, never hyped. Headlines state what the company is doing ("Understand the universe", "Grok") rather than selling the visitor on a feeling. The register is closer to a research charter than a product pitch.

### Microcopy Patterns

- **Button verbs**: "Get API Access", "Try Grok", "Read the docs", "Join us"
- **Error message recipe**: terse + factual — "Something went wrong. Try again."
- **Success confirmations**: minimal — "Done", "Copied"
- **Field labels**: short and engineer-coded — "Email", "API key", "Organization"
- **Terminal copy**: command-line literal — prompts, diffs, and output rendered as the real thing

### Empty States

Empty terminal: a prompt and a blinking caret with a suggestion chip row ("Explain quantum entanglement", "Write a poem") — the empty state *is* the demo.

Empty results: "No results. Try a different query." — short, no apology.

### CTA Verb Conventions

- Primary: **"Get API Access"** (default, top of every page), **"Try Grok"**
- Secondary: **"Read the docs"**, **"Learn more"**, **"View pricing"**
- Tertiary: **"Join us"**, **"See careers"**
- Avoided: "Click here", "Buy now", "Sign up free!" — exclamation and hard-sell verbs break the frontier-technical register

## 12. Dark Mode & Theming

The corporate marketing site is **light-only** — it stays on the white canvas with near-black ink end to end; there is no theme toggle on the public surface. The dark register belongs to the **Grok product UI**, which runs on a near-black `#0a0a0a` canvas with light text and an inverted (white-on-near-black) pill.

The `colors-dark:` block documents that product surface: canvas steps through `#0a0a0a → #141414 → #1f1f1f` (bg / soft / card), text lands on `#f5f5f5`, hairlines become `rgba(255,255,255,0.1)`, and the brand action inverts to white (`#ffffff` on near-black). The diff palette shifts to its dark variants — added-accent `#46954a`, deleted-accent `#cf222e` (the `--added-accent-color` / `--deleted-accent-color` tokens from the terminal system) — and the focus ring keeps its `#3b82f6` blue, which reads cleanly against near-black.

The brand position: dark mode is **a product concession, not a marketing register**. The corporate site depends on the stark white-paper aesthetic to read as institutional and frontier-serious; the near-black product UI is where the engineering identity comes fully forward.

## 13. Lineage & Influences

xAI's visual lineage runs through three traditions fused onto a single light-mono surface. First, **Apple's white-paper reduction** — pure white canvas, generous whitespace, a single CTA per viewport, type carrying the page. Second, the **post-2020 AI-research-lab editorial wave** — the same neighbourhood as OpenAI's OpenAI-Sans light-mono and Anthropic's calm editorial register, where a custom-feeling neutral sans at a calm medium weight signals "research institution" rather than "startup". Third, the **Unix terminal** — the warm-grey panel, monospace foreground, and frugal diff palette (green insert, red delete) are borrowed straight from the command line, and they are the one place the brand lets its engineering personality show.

The closest contemporaries are **OpenAI** and **Vercel**. OpenAI shares the near-monochrome marketing discipline, the custom sans at calm weight, and the single black pill — xAI's `#0a0a0a` ink is a near-twin of OpenAI's black, and both reserve their product colour for inside the app. Vercel shares the stark black-on-white technical minimalism and the monospace-accent posture. Where xAI diverges is the **warm `#f9f8f6` terminal panel**: OpenAI stays rigorously cool-white, while xAI permits exactly one warm surface, and that surface is functional (the demo), not decorative. What xAI rejects is everything performative — brand gradients, hero animation beyond the terminal type-out, drop shadows on the marketing surface, marketing-bold headlines, and any colour register that reads as consumer-startup. The position is **frontier-lab confidence**: white paper, near-black ink, one pill, one warm panel, and the implicit claim that the model is the message.

**Influences:**
- Apple — white-paper reduction, single CTA, type-as-image, [apple.com](https://www.apple.com)
- OpenAI — sibling-lab light-mono register and the single black pill, [openai.com](https://openai.com)
- Vercel — stark black-on-white technical minimalism with a monospace accent, [vercel.com](https://vercel.com)
- Universal Sans (Newglyph) — the grotesque/humanist sans the display and body cuts derive from, [universalsans.com](https://universalsans.com)
- Tailwind CSS — the token scaffolding under the hood (prose, ring, semantic HSL vars), [tailwindcss.com](https://tailwindcss.com)
- The Unix terminal — the warm panel, monospace foreground, and diff palette that carry the engineering register

## 14. Do's and Don'ts

**Do**
- Anchor the canvas on pure white (`#ffffff`) — no warm tint on the page floor
- Use stark near-black (`#0a0a0a`) — not true `#000000` — for body, headings, and the brand pill
- Set Universal Sans Display at a calm 500 weight for the 60px H1 — medium does the work of bold
- Let the H2 sit *lighter* (400 at 48px) than the H1 — the un-shouty hierarchy is part of the identity
- Use one full-pill (`9999px`) near-black CTA per viewport — **Get API Access**, no shadow
- Reserve the single warm surface (`#f9f8f6`, 16px radius) for terminal panels and demo chips
- Render the engineering register inside the terminal — monospace fg `#262626`, diff-green `#248430`, diff-red `#be2e31`
- Treat the 4% near-black wash (`rgba(10,10,10,0.04)`) as the hover vocabulary
- Use the cool hairline (`#d5d9e2`) for dividers and card borders — depth from contrast, not shadow
- Keep the blue (`#3b82f6`) to the focus ring and prose links only — never as a brand colour
- Maintain 96–128px section rhythm — broadsheet pacing, generous breath

**Don't**
- Don't reach for `#000000` true black — xAI's ink is the softer engineered `#0a0a0a`
- Don't introduce a brand gradient, hero mesh, or glowing orb — the surface is stark by design
- Don't promote the blue to a brand accent — it is functional chrome (focus / links) and nothing more
- Don't stack drop shadows on marketing cards — the language is hairline borders + warm-surface contrast
- Don't set headings in 700+ bold on the marketing surface — 500–600 is the discipline
- Don't make the H2 heavier than the H1 — the lighter section opener is intentional
- Don't add a second warm colour — the `#f9f8f6` terminal surface is the only warmth the system allows
- Don't run more than one primary CTA per viewport — the single near-black pill carries the action
- Don't put the terminal diff colours on the marketing surface outside the terminal — they belong to the command-line context
- Don't use exclamation marks or hard-sell verbs — the voice is frontier-technical, never hyped
- Don't apply the dark product palette to the corporate marketing surface — that page is light-only

## 15. Agent Prompt Guide

### Quick Color Reference

```
Canvas:           #ffffff
Near-Black Ink:   #0a0a0a
Brand (CTA):      #0a0a0a
Brand Hover:      #1f1f1f
On-Brand:         #ffffff
Warm Surface:     #f9f8f6
Terminal Bg:      #f8f7f5
Terminal FG:      #262626
Diff Green:       #248430
Diff Red:         #be2e31
Hairline:         #d5d9e2
Muted:            #6b7280
Prose Link:       #111827
Focus Ring:       #3b82f6
Hover Surface:    rgba(10,10,10,0.04)
```

### Example Component Prompts

- "Create an xAI-style primary CTA: a ~44px-tall full-pill (`9999px` radius) with solid near-black (`#0a0a0a`) fill, white text in Universal Sans 14/500, ~10×20px padding. On hover the fill warms to `#1f1f1f` over 150ms. No drop-shadow, no border, no gradient. One CTA per viewport — label it 'Get API Access'."
- "Build an xAI hero band: pure white (`#ffffff`) ground, content capped at 1280px, 96–128px vertical padding. Display headline in Universal Sans Display 60/500 with -0.02em tracking — 'Understand the universe'. Body-large sub-copy at 18/400 in `#0a0a0a`. Single near-black full-pill CTA left-aligned. No image, no animation — just stark type and white space."
- "Design an xAI terminal panel: warm off-white (`#f8f7f5`) surface, `1px solid #d5d9e2` cool hairline, 16px radius, ~20px padding. Render monospace foreground in `#262626`. Inside, show a diff — insert lines on `#e3efe4` with green `#248430` accent and a `+`, delete lines on `#f8eaea` with red `#be2e31` accent and a `−`. Animate a blinking caret typing the prompt response."
- "Create an xAI ghost button: transparent fill, near-black (`#0a0a0a`) text in Universal Sans 14/500, `1px solid #d5d9e2` border, full-pill radius, ~10×20px padding. On hover it gains a 4% near-black wash (`rgba(10,10,10,0.04)`). Use it as the secondary action beside the primary pill."
- "Build an xAI suggestion chip: warm off-white (`#f9f8f6`) fill, near-black text in Universal Sans 14/500, 16px radius (not pill), ~12×18px padding. Row of them under the Grok prompt box — 'Explain quantum entanglement', 'Write a poem'. They match the terminal surface's warmth and rounding."
- "Design an xAI input: white (`#ffffff`) fill, `1px solid #d5d9e2` cool hairline, 8px radius, Universal Sans 16/400. On focus, replace the border with a `2px solid #3b82f6` ring at 2px offset — the system blue is the only chromatic state on the surface."

### Iteration Guide

1. **Pure white, near-black ink.** If your canvas has warmth or your ink is true `#000000`, it isn't xAI. `#ffffff` floor, `#0a0a0a` ink — the soft near-black is engineered, not absolute.
2. **Universal Sans at 500, H2 lighter than H1.** The 60px H1 holds a calm medium weight; the 48px H2 drops to 400. The un-shouty, slightly-inverted hierarchy is the typographic signature.
3. **One full-pill CTA.** Near-black `#0a0a0a`, `9999px` radius, white label, no shadow. One per viewport. If there are two primary pills, you've broken the discipline.
4. **One warm surface, and it's the terminal.** `#f9f8f6` at 16px radius for the Grok panel and its chips. Don't add a second warm colour anywhere on the page.
5. **Colour lives in the terminal.** Diff-green `#248430` and diff-red `#be2e31` only appear inside the command-line panel. Keep them out of the marketing surface.
6. **Blue is chrome, not brand.** `#3b82f6` for the focus ring and prose links — never a button fill, never a hero accent.
7. **Flat, hairline depth.** `#d5d9e2` borders and the warm-surface contrast carry elevation. No drop shadows on marketing cards.
8. **Broadsheet breath.** 96–128px section rhythm, body at 16/1.55. If the page feels dense, add white space — the restraint is the brand.