xAI design.md

Design System Inspired by xAI
1. Visual Theme & Atmosphere
xAI's website is a masterclass in dark-first, monospace-driven brutalist minimalism -- a design system that feels like it was built by engineers who understand that restraint is the ultimate form of sophistication. The entire experience is anchored to an almost-black background (#1f2228) with pure white text (#ffffff), creating a high-contrast, terminal-inspired aesthetic that signals deep technical credibility. There are no gradients, no decorative illustrations, no color accents competing for attention. This is a site that communicates through absence.

The typographic system is split between two carefully chosen typefaces. GeistMono (Vercel's monospace font) handles display-level headlines at an extraordinary 320px with weight 300, and also serves as the button typeface in uppercase with tracked-out letter-spacing (1.4px). universalSans handles all body and secondary heading text with a clean, geometric sans-serif voice. The monospace-as-display-font choice is the defining aesthetic decision -- it positions xAI not as a consumer product but as infrastructure, as something built by people who live in terminals.

The spacing system operates on an 8px base grid with values concentrated at the small end (4px, 8px, 24px, 48px), reflecting a dense, information-focused layout philosophy. Border radius is minimal -- the site barely rounds anything, maintaining sharp, architectural edges. There are no decorative shadows, no gradients, no layered elevation. Depth is communicated purely through contrast and whitespace.

Key Characteristics:

Pure dark theme: #1f2228 background with #ffffff text -- no gray middle ground
GeistMono at extreme display sizes (320px, weight 300) -- monospace as luxury
Uppercase monospace buttons with 1.4px letter-spacing -- technical, commanding
universalSans for body text at 16px/1.5 and headings at 30px/1.2 -- clean contrast
Zero decorative elements: no shadows, no gradients, no colored accents
8px spacing grid with a sparse, deliberate scale
Heroicons SVG icon system -- minimal, functional
Tailwind CSS with arbitrary values -- utility-first engineering approach
2. Color Palette & Roles
Primary
Pure White (#ffffff): The singular text color, link color, and all foreground elements. In xAI's system, white is not a background -- it is the voice.
Dark Background (#1f2228): The canvas. A warm near-black with a subtle blue undertone (not pure black, not neutral gray). This specific hue prevents the harsh eye strain of #000000 while maintaining deep darkness.
Interactive
White Default (#ffffff): Link and interactive element color in default state.