Dark Mode

Design System Inspired by xAI

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized.

GET STARTED VIEW DOCUMENTATION
01 / Colors

Color Palette

Primary
Dark Background
#1f2228
Page background
Pure White
#ffffff
Text, foreground
Text Opacity Scale
Text Primary
rgba(255,255,255,1)
Headings, labels
Text Secondary
rgba(255,255,255,0.7)
Descriptions
Text Muted
rgba(255,255,255,0.5)
Hover state, placeholders
Text Disabled
rgba(255,255,255,0.3)
Disabled states
Border & Surface
Border Default
rgba(255,255,255,0.1)
Cards, dividers
Border Strong
rgba(255,255,255,0.2)
Active, buttons
Surface Subtle
rgba(255,255,255,0.03)
Card backgrounds
Surface Hover
rgba(255,255,255,0.08)
Hover surfaces
Functional
Focus Ring
rgb(59, 130, 246)
Keyboard focus
02 / Typography

Typography Scale

Display Hero
Display Hero -- 320px (shown at 72px) / GeistMono / 300 / 1.50
Section Heading
Section Heading -- 30px / universalSans / 400 / 1.20
Body text -- xAI is a company working on building artificial intelligence to accelerate human scientific discovery.
Body -- 16px / universalSans / 400 / 1.50
Button Label
Button -- 14px / GeistMono / 400 / uppercase / 1.4px tracking
Label / Caption text for supporting information
Label -- 14px / universalSans / 400 / 1.50
Small meta text, timestamps, footnotes
Small -- 12px / universalSans / 400 / 1.50
MONOSPACE TAG
Tag -- 12px / GeistMono / uppercase / 1px tracking
03 / Buttons

Button Variants

GET STARTED
Primary
LEARN MORE
Ghost / Outlined
Text Link
Text Link
API v2
Mono Tag
04 / Cards

Card Examples

MODEL

Grok

An AI assistant built to be maximally helpful. Grok has real-time knowledge, a conversational style, and handles complex reasoning tasks.

RESEARCH

Understanding AI

Advancing fundamental research in artificial intelligence. Card shown with stronger border for elevated emphasis.

API

Developer Access

Build with Grok through the xAI API. Enterprise-grade performance with straightforward integration.

05 / Forms

Form Elements

Default
Focus (blue ring)
06 / Spacing

Spacing Scale

4
8
24
48

Base unit: 8px. Scale is deliberately sparse -- large jumps create clear hierarchy through whitespace.

07 / Radius

Border Radius

0px
Primary (buttons, cards)
4px
Secondary containers
08 / Elevation

Elevation (No Shadows)

Level 0: Flat
No border, no shadow
Level 1: Surface
Subtle bg (0.03 opacity)
Level 2: Bordered
0.1 opacity border
Level 3: Active
0.2 opacity border
Focus
Blue focus ring

xAI uses no box-shadows. Depth is communicated through border opacity and background opacity only.