xAI · Full Page

xAI

Pure-black foundation-model marketing — single sans-serif family, zero illustration, near-zero motion. xAI sells confidence through absence and proves that a category-leading AI company can afford to say nothing more than what it has to say. The taste is in what isn't shown.

x.ai/Added 2026-05-11

Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.

Curator verdict

Why we catalogued it?

xAI's landing is the most austere page in the AI marketing canon — pure black, single typeface, zero illustration. We catalogued it because the restraint is the message: the company doesn't need to sell you on capability through visual gymnastics. If you can build a foundation model, you can also build a marketing page that says nothing more than what it has to say.

Design decisions observed

Pure black canvas — no gradient softening, no warm-tint compromise. Confidence through absoluteness.
Single typeface system — one sans-serif family carries the entire page, weight ladder doing all hierarchy work.
No illustration, no diagrams — the page trusts copy and minimal layout to communicate.
Zero motion — the page loads, sits there, and doesn't perform. A category-defying choice.

What to study

Confidence through absence — xAI's page proves you can market a foundation model with less visual surface than most landing pages dare.
Single-family typography commitment — a discipline most brands break the moment they hit their second viewport.
Strategic motion-less-ness — a design choice almost no AI marketing dares make.

What to avoid

Don't lift xAI's austerity without xAI's category position — for less established brands this much restraint reads as undercooked.
Don't apply pure-black to a product where warmth or accessibility is the brand promise — it serves a specific austere AI thesis only.

Taste notes

The page reads like a minimalist sculpture press release — pure black gallery, one object, no commentary. The taste is in what isn't shown.

Lineage & references

Sits alone in its austerity within the AI foundation model marketing cohort (OpenAI, Anthropic, Mistral all opt for more visual surface).
Inherits the brutalist-minimalism pattern from late-2010s art gallery websites and Kanye West's 2018 era marketing — pure black, one font, no apologies.
Part of the post-Twitter Musk-product visual language — austere, pure-monochrome, deliberately unfriendly.

Design language brief

Paste-ready for your agent.

A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.

Philosophy

Pure-black foundation-model marketing — single sans-serif family, zero illustration, near-zero motion, copy carries 100% of the message. The page is a statement: if you're scared of monochrome, you're not the audience.

Main prompt

Use this capture as a design-language brief for a foundation-model or austere AI product marketing page. Adopt the pure-black canvas, single-family typography system, zero illustration, and near-zero motion approach. Restraint is the entire message — if you're tempted to add something, remove something instead. Apply this only to brands that can sustain the austerity claim.

Overview

Layout: Stacked
Content width: Bounded
Framing: Flat
Grid strength: Weak

Color philosophy

Dark-first canvas — primary surface #404040 paired with foreground #ffffff doing the bulk of reading-layer work. Accent moments use #0051c3 + #000000 sparingly. Near-black backdrop with restrained warm or cool accents.

Mode strategydark-first

#404040 — primary surface / dominant background
#595959 — primary foreground / reading layer
#0051c3 — first accent — used for CTAs and highlights
#000000 — secondary accent / hover states
#ffffff — tertiary surface / panels

Gradients (paste-ready)

// No gradient extracted — use solid surfaces

Typography rules

Primary family: -apple-system. Mono fallback: JetBrains Mono for code and tabular numerics.
Weight ladder: 300 / 400 / 600. Keep substitutions tight — the captured ladder is the typographic signature.
Display tracking uses negative px (not em) for optical correction at large sizes — typically -0.5 to -1.5px at 48-64px hero scale.
Heading line-height tightens at display sizes (1.0-1.2); body sits at 1.4-1.6. Captions and small UI labels at 1.3.
Tabular numerals mandatory on aligned columns: font-variant-numeric: tabular-nums.
Italic reserved for editorial quotes and emphasis where weight cannot carry — never for product UI labels.
Paragraph max 45-55ch at body size; dense data tables may extend to 65ch with line-height 1.5.

Spacing rules

