X.ai Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

18tokens

12type steps

2radius steps

2pxspacing base

X.ai, in one page

xAI is Elon Musk's frontier-AI lab and the website wears that posture with engineered restraint: a near-black canvas {colors.canvas} (#0a0a0a) edge-to-edge, white outline pills as every interactive element, and a single proprietary geometric sans Universal Sans carrying every display headline at weight 400. There is no gradient hero, no atmospheric backdrop, no product screenshot. The brand reads as confidently sparse — a research lab announcing its work rather than a SaaS marketing site.

Type is the second decisive voice. Universal Sans carries every display at weight 400 (regular) with aggressive negative tracking (-2.4 px at 96 px, scaling down through the display ladder). For technical labels, eyebrows, and metric counters, the brand pairs Geist Mono (uppercase, 1.4 px positive tracking) — every section eyebrow reads as a code comment more than a marketing label.

Every interactive element is a pill ({rounded.pill} 9999 px) with 1 px white-translucent border rgba(255, 255, 255, 0.25). The button shape never varies — the same translucent-white pill carries "Try Grok", "Read announcement", "Custom Voices", "Sign up now", and every "Read" anchor. The pill is the entire shape system.

Key Characteristics:

A single near-black canvas ({colors.canvas} #0a0a0a) with white outline pills as the entire interactive vocabulary.
Universal Sans weight 400 for display, Geist Mono uppercase tracked for labels — the two-face contrast IS the brand voice.
Every button is a {rounded.pill} outline with translucent-white border. The brand never uses filled CTAs except for one variant (white-filled pill on Sign Up).
Cards are tight {rounded.sm} 8 px rectangles in a slightly-lighter {colors.canvas-card} (#191919) fill with hairline border. No shadows.
A muted accent palette of sunset-orange / dusk-purple / twilight-violet / breeze-blue lives in the design tokens but appears rarely on the main marketing surface — reserved for product illustrations / icons.
Massive negative letter-spacing on display headlines (-2.4 px at 96 px) gives the typography a precise, gathered look.

Do's and don'ts

Do

Reserve {colors.canvas} (#0a0a0a) as the only page surface. The brand is dark-canvas only.
Set hero headlines in {typography.display-xl} Universal Sans weight 400 with -2.4 px tracking. The precision IS the voice.
Use {rounded.pill} 9999 px on every interactive element. The pill is the brand.
Pair Universal Sans (sentence-case) with GeistMono UPPERCASE (eyebrows, labels, metric counters).
Use white-translucent borders for outline buttons — the brand never uses solid white borders on its outline pill.

Don't

Don't introduce a light-mode counterpart. xAI is dark-canvas only.
Don't bold display headlines. Weight 400 is the entire scale.
Don't use filled buttons broadly. The brand uses outline pills almost exclusively; one Sign Up white-filled pill is the rare exception.
Don't drop a drop-shadow on cards. Hairline borders carry elevation.
Don't substitute Universal Sans with a generic geometric sans without adjusting letter-spacing. The negative tracking is part of the brand.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the X.ai design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #ffffff
- on-primary: #0a0a0a
- ink: #ffffff
- ink-hover: #fafaf7
- body: #dadbdf
- body-mid: #7d8187
- mute: #7d8187
- hairline: #212327
- canvas: #0a0a0a
- canvas-soft: #1a1c20

Type:
- families: universalSans, Inter, -apple-system, GeistMono
- scale: 12, 14, 16, 18, 20, 24, 28, 32, 36
- weights: 400

Shape:
- radius: 0, 8
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow. | Don't drop a drop-shadow on cards. Hairline borders carry elevation.

Spacing: 2, 4, 8, 12, 16, 24, 32, 48, 64

Rules:
- Reserve `{colors.canvas}` (`#0a0a0a`) as the only page surface. The brand is dark-canvas only.
- Set hero headlines in `{typography.display-xl}` Universal Sans weight 400 with `-2.4 px` tracking. The precision IS the voice.
- Use `{rounded.pill}` 9999 px on every interactive element. The pill is the brand.
- Pair Universal Sans (sentence-case) with GeistMono UPPERCASE (eyebrows, labels, metric counters).
- Use white-translucent borders for outline buttons — the brand never uses solid white borders on its outline pill.

Avoid:
- Don't introduce a light-mode counterpart. xAI is dark-canvas only.
- Don't bold display headlines. Weight 400 is the entire scale.
- Don't use filled buttons broadly. The brand uses outline pills almost exclusively; one Sign Up white-filled pill is the rare exception.
- Don't drop a drop-shadow on cards. Hairline borders carry elevation.
- Don't substitute Universal Sans with a generic geometric sans without adjusting letter-spacing. The negative tracking is part of the brand.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Brand & Accent

White ({colors.primary} — #ffffff): The brand's primary "color" — used as button outline, button-primary fill, all display text. The brand's signature is white-on-near-black.
Sunset Orange ({colors.accent-sunset} — #ff7a17): A warm orange used inside product illustrations and accent moments.
Sunset Soft ({colors.accent-sunset-soft} — #ffc285): The lighter variant of the sunset accent.
Dusk Purple ({colors.accent-dusk} — #7c3aed): Deep purple used inside product illustrations.
Twilight ({colors.accent-twilight} — #c4b5fd): Soft violet — illustrative accent.
Breeze Blue ({colors.accent-breeze} — #a0c3ec): Soft blue — illustrative accent.
Midnight ({colors.accent-midnight} — #0d1726): Deep blue-black for illustrative backgrounds.

Surface

Canvas ({colors.canvas} — #0a0a0a): The default near-black page background. The brand's only true surface.
Canvas Soft ({colors.canvas-soft} — #1a1c20): A slightly lighter dark fill used for hovered nav items and tooltips.
Canvas Card ({colors.canvas-card} — #191919): The charcoal card fill used inside product-feature cards.
Canvas Mid ({colors.canvas-mid} — #363a3f): A mid-dark used for nested surfaces and code mockup backgrounds.
Hairline ({colors.hairline} — #212327): 1 px solid dividers on dark surfaces.

Text

Ink ({colors.ink} — #ffffff): Default text on canvas — pure white.
Ink Hover ({colors.ink-hover} — #fafaf7): Slightly off-white used for hover states (filtered out per no-hover policy in component specs).
Body ({colors.body} — #dadbdf): Secondary body text — supporting copy in lighter weight.
Body Mid / Mute ({colors.body-mid} — #7d8187): Mid-emphasis body and mute text — captions, fine print.

Semantic

The brand doesn't surface a separate semantic palette on the marketing site. Validation cues use the white-on-canvas hierarchy.

Type scaleRead the full spec

Font Family

Two faces ladder the system:

universalSans — proprietary geometric sans used for every display, body, button, and link role. Weight 400 only on the marketing surface (the brand's restraint is part of the voice). Negative letter-spacing at display sizes is the visual signature.
GeistMono — used for uppercase section eyebrows, label captions, and metric counters. Positive tracking (1.2 – 1.4 px) at 12 – 14 px.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xl}`	96px	400	96px	-2.4px	Maximum hero scale.
`{typography.display-lg}`	72px	400	72px	-1.8px	Sub-hero displays.
`{typography.display-md}`	48px	400	48px	-1.2px	Section headlines.
`{typography.display-sm}`	32px	400	36px	-0.6px	Card-cluster headings.
`{typography.display-xs}`	20px	400	28px	0	Inline displays.
`{typography.body-lg}`	18px	400	28px	0	Lead paragraphs.
`{typography.body-md}`	16px	400	24px	0	Default body.
`{typography.body-sm}`	14px	400	20px	0	Secondary body.
`{typography.caption-mono}`	14px	400	20px	1.4px	Section eyebrow (GeistMono uppercase).
`{typography.caption-mono-sm}`	12px	400	16px	1.2px	Small mono labels.
`{typography.button-md}`	14px	400	20px	0	Button label.

Principles

Weight 400 for everything. The brand never bolds. Negative tracking + size hierarchy do the emphasis work.
Tight negative tracking on display sizes. Reverting to neutral tracking loses the precision feel.
GeistMono uppercase for eyebrows. Tracked positively (1.4 px) to make the mono read as a code comment.

Note on Font Substitutes

universalSans is proprietary. Open-source substitutes:

Display + body — *Inter* weight 400 with -0.04em to -0.02em letter-spacing at display sizes comes closest. *Geist* is the second-best option.
Mono — *Geist Mono* is the documented brand companion; *JetBrains Mono* or *IBM Plex Mono* are alternates.

Components and layoutRead the full spec

Buttons

button-primary — the rare white-filled pill (used on a single Sign Up CTA).

Background {colors.primary} white, text {colors.on-primary} near-black, 1 px solid white border, label {typography.button-md}, padding {spacing.xs} {spacing.md}, shape {rounded.pill} 9999 px.

button-outline-on-dark — the canonical white-outline pill, used for every non-primary CTA.

Background {colors.canvas} (transparent in practice — rgba(0,0,0,0)), text {colors.ink} white, 1 px solid {colors.hairline} border (translucent white at runtime), same typography / padding scale / shape.

button-outline-sm — the smaller outline pill used in card-cluster CTAs.

Same as button-outline-on-dark with tighter padding {spacing.xs} {spacing.md}.

Cards & Containers

card-content — the default content card.

Background {colors.canvas-card} (#191919), text {colors.ink}, 1 px solid {colors.hairline} border, padding {spacing.xl}, shape {rounded.sm} 8 px.

card-feature-product — the product-feature card (Grok / Voice / API).

Same chrome as card-content. Hosts an SVG illustration + headline + body + outline pill CTA.

Inputs & Forms

text-input — the standard text input on dark.

Background {colors.canvas-soft}, text {colors.ink}, 1 px solid {colors.hairline}, body in {typography.body-md}, padding {spacing.md} {spacing.lg}, shape {rounded.sm} 8 px.

Navigation

nav-bar — the sticky top nav.

Background {colors.canvas}, text {colors.ink}, padding {spacing.md} {spacing.xl}.

nav-link — link items inside nav.

Text {colors.ink}, set in {typography.body-sm}.

footer — the footer band.

Background {colors.canvas}, text {colors.body}, padding {spacing.3xl} {spacing.xl}. Body in {typography.body-sm}.

Signature Components

hero-band — the dark hero with massive display headline.

Background {colors.canvas}, text {colors.ink}, padding {spacing.4xl} {spacing.xl}. Headline in {typography.display-xl} (96 px weight 400 with -2.4 px tracking).

content-band — the standard content section.

Background {colors.canvas}, text {colors.ink}, padding {spacing.4xl} {spacing.xl}. Section headline in {typography.display-md} preceded by a {typography.caption-mono} UPPERCASE GeistMono eyebrow.

eyebrow-mono — the uppercase tracked GeistMono label above every section headline.

Text {colors.ink}, set in {typography.caption-mono}. The brand's signature label style.

divider-hairline — the 1 px line between section bands.

1 px solid {colors.hairline}.

Examples (illustrative)

Auto-derived kit-mirror demonstration surfaces (scripts/derive-examples-block.mjs). Each ex-* entry references brand-native primitives so downstream consumers (/preview-design, /generate-kit) re-skin the same 10 surfaces consistently. TO_FILL markers indicate missing primitives — resolve in the LLM judgment pass.

ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

Properties: backgroundColor, rounded, padding

ex-cart-drawer — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

Properties: backgroundColor, rounded, padding, item-divider

ex-app-shell-row — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

Properties: backgroundColor, activeIndicator, rounded, padding

ex-data-table-cell — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

Properties: headerBackground, headerTypography, bodyTypography, cellPadding, rowBorder

ex-auth-form-card — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

Properties: backgroundColor, rounded, padding

ex-modal-card — Modal dialog surface — same chrome as feature-card with elevated shadow.

Properties: backgroundColor, rounded, padding

ex-empty-state-card — Empty-state illustration frame.

Properties: backgroundColor, rounded, padding, captionTypography

ex-toast — Toast notification surface — feature-card shape + medium shadow.

Properties: backgroundColor, rounded, padding, typography

Spacing System

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-x {--page-bg: #0a0a0a;
  --page-bg-gradient: none;
  --text-color: #ffffff;
  --heading-color: #ffffff;
  --link-color: #ffffff;
  --link-hover-color: #e6e6e6;
  --border-color: #363636;
  --card-bg: #0a0a0a;
  --card-shadow: 0 1px 2px rgba(255,255,255,0.06);
  --card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
  --header-bg: #1e1e1e;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #0a0a0a;
  --footer-text-color: #a9a9a9;
  --button-bg: #ffffff;
  --button-text-color: #0a0a0a;
  --button-hover-bg: #e6e6e6;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #191919;
  --button-secondary-text-color: #ffffff;
  --button-secondary-hover-bg: #272727;
  --button-secondary-border: 1px solid #363636;
  --prompt-bg: #161616;
  --prompt-text-color: #ffffff;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-inter);
  --card-border-radius: 8px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

notion dev 74.7%
together.ai 72.1%
fujitsu 71.6%
shimadzu 70.3%

Where this came from

Source document: volt/design-md/x.ai/DESIGN.md · 21.1 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.