{
"id": "xai",
"version": "1.0.0",
"name": "xAI",
"description": "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.\n",
"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.\n",
"importedDate": "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.\n"
},
"tags": [
"xai",
"grok",
"ai",
"brand",
"dark-first",
"monochrome",
"minimal",
"stark"
],
"palette": {
"ref": "xai@1.0.0",
"swatches": [
{
"id": "void",
"name": "Void",
"value": "#0A0A0A",
"description": "Primary dark canvas — xAI's documented near-black.",
"aliases": []
},
{
"id": "void-deep",
"name": "Void Deep",
"value": "#0C0C0B",
"description": "Deepest near-black — gradient endpoint.",
"aliases": []
},
{
"id": "void-pure",
"name": "Void Pure",
"value": "#000000",
"description": "Pure black for hero artwork and the X mark ground.",
"aliases": []
},
{
"id": "ash-100",
"name": "Ash 100",
"value": "#171717",
"description": "Subtle elevated surface on Void canvas.",
"aliases": []
},
{
"id": "ash-200",
"name": "Ash 200",
"value": "#18181B",
"description": "Borders / quiet dividers on Void canvas.",
"aliases": []
},
{
"id": "ash-300",
"name": "Ash 300",
"value": "#262626",
"description": "Mid surface — card background on Void.",
"aliases": []
},
{
"id": "ash-400",
"name": "Ash 400",
"value": "#27272A",
"description": "Hover surface on Void canvas.",
"aliases": []
},
{
"id": "ash-500",
"name": "Ash 500",
"value": "#2B2B2B",
"description": "Elevated card surface.",
"aliases": []
},
{
"id": "ash-600",
"name": "Ash 600",
"value": "#404040",
"description": "Tertiary text on Void canvas.",
"aliases": []
},
{
"id": "ash-700",
"name": "Ash 700",
"value": "#525252",
"description": "Secondary text on Void canvas.",
"aliases": []
},
{
"id": "ash-800",
"name": "Ash 800",
"value": "#545454",
"description": "Mid-tone neutral.",
"aliases": []
},
{
"id": "ash-900",
"name": "Ash 900",
"value": "#696969",
"description": "Tertiary text — quietest readable on Void.",
"aliases": []
},
{
"id": "paper-pure",
"name": "Paper Pure",
"value": "#FFFFFF",
"description": "Pure white — light canvas and on-Void foreground.",
"aliases": []
},
{
"id": "paper-warm",
"name": "Paper Warm",
"value": "#FEFEFE",
"description": "Near-white — soft inverse.",
"aliases": []
},
{
"id": "paper-cream",
"name": "Paper Cream",
"value": "#F8F7F5",
"description": "Warm cream — quiet surface on light canvas.",
"aliases": []
},
{
"id": "spark",
"name": "Spark",
"value": "#75FBA6",
"description": "Bright lime spark — active state and live-data accent.",
"aliases": []
},
{
"id": "pulse",
"name": "Pulse",
"value": "#FF6308",
"description": "Ember orange — Grok mark and high-attention accent.",
"aliases": []
},
{
"id": "pulse-soft",
"name": "Pulse Soft",
"value": "#FFA07A",
"description": "Soft ember tint for hover states.",
"aliases": []
},
{
"id": "link-blue",
"name": "Link Blue",
"value": "#2563EB",
"description": "Documented link color in long-form prose.",
"aliases": []
},
{
"id": "ember-warning",
"name": "Ember Warning",
"value": "#F5AB35",
"description": "Marigold warning state.",
"aliases": []
},
{
"id": "ember-error",
"name": "Ember Error",
"value": "#D91E18",
"description": "Deep red error state.",
"aliases": []
},
{
"id": "ink-body",
"name": "Ink Body",
"value": "#374151",
"description": "Body text on Paper canvas — prose-body token.",
"aliases": []
},
{
"id": "ink-heading",
"name": "Ink Heading",
"value": "#111827",
"description": "Heading text on Paper canvas.",
"aliases": []
},
{
"id": "ink-quiet",
"name": "Ink Quiet",
"value": "#6B7280",
"description": "Tertiary text on Paper canvas.",
"aliases": []
},
{
"id": "ink-border",
"name": "Ink Border",
"value": "#E5E7EB",
"description": "Border on Paper canvas.",
"aliases": []
}
],
"modes": {
"light": {
"roles": {
"background": "paper-pure",
"surface": "paper-cream",
"surface-elevated": "paper-pure",
"text-primary": "ink-heading",
"text-secondary": "ink-body",
"text-tertiary": "ink-quiet",
"primary": "void",
"primary-hover": "ash-300",
"accent": "link-blue",
"accent-hover": "link-blue",
"warning": "ember-warning",
"warning-hover": "pulse",
"error": "ember-error",
"success": "spark",
"border": "ink-border"
}
},
"dark": {
"roles": {
"background": "void",
"surface": "ash-100",
"surface-elevated": "ash-300",
"text-primary": "paper-pure",
"text-secondary": "ash-900",
"text-tertiary": "ash-700",
"primary": "paper-pure",
"primary-hover": "ash-600",
"accent": "spark",
"accent-hover": "spark",
"warning": "ember-warning",
"warning-hover": "pulse",
"error": "ember-error",
"success": "spark",
"border": "ash-200"
}
}
}
},
"fonts": [
{
"role": "heading",
"ref": "geist@1.0.0",
"family": "Geist",
"classification": "sans-serif",
"source": {
"kind": "external",
"family": "Geist",
"cssImportUrl": "https://cdn.jsdelivr.net/npm/@fontsource-variable/geist/index.css",
"notes": "Vercel's first-party distribution is the `geist` npm package (next/font compatible). The cssImportUrl above points at the community @fontsource-variable/geist bundle on jsDelivr for drop-in consumption.\n"
},
"fallbackStack": [
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Helvetica",
"Arial",
"sans-serif"
],
"availableStyles": [
{
"weight": 100,
"style": "normal"
},
{
"weight": 200,
"style": "normal"
},
{
"weight": 300,
"style": "normal"
},
{
"weight": 400,
"style": "normal"
},
{
"weight": 500,
"style": "normal"
},
{
"weight": 600,
"style": "normal"
},
{
"weight": 700,
"style": "normal"
},
{
"weight": 800,
"style": "normal"
},
{
"weight": 900,
"style": "normal"
}
]
},
{
"role": "body",
"ref": "geist@1.0.0",
"family": "Geist",
"classification": "sans-serif",
"source": {
"kind": "external",
"family": "Geist",
"cssImportUrl": "https://cdn.jsdelivr.net/npm/@fontsource-variable/geist/index.css",
"notes": "Vercel's first-party distribution is the `geist` npm package (next/font compatible). The cssImportUrl above points at the community @fontsource-variable/geist bundle on jsDelivr for drop-in consumption.\n"
},
"fallbackStack": [
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Helvetica",
"Arial",
"sans-serif"
],
"availableStyles": [
{
"weight": 100,
"style": "normal"
},
{
"weight": 200,
"style": "normal"
},
{
"weight": 300,
"style": "normal"
},
{
"weight": 400,
"style": "normal"
},
{
"weight": 500,
"style": "normal"
},
{
"weight": 600,
"style": "normal"
},
{
"weight": 700,
"style": "normal"
},
{
"weight": 800,
"style": "normal"
},
{
"weight": 900,
"style": "normal"
}
]
},
{
"role": "mono",
"ref": "geist-mono@1.0.0",
"family": "Geist Mono",
"classification": "monospace",
"source": {
"kind": "external",
"family": "Geist Mono",
"cssImportUrl": "https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono/index.css",
"notes": "First-party distribution: `geist` npm package, import path `geist/font/mono`. The cssImportUrl above points at the community @fontsource-variable/geist-mono bundle on jsDelivr for raw CSS consumption.\n"
},
"fallbackStack": [
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
"Liberation Mono",
"Courier New",
"monospace"
],
"availableStyles": [
{
"weight": 100,
"style": "normal"
},
{
"weight": 200,
"style": "normal"
},
{
"weight": 300,
"style": "normal"
},
{
"weight": 400,
"style": "normal"
},
{
"weight": 500,
"style": "normal"
},
{
"weight": 600,
"style": "normal"
},
{
"weight": 700,
"style": "normal"
},
{
"weight": 800,
"style": "normal"
},
{
"weight": 900,
"style": "normal"
}
]
}
],
"roles": {
"colors": {
"identity": "void",
"on-identity": "paper-pure",
"primary": "paper-pure",
"primary-hover": "ash-600",
"accent": "spark",
"accent-hover": "spark",
"mark": "paper-pure",
"success": "spark",
"warning": "ember-warning",
"error": "ember-error",
"text-primary-light": "ink-heading",
"text-primary-dark": "paper-pure",
"background-light": "paper-pure",
"background-dark": "void",
"surface-light": "paper-cream",
"surface-dark": "ash-100",
"text-secondary-light": "ink-body",
"text-tertiary-light": "ink-quiet",
"border-light": "ink-border",
"border-dark": "ash-200"
},
"typography": {
"display": "heading",
"prose": "body",
"code": "mono"
}
},
"assets": [],
"rules": [
{
"type": "contrastRatio",
"target": "text-primary",
"severity": "error",
"rationale": "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.\n",
"against": "background",
"minRatio": 7,
"standard": "WCAG-AAA"
},
{
"type": "colorChoice",
"target": "roles.colors.primary",
"severity": "error",
"rationale": "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.\n",
"allowed": [
"paper-pure",
"void"
],
"forbidden": [
"spark",
"pulse",
"link-blue",
"ember-warning",
"ember-error"
]
},
{
"type": "colorChoice",
"target": "roles.colors.identity",
"severity": "error",
"rationale": "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.\n",
"allowed": [
"void",
"void-pure",
"void-deep"
],
"forbidden": [
"paper-pure",
"spark",
"pulse",
"link-blue"
]
},
{
"type": "forbiddenTreatment",
"target": "logo",
"severity": "error",
"rationale": "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.\n",
"treatments": [
"stretched",
"rotated",
"recolored",
"drop-shadow",
"gradient-fill",
"outlined",
"on-busy-photo"
]
},
{
"type": "enumMembership",
"target": "typography.heading.fontWeight",
"severity": "warning",
"rationale": "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.\n",
"allowed": [
"400",
"500",
"600",
"700"
]
},
{
"type": "fontPairing",
"target": "typography.heading",
"severity": "error",
"rationale": "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.\n",
"requires": "body",
"minSizeRatio": 1.5
},
{
"type": "contextRestriction",
"target": "roles.colors.accent",
"severity": "error",
"rationale": "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.\n",
"allowedContexts": [
"link",
"focus-ring",
"active-state",
"live-data",
"data-viz-primary"
],
"forbiddenContexts": [
"large-fill",
"background",
"hero"
]
},
{
"type": "compositionConstraint",
"target": "roles.colors.identity",
"severity": "error",
"rationale": "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.\n",
"pairsWith": [
"paper-pure",
"paper-warm",
"ash-100",
"ash-200"
],
"doesNotPairWith": [
"spark",
"pulse",
"link-blue",
"ember-error"
]
},
{
"type": "accessibilityRequirement",
"target": "*",
"severity": "warning",
"rationale": "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).\n",
"standard": "WCAG-AAA",
"criterion": "1.4.6"
}
]
}