xAI. Warm cream laboratory with a black pill.
- AI
- Light theme
- 13 colors
- 3 typefaces
xAI runs a restrained near-monochrome editorial system on a warm-white canvas. Type leads the visual hierarchy: oversized display headlines at near-100% line-height with tight negative tracking sit above generous breathing room, while GeistMono punctuates the interface with terminal/code fragments. The single defining interaction is a pill-shaped, pure-black filled button — everything else is ghost, outlined, or surface-toned. Cards are flat, borderless, and warm-cream (#f9f8f6); depth comes from a single hairline ring rather than shadow stacks. Color is rationed: a warm off-white page, cream cards, near-black ink, and the occasional vivid accent (Beta pill, traffic-light terminal dots, gradient orbs) that earns attention precisely because the rest of the page refuses it.
xAI design system
Accent3
Terminal traffic-light dot (red) — decorative accent inside code-block mocks only
Terminal traffic-light dot (yellow), and the Beta pill background — the single warm accent that signals novelty
Terminal traffic-light dot (green) — decorative accent inside code-block mocks only
Neutrals10
Primary text, filled CTA buttons, logo mark — near-black anchors the hierarchy without the harshness of pure black
Dark code-block surface behind terminal demos (used where black feels too stark against warm white)
Muted heading variant for secondary headlines and section labels
Mid-weight body text where Fog reads too washed out (inline stats, spec lines)
Secondary text, icon strokes, inactive nav items — the most-used gray; carries the bulk of body and link copy
Tertiary text, meta labels, decorative fills — softer than Fog for de-emphasized utility copy
Hairline borders, input rings, button focus outlines — the only border color in the system
Warm wash backgrounds, subtle highlight zones, section tints
Card surfaces, secondary panels, tag backgrounds — warm off-white distinguishes layered surfaces from the pure-white page
Page background, button text on filled CTAs, icon foreground on dark surfaces
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Jet Ink on Ember
6.62 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
