x.ai

---
version: alpha
name: x.ai-design-analysis
description: A stark, near-monochrome interface for xAI/Grok anchored on pure-black canvas with white text and a tightly disciplined grayscale ramp. The system reads as engineered and technical — minimal chrome, generous negative space, and macOS-style window dots (traffic lights) on embedded code/demo surfaces. Accent voltage is rationed to a single blue and a single mint-green, used sparingly against the black field so the product UI fragments carry the page rather than decorative color.

colors:
  canvas: "#000000"
  surface-dark: "#1a1a1a"
  surface-dark-soft: "#111827"
  surface-elevated: "#222222"
  surface-light: "#ffffff"
  on-dark: "#ffffff"
  ink: "#111827"
  body: "#374151"
  body-strong: "#4b5563"
  muted: "#6b7280"
  muted-soft: "#9ca3af"
  muted-faint: "#666666"
  hairline: "#e5e7eb"
  hairline-strong: "#d1d5db"
  accent-blue: "#2563eb"
  accent-green: "#75fba6"
  accent-peach: "#fed7aa"
  traffic-red: "#ff5f57"
  traffic-yellow: "#ffbd2e"
  traffic-green: "#28c840"
  success: "#248430"
  error: "#be2e31"

typography:
  display-xl:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.5px
  display-lg:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1px
  display-md:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.5px
  title-lg:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.3px
  title-md:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-md:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  caption:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0
  code:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  button:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0
  nav-link:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0

rounded:
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px
  full: 9999px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 96px

components:
  button-primary:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 20px
    height: 40px
  button-primary-active:
    backgroundColor: "{colors.hairline}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-dark}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 20px
    height: 40px
  button-secondary-active:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.md}"
  button-text-link:
    backgroundColor: transparent
    textColor: "{colors.on-dark}"
    typography: "{typography.button}"
  text-link:
    backgroundColor: transparent
    textColor: "{colors.accent-blue}"
    typography: "{typography.body-md}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    height: 64px
  hero-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.on-dark}"
    typography: "{typography.display-xl}"
    padding: 96px
  product-window-card:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.code}"
    rounded: "{rounded.lg}"
    padding: 24px
  window-titlebar:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.muted-soft}"
    typography: "{typography.caption}"
    rounded: "{rounded.lg}"
    padding: 8px 12px
  feature-card:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.title-md}"
    rounded: "{rounded.lg}"
    padding: 32px
  feature-card-soft:
    backgroundColor: "{colors.surface-dark-soft}"
    textColor: "{colors.on-dark}"
    typography: "{typography.title-md}"
    rounded: "{rounded.lg}"
    padding: 32px
  pricing-tier-card:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.title-lg}"
    rounded: "{rounded.lg}"
    padding: 32px
  text-input:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    height: 40px
  badge-pill:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.muted-soft}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  status-dot-success:
    backgroundColor: "{colors.traffic-green}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.full}"
    size: 12px
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.muted}"
    typography: "{typography.body-sm}"
    padding: 64px
---

## Overview

