Design System: 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