Scale (observed): 3 / 5 / 15 / 23 / 30 / 40 / 60 px. Stay on the scale — no magic numbers.
Container max-width: -Infinitypx. Secondary bounded rails for narrow content clusters at ~480-640px.
Section vertical rhythm: 64-128px on desktop, 40-80px on mobile, scaled by page depth.
Card padding: 16-24px on desktop, 12-16px on mobile.
Gutter values draw from the smaller half of the scale (4 / 8 / 12 / 16 / 24).

Design tokens

Palette, type, and space — all agent-readable.

6 colors · hex / rgb / hsl / oklch

Save PNG

foreground
81%
- HEX#404040
- RGBrgb(64, 64, 64)
- HSLhsl(0, 0%, 25%)
- OKLCHoklch(37.15% 0.0000 89.76)
foreground
5%
- HEX#595959
- RGBrgb(89, 89, 89)
- HSLhsl(0, 0%, 35%)
- OKLCHoklch(46.40% 0.0000 89.76)
brand
5%
- HEX#0051C3
- RGBrgb(0, 81, 195)
- HSLhsl(215, 100%, 38%)
- OKLCHoklch(47.02% 0.1909 259.91)
foreground
3%
- HEX#000000
- RGBrgb(0, 0, 0)
- HSLhsl(0, 0%, 0%)
- OKLCHoklch(0.00% 0.0000 0.00)
background
3%
- HEX#FFFFFF
- RGBrgb(255, 255, 255)
- HSLhsl(0, 0%, 100%)
- OKLCHoklch(100.00% 0.0000 89.76)
background
3%
- HEX#EBEBEB
- RGBrgb(235, 235, 235)
- HSLhsl(0, 0%, 92%)
- OKLCHoklch(94.01% 0.0000 89.76)

Inspector

Tab through the captured artifacts.

Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.

Page structure

Semantic hierarchy at a glance.

Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 2 nodes captured; depth capped at 6 for readability.

body
└─ div

Accessibility

22 combinations · 16 pass AA · 12 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.

Preview	fg	bg	Ratio	Normal	Large	APCA Lc	Context
Aa	`#000000`	`#FFFFFF`	21.00	AAA	AAA	+106	foreground on background
Aa	`#FFFFFF`	`#000000`	21.00	AAA	AAA	-108	background on foreground
Aa	`#000000`	`#EBEBEB`	17.62	AAA	AAA	+94	foreground on background
Aa	`#EBEBEB`	`#000000`	17.62	AAA	AAA	-95	background on foreground
Aa	`#404040`	`#FFFFFF`	10.37	AAA	AAA	+94	foreground on background
Aa	`#FFFFFF`	`#404040`	10.37	AAA	AAA	-98	background on foreground
Aa	`#404040`	`#EBEBEB`	8.70	AAA	AAA	+82	foreground on background
Aa	`#EBEBEB`	`#404040`	8.70	AAA	AAA	-85	background on foreground
Aa	`#0051C3`	`#FFFFFF`	7.08	AAA	AAA	+84	brand on background
Aa	`#FFFFFF`	`#0051C3`	7.08	AAA	AAA	-89	background on brand

Page type

Full Page

Industry

Theme

light

Questions people ask about xAI

Answers are pulled from the curator verdict and design brief — the same text your AI agent sees when it paste-reads this page.

What makes xAI's marketing page so austere?

xAI's landing is the most stripped page in the AI marketing canon — pure black, single typeface, zero illustration, near-zero motion. The restraint is the message: a foundation-model company doesn't need to sell capability through visual gymnastics. If you can build the model, you can also build a page that says nothing more than it has to say.

What fonts and palette does xAI use?

A single sans-serif family handles the entire page with the weight ladder doing all hierarchy work. The palette is pure black with white type — no gradient softening, no warm-tint compromise. Confidence through absoluteness. No illustration, no diagrams, no decorative chrome; copy and minimal layout carry 100% of the communication.

Can I apply xAI's austerity to my product page?

Only if your brand can sustain the austerity claim. xAI's restraint reads as confident because of category position — for less established brands the same approach reads as undercooked. If you commit, stay single-family, zero illustration, and near-zero motion. Restraint is the entire message. The AI2 Design brief in our growing gallery captures the patterns.

Editorial credit

Featured Sponsor slot — your brand here

Dedicated logo placement — no rotation, on every export.

Become a sponsor

COMPARE THIS WITH

Editorial disclaimer