# xAI

> `xai@1.0.0`

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** · `xai@1.0.0` · 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** `(geist@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Geist Sans** `(geist@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **Geist Mono** `(geist-mono@1.0.0)` | 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: `xai@1.0.0` from the encyclopedia.*