What is xAI's primary brand color?

xAI's signature is white #ffffff on near-black #0a0a0a — the brand uses no chromatic primary on the marketing surface. White carries every display headline, every outline-pill border, and the rare filled CTA on Sign Up. A muted accent palette of sunset-orange #ff7a17, dusk-purple #7c3aed, twilight #c4b5fd, and breeze-blue #a0c3ec exists in the tokens but appears only inside product illustrations and icons, never as a primary CTA tone.

Does xAI's design system have a light mode?

No — xAI is dark-canvas only. Every public marketing surface uses #0a0a0a as the page floor, with a slightly lighter #1a1c20 for hover states and #191919 for card fills. The DESIGN.md file does not document a light-mode counterpart because none exists on the brand's public web. Introducing one would break the engineered-cosmic posture the system is built around.

What typography does xAI use, and what should I use if Universal Sans isn't available?

xAI runs Universal Sans, a proprietary geometric sans, for every display and body role at weight 400 only. Geist Mono handles uppercase section eyebrows and metric counters at 14px with 1.4px positive tracking. The brand never bolds — negative letter-spacing (-2.4px at 96px down through the display ladder) does the emphasis work instead. Inter at weight 400 with -0.04em to -0.02em tracking is the closest open-source substitute for the display face; Geist Mono itself is open source and used as documented.

Why is every button a pill on xAI's site?

The 9999px pill (token rounded.pill) is the brand's universal interactive shape — every button, every nav CTA, every Read anchor uses the same translucent-white outline pill with a 1px border. There is one exception: the Sign Up CTA renders as a rare white-filled pill instead of outlined. The commitment to one shape across 'Try Grok', 'Read announcement', 'Custom Voices', and every action link is the visual signature of the system — varying the shape would dilute it.

Can I use this DESIGN.md to build my own React AI product?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce xAI's restraint (dark canvas, outline pills, weight-400 display, no shadows) rather than a generic dark theme. You can also reference the tokens directly: every color, typography style, radius, and spacing value is a quoted value you can paste into Tailwind config, CSS variables, or your own component library.

What's missing from this DESIGN.md spec?

A handful of items, documented in the Known Gaps section: the runtime translucent-white border color on outline pills (the spec stores hairline #212327, but the live site uses rgba(255,255,255,0.25) at render); the precise sunset-to-dusk gradient stops used inside product illustrations; loading states and skeleton screens; the Universal Sans variable-font axes; and the focus-ring treatment on text inputs. The spec captures the marketing surface posture but not every nested product canvas (Grok chat, API console).

xAI Design System

xAI's design system as a DESIGN.md file.

About xAI DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source x.ai

AI & LLM Platforms

xAI is Elon Musk's frontier-AI lab, and the marketing surface wears that posture with engineered restraint. The base canvas is a single near-black #0a0a0a edge-to-edge, broken only by white outline pills and the occasional warm sunset-orange or dusk-purple accent inside product illustrations. There is no gradient hero, no atmospheric backdrop, no product screenshot — the site reads as a research lab announcing its work rather than a SaaS marketing page. The shape language is even more austere than the palette: every interactive element is a 9999px pill with a 1px translucent-white border, and cards are tight 8px rectangles in #191919 with hairline #212327 dividers. No shadows exist in the system. Display headlines render in Universal Sans at weight 400 with aggressive -2.4px tracking at 96px, while uppercase Geist Mono carries every section eyebrow at 14px with positive 1.4px tracking. The two-face contrast is the brand voice.

This page packages the system into a single DESIGN.md file in the Google Labs format. Inside: 17 color tokens grouped into surface, text, hairline, and a muted accent palette (sunset #ff7a17, dusk #7c3aed, twilight #c4b5fd, breeze #a0c3ec, midnight #0d1726); 11 typography tokens covering display-xl through caption-mono-sm at one weight (400); a 4-step radius scale (0, 8px, 9999px pill, 9999px full); a 9-step spacing system from 2px to 64px; and 28 components covering buttons, cards, inputs, navigation, hero/content bands, and 10 illustrative example surfaces (pricing tiers, app shell rows, data-table cells, auth cards, modals, toasts). Every value is quoted, every reference uses the DESIGN.md token-substitution syntax.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces xAI's restraint — the dark canvas, the outline pills, the weight-400 display with negative tracking — rather than generating a generic dark theme with bolded headings and filled buttons. Reference the tokens directly in Tailwind config or CSS variables when you want the engineered-cosmic posture without the chrome of a conventional SaaS marketing site. The system is worth studying because it commits hard to one shape (the pill), one weight (400), and one surface (#0a0a0a) — the discipline of refusing every easy decorative escape hatch is what makes the brand read as a research lab.

What makes it distinct

Single near-black canvas#0a0a0a edge-to-edge, with no light-mode counterpart anywhere on the marketing surface
Pill is the entire interactive shapeevery button uses rounded 9999px with a 1px translucent-white border
Display sits at weight 400 with -2.4px tracking at 96pxthe brand never bolds anywhere in the type ladder
Two-face contrastUniversal Sans sentence-case display paired with Geist Mono uppercase eyebrows at 1.4px tracking
Hairline borders carry all elevationno drop shadows exist anywhere in the 28-component system

Live at x.ai

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

x.ai

Explore xAI

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

xAI design system FAQ

Common questions about xAI's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with Tailwind + shadcn primitives.

Use xAI in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→