W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
xAI
xAI is Elon Musk's AI research company — maker of the Grok conversational model family and the Colossus training-cluster build. The brand voice is stark and engineering-spec terse: short technical paragraphs, model cards, infrastructure disclosures, no marketing flourish. Visually, xAI is the most reductive identity in the modern AI-lab cohort — a pure-black "Void" canvas, the white X mark as monogram, a calibrated five- stop Ash neutral ramp for surfaces, and two restrained signature accents (a bright lime "Spark" for active state and an ember "Pulse" orange for the Grok mark) used sparingly. Typography is the proprietary universalSans / universalSansDisplay family paired with the licensed GeistMono distribution for code.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/xai/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/xai/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
xAI
xAI is Elon Musk's AI research company — maker of the Grok conversational model family and the Colossus training-cluster build. The brand voice is stark and engineering-spec terse: short technical paragraphs, model cards, infrastructure disclosures, no marketing flourish. Visually, xAI is the most reductive identity in the modern AI-lab cohort — a pure-black "Void" canvas, the white X mark as monogram, a calibrated five- stop Ash neutral ramp for surfaces, and two restrained signature accents (a bright lime "Spark" for active state and an ember "Pulse" orange for the Grok mark) used sparingly. Typography is the proprietary universalSans / universalSansDisplay family paired with the licensed GeistMono distribution for code.
Tags: xai, grok, ai, brand, dark-first, monochrome, minimal, stark
Atoms
Palette
xAI · [email protected] · Proprietary — All Rights Reserved
xAI's brand palette as captured from the live site (x.ai). The brand is stark dark-first by construction: a pure-black "Void" canvas (#0A0A0A) with pure-white inverse, a calibrated five-stop neutral ramp for surfaces and quiet emphasis, and a deliberately minimal set of accent colors. The brand reads as engineering-spec minimal — closer to a research paper than a marketing site — with the white-on-black X mark as the dominant visual signature. Two restrained signature accents appear in the live CSS — a bright lime "Spark" (#75FBA6) used for active state and a deep ember "Pulse" (#FF6308) used for the Grok product mark — but the brand's identity is defined first by its absence of color, not its presence.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Geist Sans ([email protected]) |
OFL-1.1 | sans-serif |
body |
Geist Sans ([email protected]) |
OFL-1.1 | sans-serif |
mono |
Geist Mono ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
void |
Void | #0A0A0A |
void-deep |
Void Deep | #0C0C0B |
void-pure |
Void Pure | #000000 |
ash-100 |
Ash 100 | #171717 |
ash-200 |
Ash 200 | #18181B |
ash-300 |
Ash 300 | #262626 |
ash-400 |
Ash 400 | #27272A |
ash-500 |
Ash 500 | #2B2B2B |
ash-600 |
Ash 600 | #404040 |
ash-700 |
Ash 700 | #525252 |
ash-800 |
Ash 800 | #545454 |
ash-900 |
Ash 900 | #696969 |
paper-pure |
Paper Pure | #FFFFFF |
paper-warm |
Paper Warm | #FEFEFE |
paper-cream |
Paper Cream | #F8F7F5 |
spark |
Spark | #75FBA6 |
pulse |
Pulse | #FF6308 |
pulse-soft |
Pulse Soft | #FFA07A |
link-blue |
Link Blue | #2563EB |
ember-warning |
Ember Warning | #F5AB35 |
ember-error |
Ember Error | #D91E18 |
ink-body |
Ink Body | #374151 |
ink-heading |
Ink Heading | #111827 |
ink-quiet |
Ink Quiet | #6B7280 |
ink-border |
Ink Border | #E5E7EB |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
paper-pure |
#FFFFFF |
surface |
paper-cream |
#F8F7F5 |
surface-elevated |
paper-pure |
#FFFFFF |
text-primary |
ink-heading |
#111827 |
text-secondary |
ink-body |
#374151 |
text-tertiary |
ink-quiet |
#6B7280 |
primary |
void |
#0A0A0A |
primary-hover |
ash-300 |
#262626 |
accent |
link-blue |
#2563EB |
accent-hover |
link-blue |
#2563EB |
warning |
ember-warning |
#F5AB35 |
warning-hover |
pulse |
#FF6308 |
error |
ember-error |
#D91E18 |
success |
spark |
#75FBA6 |
border |
ink-border |
#E5E7EB |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
void |
#0A0A0A |
surface |
ash-100 |
#171717 |
surface-elevated |
ash-300 |
#262626 |
text-primary |
paper-pure |
#FFFFFF |
text-secondary |
ash-900 |
#696969 |
text-tertiary |
ash-700 |
#525252 |
primary |
paper-pure |
#FFFFFF |
primary-hover |
ash-600 |
#404040 |
accent |
spark |
#75FBA6 |
accent-hover |
spark |
#75FBA6 |
warning |
ember-warning |
#F5AB35 |
warning-hover |
pulse |
#FF6308 |
error |
ember-error |
#D91E18 |
success |
spark |
#75FBA6 |
border |
ash-200 |
#18181B |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
void |
#0A0A0A |
on-identity |
paper-pure |
#FFFFFF |
primary |
paper-pure |
#FFFFFF |
primary-hover |
ash-600 |
#404040 |
accent |
spark |
#75FBA6 |
accent-hover |
spark |
#75FBA6 |
mark |
paper-pure |
#FFFFFF |
success |
spark |
#75FBA6 |
warning |
ember-warning |
#F5AB35 |
error |
ember-error |
#D91E18 |
text-primary-light |
ink-heading |
#111827 |
text-primary-dark |
paper-pure |
#FFFFFF |
background-light |
paper-pure |
#FFFFFF |
background-dark |
void |
#0A0A0A |
surface-light |
paper-cream |
#F8F7F5 |
surface-dark |
ash-100 |
#171717 |
text-secondary-light |
ink-body |
#374151 |
text-tertiary-light |
ink-quiet |
#6B7280 |
border-light |
ink-border |
#E5E7EB |
border-dark |
ash-200 |
#18181B |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Pure white (#FFFFFF) on Void (#0A0A0A) gives roughly 20:1 — the brand's monochrome construction clears AAA by design. This rule guards against consumers swapping in mid-Ash neutrals that would defeat the property.
colorChoice → roles.colors.primary
- allowed: paper-pure, void
- forbidden: spark, pulse, link-blue, ember-warning, ember-error
xAI's primary brand color is monochrome — white-on-Void in dark mode, Void-on-paper in light mode. The Spark / Pulse / Link-blue accents are reserved for active state, the Grok product mark, and long-form prose links — never as the brand interactive primary.
colorChoice → roles.colors.identity
- allowed: void, void-pure, void-deep
- forbidden: paper-pure, spark, pulse, link-blue
xAI is dark-first by construction; the documented site canvas is #0A0A0A. The identity surface is the Void canvas — the Spark and Pulse accents flow ACROSS it sparingly as state and product marks, but never replace the Void as the identity ground.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, outlined, on-busy-photo
xAI's X mark is monochrome and geometric. Recolored, skewed, drop-shadowed, or outlined variants conflict with the brand's stark engineering-spec posture. The mark is white on Void, or Void on Paper — no other treatment is documented on x.ai.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
universalSans / universalSansDisplay is the only display face on x.ai; the visual hierarchy is established entirely by size and weight within a single family (paired with GeistMono for inline code). A 1.5× minimum heading-to-body ratio preserves the hierarchy without introducing a second family.
contextRestriction → roles.colors.accent
- forbiddenContexts: large-fill, background, hero
- allowedContexts: link, focus-ring, active-state, live-data, data-viz-primary
Spark (#75FBA6) appears at small sizes — active state, live- data indicator, focus ring — never as a large background fill. Large Spark fills conflict with the brand's monochrome Void canvas where bright accents are signals, not surfaces.
compositionConstraint → roles.colors.identity
- pairsWith: paper-pure, paper-warm, ash-100, ash-200
- doesNotPairWith: spark, pulse, link-blue, ember-error
The identity block is white-on-Void or Void-on-paper. Placing the brand identity surface directly against a Spark or Pulse background breaks the documented monochrome treatment — the accents are signals atop the identity, not backgrounds behind it.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700
universalSansDisplay on x.ai is delivered with Regular (400), Medium (500), SemiBold (600), and Bold (700) cuts. The stark editorial composition of x.ai uses 400 for body and 700 for hero headings almost exclusively; weights outside this band are not in the licensed variable-font cut.
accessibilityRequirement → *
- standard:
WCAG-AAA - criterion:
1.4.6
WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. The brand's monochrome construction clears AAA effortlessly; consumers must preserve the property when composing Ash neutrals against the Void canvas (mid-Ash tokens between Ash-400 and Ash-700 fail AAA against Void and must not stand in for primary text).
Provenance
- Source: https://x.ai/
- License:
Proprietary — All Rights Reserved - Attribution: X.AI Corp — visual identity captured from the deployed stylesheet on x.ai (Tailwind-class neutral ramp, gradient stops, and the proprietary universalSans / universalSansDisplay / GeistMono font-family stack). xAI, Grok, Colossus, and associated marks are property of X.AI Corp.
- Imported:
2026-05-18 - Notes: Derived from live site CSS at https://x.ai/ on 2026-05-18 (fetched via web.archive.org snapshot dated 2026-01-01 because x.ai serves a 403 to unauthenticated programmatic clients); no public brand guide located. The proprietary universalSans and universalSansDisplay faces are declared on x.ai via @font-face but are not publicly distributed. GeistMono is referenced by name and is the open-source Vercel typeface; this atom uses geist@1 as the substitute for the sans/display role and geist-mono@1 for the mono role.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by xAI
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
xAI
A clear hierarchy in xAI's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ spark #75FBA6 accent-hover
→ spark #75FBA6 background-dark
→ void #0A0A0A background-light
→ paper-pure #FFFFFF border-dark
→ ash-200 #18181B border-light
→ ink-border #E5E7EB error
→ ember-error #D91E18 identity
→ void #0A0A0A mark
→ paper-pure #FFFFFF on-identity
→ paper-pure #FFFFFF primary
→ paper-pure #FFFFFF primary-hover
→ ash-600 #404040 success
→ spark #75FBA6 surface-dark
→ ash-100 #171717 surface-light
→ paper-cream #F8F7F5 text-primary-dark
→ paper-pure #FFFFFF text-primary-light
→ ink-heading #111827 text-secondary-light
→ ink-body #374151 text-tertiary-light
→ ink-quiet #6B7280 warning
→ ember-warning #F5AB35 Typography
code
→ mono Geist Mono display
→ heading Geist Sans prose
→ body Geist Sans Palette mode mappings (from xai)
Light mode (15 roles)
accent
→ link-blue accent-hover
→ link-blue background
→ paper-pure border
→ ink-border error
→ ember-error primary
→ void primary-hover
→ ash-300 success
→ spark surface
→ paper-cream surface-elevated
→ paper-pure text-primary
→ ink-heading text-secondary
→ ink-body text-tertiary
→ ink-quiet warning
→ ember-warning warning-hover
→ pulse Dark mode (15 roles)
accent
→ spark accent-hover
→ spark background
→ void border
→ ash-200 error
→ ember-error primary
→ paper-pure primary-hover
→ ash-600 success
→ spark surface
→ ash-100 surface-elevated
→ ash-300 text-primary
→ paper-pure text-secondary
→ ash-900 text-tertiary
→ ash-700 warning
→ ember-warning warning-hover
→ pulse Rules (9 typed constraints)
error · 7 rules
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Pure white (#FFFFFF) on Void (#0A0A0A) gives roughly 20:1 — the brand's monochrome construction clears AAA by design. This rule guards against consumers swapping in mid-Ash neutrals that would defeat the property.
colorChoice roles.colors.primary allowed paper-pure, void forbidden spark, pulse, link-blue, ember-warning, ember-error xAI's primary brand color is monochrome — white-on-Void in dark mode, Void-on-paper in light mode. The Spark / Pulse / Link-blue accents are reserved for active state, the Grok product mark, and long-form prose links — never as the brand interactive primary.
colorChoice roles.colors.identity allowed void, void-pure, void-deep forbidden paper-pure, spark, pulse, link-blue xAI is dark-first by construction; the documented site canvas is #0A0A0A. The identity surface is the Void canvas — the Spark and Pulse accents flow ACROSS it sparingly as state and product marks, but never replace the Void as the identity ground.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, outlined, on-busy-photo xAI's X mark is monochrome and geometric. Recolored, skewed, drop-shadowed, or outlined variants conflict with the brand's stark engineering-spec posture. The mark is white on Void, or Void on Paper — no other treatment is documented on x.ai.
fontPairing typography.heading requires body minSizeRatio 1.5 universalSans / universalSansDisplay is the only display face on x.ai; the visual hierarchy is established entirely by size and weight within a single family (paired with GeistMono for inline code). A 1.5× minimum heading-to-body ratio preserves the hierarchy without introducing a second family.
contextRestriction roles.colors.accent forbiddenContexts large-fill, background, hero allowedContexts link, focus-ring, active-state, live-data, data-viz-primary Spark (#75FBA6) appears at small sizes — active state, live- data indicator, focus ring — never as a large background fill. Large Spark fills conflict with the brand's monochrome Void canvas where bright accents are signals, not surfaces.
compositionConstraint roles.colors.identity pairsWith paper-pure, paper-warm, ash-100, ash-200 doesNotPairWith spark, pulse, link-blue, ember-error The identity block is white-on-Void or Void-on-paper. Placing the brand identity surface directly against a Spark or Pulse background breaks the documented monochrome treatment — the accents are signals atop the identity, not backgrounds behind it.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700 universalSansDisplay on x.ai is delivered with Regular (400), Medium (500), SemiBold (600), and Bold (700) cuts. The stark editorial composition of x.ai uses 400 for body and 700 for hero headings almost exclusively; weights outside this band are not in the licensed variable-font cut.
accessibilityRequirement * standard WCAG-AAA criterion 1.4.6 WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. The brand's monochrome construction clears AAA effortlessly; consumers must preserve the property when composing Ash neutrals against the Void canvas (mid-Ash tokens between Ash-400 and Ash-700 fail AAA against Void and must not stand in for primary text).
Provenance
- Source
- https://x.ai/
- License
Proprietary — All Rights Reserved- Attribution
- X.AI Corp — visual identity captured from the deployed stylesheet on x.ai (Tailwind-class neutral ramp, gradient stops, and the proprietary universalSans / universalSansDisplay / GeistMono font-family stack). xAI, Grok, Colossus, and associated marks are property of X.AI Corp.
- Imported
2026-05-18- Notes
- Derived from live site CSS at https://x.ai/ on 2026-05-18 (fetched via web.archive.org snapshot dated 2026-01-01 because x.ai serves a 403 to unauthenticated programmatic clients); no public brand guide located. The proprietary universalSans and universalSansDisplay faces are declared on x.ai via @font-face but are not publicly distributed. GeistMono is referenced by name and is the open-source Vercel typeface; this atom uses geist@1 as the substitute for the sans/display role and geist-mono@1 for the mono role.