x.ai (the marketing surface for xAI / Grok) is a stark, near-monochrome interface built on a **pure-black canvas** (`{colors.canvas}` — #000000) with **white text** (`{colors.on-dark}` — #ffffff). The system reads as engineered and technical — minimal chrome, large fields of negative space, and a tightly disciplined grayscale ramp running from black through `{colors.surface-dark}` (#1a1a1a) and `{colors.surface-elevated}` (#222222) up to white. The page is meant to feel like infrastructure, not marketing.

Color is rationed deliberately. The measured palette is dominated by neutrals — white at 40% frequency, black at 24%, and a long gray ramp (`{colors.muted}` #6b7280, `{colors.muted-soft}` #9ca3af, `{colors.body}` #374151, `{colors.body-strong}` #4b5563) below them. Against this monochrome field, only two true accents appear: a single blue (`{colors.accent-blue}` — #2563eb) for inline links/actions and a single mint-green (`{colors.accent-green}` — #75fba6) for highlights and live-status moments.

A signature motif is the **macOS-style window chrome** — the three "traffic light" dots (`{colors.traffic-red}` #ff5f57, `{colors.traffic-yellow}` #ffbd2e, `{colors.traffic-green}` #28c840) that sit atop embedded code/terminal and demo surfaces. These window cards are how x.ai shows the product (Grok chat, API output, code) inside the marketing flow rather than illustrating around it.

**Key Characteristics:**
- Pure-black canvas with white type — the inverse of light-mode SaaS. The black is true #000000, not a softened off-black.
- A long, disciplined gray ramp (#666666 → #6b7280 → #9ca3af → #d1d5db → #e5e7eb) carries all secondary text and hairline tones; there is no decorative mid-tone color.
- Primary CTA is a **white button on black** (`{component.button-primary}`) — maximal contrast, no fill color.
- Two scarce accents only: blue (`{colors.accent-blue}`) and mint-green (`{colors.accent-green}`). The peach (`{colors.accent-peach}` #fed7aa) appears as a rare third tint.
- macOS traffic-light window dots on code/demo cards — the system's most recognizable component motif.
- Elevation is built from near-black surface steps (#000000 → #1a1a1a → #222222) rather than shadows, since shadows are invisible on a black field.

## Colors

### Brand & Accent
- **Accent Blue** (`{colors.accent-blue}` — #2563eb): The single interactive/link accent. Used on inline `{component.text-link}` and occasional action highlights. Appears rarely against the black canvas.
- **Accent Green** (`{colors.accent-green}` — #75fba6): A bright mint-green used for highlights and live/active moments. The brightest hue in the system.
- **Accent Peach** (`{colors.accent-peach}` — #fed7aa): A soft peach tint observed as a rare third accent; used sparingly.

### Surface
- **Canvas** (`{colors.canvas}` — #000000): The default page floor — true black on every band.
- **Surface Dark** (`{colors.surface-dark}` — #1a1a1a): The first elevation step — product-window cards, feature cards, inputs.
- **Surface Dark Soft** (`{colors.surface-dark-soft}` — #111827): A faintly blue-tinged dark surface used as an alternate card fill.
- **Surface Elevated** (`{colors.surface-elevated}` — #222222): The highest near-black step — window title bars, badges, pressed states.
- **Surface Light** (`{colors.surface-light}` — #ffffff): The inverted surface — the white primary button.
- **Hairline** (`{colors.hairline}` — #e5e7eb) / **Hairline Strong** (`{colors.hairline-strong}` — #d1d5db): Light-tone borders and dividers, used at low opacity to separate dark surfaces.

### Text
- **On Dark** (`{colors.on-dark}` — #ffffff): All headlines and primary text on the black canvas.
- **Ink** (`{colors.ink}` — #111827): Text on the inverted white button surface.
- **Body** (`{colors.body}` — #374151) / **Body Strong** (`{colors.body-strong}` — #4b5563): Running-text tones used on lighter inverted surfaces.
- **Muted** (`{colors.muted}` — #6b7280): Secondary text — footer body, captions.
- **Muted Soft** (`{colors.muted-soft}` — #9ca3af): Tertiary text — window-card labels, fine print.
- **Muted Faint** (`{colors.muted-faint}` — #666666): The lowest-contrast text tone — disabled/placeholder copy.

### Window Chrome (Traffic Lights)
- **Traffic Red** (`{colors.traffic-red}` — #ff5f57), **Traffic Yellow** (`{colors.traffic-yellow}` — #ffbd2e), **Traffic Green** (`{colors.traffic-green}` — #28c840): The three macOS-style window-control dots that crown embedded code/demo cards.

### Semantic
- **Success** (`{colors.success}` — #248430): Confirmation/success states.
- **Error** (`{colors.error}` — #be2e31): Validation errors and destructive states.

## Typography

### Font Family
The analysis captured **no typography measurements** (the `typography` array in analysis.json is empty), so every value in this section is **derived** from screenshot ground-truth and standard near-monochrome SaaS baselines, not measured. x.ai renders headlines and UI text in a clean grotesque/neo-grotesque sans; an `Inter` stack with system fallbacks is documented here as a faithful, openly-available approximation. Code and terminal fragments inside window cards use a monospace stack (`ui-monospace, SFMono-Regular, Menlo`). No licensed/custom typefaces were flagged in `fonts_licensed`.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 600 | 1.05 | -1.5px | Hero h1 (derived) |
| `{typography.display-lg}` | 48px | 600 | 1.1 | -1px | Section heads (derived) |
| `{typography.display-md}` | 32px | 600 | 1.2 | -0.5px | Sub-section heads, card titles (derived) |
| `{typography.title-lg}` | 22px | 600 | 1.3 | -0.3px | Pricing plan names (derived) |
| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Feature card titles (derived) |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default running-text (derived) |
| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body, fine-print (derived) |
| `{typography.caption}` | 13px | 500 | 1.4 | 0 | Badge labels, window-card labels (derived) |
| `{typography.code}` | 14px | 400 | 1.5 | 0 | Code/terminal fragments — monospace (derived) |
| `{typography.button}` | 14px | 600 | 1 | 0 | Button labels (derived) |
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu items (derived) |

### Principles
The type system is functional and quiet: a single sans for everything, a monospace for code fragments. Headlines lean on weight 600 with mild negative tracking to read as precise and technical. On the black canvas, hierarchy is driven by size + opacity (white → gray ramp) rather than color. All values above are derived; confirm against live computed styles before shipping.

## Layout

### Spacing System
All spacing values are **derived** — the `spacing` array in analysis.json was empty.
- **Base unit:** 4px (derived).
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
- **Section padding:** `{spacing.section}` (96px) between major bands (derived).
- **Card internal padding:** `{spacing.xl}` (32px) for feature/pricing cards; `{spacing.lg}` (24px) for product-window cards (derived).

### Grid & Container
- **Max content width:** ~1200px centered (derived).
- **Hero:** centered single-column headline with the product-window card below or beside it (derived from screenshots).
- **Feature grids:** 3-up at desktop, collapsing toward 1-up on mobile (derived).
- **Pricing grid:** multi-up tier cards collapsing to single column (derived).

### Whitespace Philosophy
x.ai leans on large black negative space — the page feels uncluttered and infrastructural. Content is anchored center-stage with generous margins; the black field around each band does the visual breathing.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Base | `{colors.canvas}` (#000000), flat | Page floor, hero, footer |
| Step 1 | `{colors.surface-dark}` (#1a1a1a) | Product-window cards, feature cards, inputs |
| Step 1-alt | `{colors.surface-dark-soft}` (#111827) | Alternate card fill |
| Step 2 | `{colors.surface-elevated}` (#222222) | Window title bars, badges, pressed states |
| Inverted | `{colors.surface-light}` (#ffffff) | Primary button — maximal contrast |

On a pure-black canvas, drop shadows are effectively invisible, so **elevation is encoded as near-black surface steps** (#000000 → #1a1a1a → #222222) and thin light hairlines (`{colors.hairline}` / `{colors.hairline-strong}`) rather than shadow blur. No shadow tokens were measured (`shadows` array empty), so shadow treatment is documented as a known gap.

### Decorative Depth
- Embedded product-window cards carry their own internal chrome — the traffic-light dot cluster and a title bar (`{colors.surface-elevated}`) — which reads as depth without any shadow.
- The white primary button is the single brightest object on most bands; its contrast against black does the elevation work.

## Shapes

### Border Radius Scale
All radius values are **derived** — the `radius` array in analysis.json was empty.

| Token | Value | Use |
|---|---|---|
| `{rounded.xs}` | 4px | Small inline accents (derived) |
| `{rounded.sm}` | 6px | Dropdown items, small buttons (derived) |
| `{rounded.md}` | 8px | CTA buttons, text inputs (derived) |
| `{rounded.lg}` | 12px | Content cards, product-window cards (derived) |
| `{rounded.xl}` | 16px | Larger feature/demo containers (derived) |
| `{rounded.pill}` | 9999px | Badge pills (derived) |
| `{rounded.full}` | 9999px / 50% | Traffic-light dots, avatars (derived) |

### Window-Chrome Geometry
Product-window cards use `{rounded.lg}` (12px) outer corners; the title bar carries the three traffic-light dots as perfect `{rounded.full}` circles at ~12px each. This is the most recognizable shape signature in the system.

## Components

### Top Navigation
**`top-nav`** — Black nav bar pinned to the top of every page. ~64px tall (derived), `{colors.canvas}` background, white wordmark at left, sparse menu items in `{typography.nav-link}`, and a right-side `{component.button-primary}` (white) call to action.

### Buttons
**`button-primary`** — The signature CTA: white fill (`{colors.surface-light}`) with ink text (`{colors.ink}`), `{typography.button}`, rounded `{rounded.md}`, padding 12px × 20px, height 40px (derived). Maximal black-on-white-on-black contrast. Active state `button-primary-active` shifts toward `{colors.hairline}`.

**`button-secondary`** — Transparent on the black canvas with white text (`{colors.on-dark}`), 1px hairline border, same padding + radius as primary. Active state `button-secondary-active` fills `{colors.surface-elevated}`.

**`button-text-link`** — Inline text button, no background, white text. Used for utility nav items.

**`text-link`** — Inline body links in `{colors.accent-blue}` — the one place blue appears in running text.

### Cards & Containers
**`hero-band`** — Black-canvas hero with a centered h1 in `{typography.display-xl}` and a product-window card. Vertical padding `{spacing.section}` (96px, derived).

**`product-window-card`** — The signature embedded-product surface: `{colors.surface-dark}` background, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). Shows Grok chat / code / terminal output in `{typography.code}`. Crowned by `{component.window-titlebar}`.

**`window-titlebar`** — The macOS-style chrome strip atop a product-window card. Background `{colors.surface-elevated}`, label text `{colors.muted-soft}` in `{typography.caption}`, carrying the three traffic-light dots (`{colors.traffic-red}`, `{colors.traffic-yellow}`, `{colors.traffic-green}`).

**`feature-card`** — Used in feature grids. Background `{colors.surface-dark}`, white text, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px). Title in `{typography.title-md}`.

**`feature-card-soft`** — A variant using the blue-tinged `{colors.surface-dark-soft}` (#111827) as fill — used to subtly distinguish a feature band from neighboring `{colors.surface-dark}` cards.

**`pricing-tier-card`** — Tier card on the pricing page. Background `{colors.surface-dark}`, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px). Plan name in `{typography.title-lg}`, feature list in `{typography.body-md}`, `{component.button-primary}` at the bottom.

### Inputs & Forms
**`text-input`** — Background `{colors.surface-dark}`, white text, `{typography.body-md}`, rounded `{rounded.md}`, padding 10px × 14px, height 40px (derived). Hairline border in `{colors.hairline-strong}` at low opacity.

### Tags / Status
**`badge-pill`** — Small pill label. Background `{colors.surface-elevated}`, text `{colors.muted-soft}`, `{typography.caption}`, rounded `{rounded.pill}`, padding 4px × 12px.

**`status-dot-success`** — A small live-status indicator. `{colors.traffic-green}` fill, `{rounded.full}`, ~12px diameter — reuses the window-dot motif for online/active states.

### Footer
**`footer`** — Black footer that continues the canvas. Background `{colors.canvas}`, text `{colors.muted}` in `{typography.body-sm}`, vertical padding 64px (derived). Because the whole page is black, the footer doesn't invert — it simply lists links in the muted gray ramp.

## Do's and Don'ts

### Do
- Keep the canvas pure black (`{colors.canvas}` — #000000). The true-black field is the brand.
- Drive hierarchy with the gray ramp (white → #9ca3af → #6b7280 → #666666), not with color.
- Use the white `{component.button-primary}` as the single highest-contrast action on each band.
- Reserve `{colors.accent-blue}` for inline links and `{colors.accent-green}` for live/highlight moments — keep both scarce.
- Show the product inside `{component.product-window-card}` with the traffic-light `{component.window-titlebar}` rather than illustrating around it.
- Build elevation from near-black surface steps (#000000 → #1a1a1a → #222222), not shadows.

### Don't
- Don't soften the canvas to an off-black — the system uses #000000 deliberately.
- Don't introduce additional accent hues beyond blue, green, and the rare peach. The traffic-light reds/yellows/greens belong only to window chrome and status dots.
- Don't put accent color on the primary CTA — it stays white.
- Don't rely on drop shadows for separation; they vanish on black. Use surface steps and hairlines.
- Don't document hover states — default and active/pressed only.

## Responsive Behavior

> Note: No breakpoint or layout metrics were measured. The behavior below is **derived** from the captured landing + pricing screenshots and standard practice; confirm against the live site.

### Breakpoints (derived)

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Hamburger nav; hero h1 scales down; product-window card full-width; feature grids 1-up; pricing 1-up |
| Tablet | 768–1024px | Tightened nav; feature cards 2-up; pricing 2-up |
| Desktop | 1024–1440px | Full nav; 3-up feature cards; multi-up pricing tiers |
| Wide | > 1440px | Same as desktop, content capped ~1200px with more black margin |

### Touch Targets
- `{component.button-primary}` at ~40px height minimum (derived).
- `{component.text-input}` height ~40px (derived).

### Collapsing Strategy (derived)
- Top nav collapses to a hamburger on mobile.
- Product-window cards stay legible by reflowing their code/terminal content; the window chrome remains fixed.
- Feature and pricing grids reduce column count rather than shrinking cards.

## Iteration Guide

1. Focus on ONE component at a time, referencing its YAML key (`{component.product-window-card}`, `{component.pricing-tier-card}`).
2. Variants (`-active`, `-soft`) live as separate entries in `components:`.
3. Use `{token.refs}` everywhere — never inline a hex.
4. Never document hover. Default and Active/Pressed states only.
5. The canvas stays #000000; hierarchy comes from the gray ramp and surface steps.
6. The traffic-light window chrome is the signature motif — reuse it for product surfaces and status dots only.
7. Before shipping, replace all values marked "derived" (typography, spacing, radius, shadows) with measured values from live computed styles.

## Known Gaps

- The analysis captured **only colors** — the `typography`, `spacing`, `radius`, `shadows`, and `components` arrays in analysis.json were all empty. Every typography, spacing, radius, and component dimension in this document is therefore **derived** from screenshot ground-truth and standard baselines, not measured. Treat these as provisional until confirmed against live computed styles.
- Exact font family is unmeasured; an `Inter` + system stack is documented as a faithful open-source approximation. No licensed font was flagged in `fonts_licensed`, but the true face should be verified.
- Shadow/elevation values are unmeasured; the document infers a surface-step model (#000000 → #1a1a1a → #222222) because shadows are not visible on a black field — but no shadow tokens exist to confirm.
- Color roles were auto-assigned by frequency; some "accent" hexes (#fed7aa peach, #be2e31 dark red, #248430 dark green) appear at low frequency (2–4%) and their precise usage context could not be confirmed from the data alone.
- Breakpoints, grid widths, and touch-target sizes are derived, not measured.
- Animation, transition timings, and interaction states (chat streaming, code reveal) are out of scope.
- Form validation states beyond a base `{component.text-input}` were not extracted.

<!-- Documented by duply · real-world design systems as ready-to-use DESIGN.md for AI coding agents · https://duply.ai/x/design-md -->