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

API Key Name
Default
Endpoint URL
Focus (blue ring)
System Prompt

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.