Verified light theme / 2026

Frontier AI models
for everything
you build.

A high-contrast editorial system where white space, oversized type, black pill actions, and thin gray rules make complex AI products feel direct and legible.

12 color tokens 10 type steps 4px base grid

Color Tokens

The verified interface is light and monochrome. Black carries decisive actions and display text; a short neutral ramp handles hierarchy, boundaries, and alternate technical surfaces.

Primary
#0A0A0A
Filled CTAs and strongest emphasis
Primary Hover
#242424
Hover state for black controls
Ink Soft
#1F1F1F
Dense copy and technical text
Body
#4B4B4B
Supporting paragraphs
Muted
#848484
Navigation, labels, metadata
Hairline Strong
#BFBFBF
Hovered outlines
Hairline
#DBDBDB
Default borders and dividers
Canvas Soft
#F7F7F7
Alternate bands and code panels
Canvas Raised
#FBFBFB
Inset content surface
Canvas
#FFFFFF
Primary page background

Universal, neutral, exact

Universal Sans leads the identity. Inter is the open substitute used here; Geist Mono shifts technical examples into a more operational register.

PrimaryUniversal Sans / InterDisplay, body, navigation, controls
TechnicalGeist Mono / IBM Plex MonoAPI code, labels, data

Type Scale

Display XLFrontier96 / 96 / 400 / -3.2
Display LGEverything72 / 76 / 400 / -2.2
Display MDOne API.48 / 52 / 400 / -1.4
Display SMLatest news32 / 38 / 400 / -0.7
TitleBuild on your own24 / 30 / 500 / -0.3
Body LGReasoning, code, voice, images, and video.18 / 28 / 400 / 0
Body MDA unified API for every modality.16 / 24 / 400 / 0
Body SMProducts, developers, company, and news14 / 20 / 400 / 0
LabelTry for free13 / 16 / 500 / 0
Codemodel: "grok-4.5"13 / 20 / 400 / 0

Spacing & Shapes

A 4px base scale expands quickly into 96px and 128px section intervals. Shape stays restrained: technical panels receive modest rounding while actions use a full pill.

Spacing Scale (4px base)

4xs
8sm
12md
16lg
24xl
322xl
483xl
644xl
965xl
1286xl

Border Radius

none0px
sm8px
md12px
lg / panels16px
xl / frames24px
pill / actions9999px

Depth & Surfaces

The light system separates content with subtle neutral steps and precise hairline boundaries.

Depth Levels

Canvas
Primary page field and dominant white space
Level 0
Raised
Barely shifted inset or editorial surface
Level 1
Soft
Code panels and alternate content bands
Level 2

Surface System

Canvas#FFFFFF
Canvas Raised#FBFBFB
Canvas Soft#F7F7F7

Component Library

Observed patterns combine black-and-white contrast, pill geometry, thin outlines, and technical panels. Every preview includes the intended hierarchy and state behavior.

Primary Action
Main conversion CTA
.btn-primary
#0A0A0A fill, white text, 9999px radius, 11px/22px padding. Hover moves to #242424; active scales to 0.98.
Secondary Action
Outlined supporting CTA
.btn-secondary
White fill, black text, #DEDEDE outline, and matching pill geometry. Hover strengthens the outline and shifts the surface.
Announcement Pill
Compact product-news link
.announcement
Soft white surface, hairline border, 9999px radius, and a compact 12px label. Use once above a major statement.
API Code Panel
Developer example with copy action
.code-panel
TypeScript
const client = new Client({ apiKey });

const response = await client.chat.create({
  model: "grok-4.5",
  input: "Explain quantum computing"
});
#F7F7F7 stage, white inner surface, #DBDBDB outline, 16px radius, and 13px/20px monospace content.
Metric Block
Large numeric proof points
.metric
1M+API calls per day
<200msMedian latency
5+Model families
Large regular-weight values pair with compact muted labels, separated by precise hairline rules.
Editorial News Row
Date, title, and direction
.news-row
Full-width row, hairline separators, and a #F7F7F7 hover surface preserve the editorial rhythm.

Do's & Don'ts

Do - Embrace
  • Keep #FFFFFF as the uninterrupted page field
  • Use #0A0A0A only for text and decisive interaction
  • Give major statements 96-128px of vertical space
  • Separate panels and rows with #DBDBDB rules
  • Keep buttons at 9999px pill radius
  • Use Universal Sans with tight display tracking
  • Reserve Geist Mono for code and technical data
Don't - Avoid
  • Do not turn the page into a near-black theme
  • Do not crowd the centered hero with extra columns
  • Do not make every container a pill
  • Do not use monospace for long reading text
  • Do not replace muted navigation with loud accents