/ Frontier AI · Inspired

# Design System Inspiration of xAI

A near-black canvas, white outline pills, and Universal Sans set at weight 400 with aggressive negative tracking. The pill is the only interactive shape; the eyebrow is the only ornament; the system reads as an engineering log, not a marketing site.

Read tokens View components

/ 01 · Color

## Color palette

The brand is dark-canvas only. White is the primary "color" — used as outline, fill, and ink. A muted accent palette of sunset / dusk / twilight / breeze lives in tokens but appears rarely on the marketing surface, reserved for product illustrations.

### Brand & Accent

White (primary)#FFFFFFOutline borders, button-primary fill, all display text.
Sunset Orange#FF7A17Warm accent inside product illustrations.
Sunset Soft#FFC285Lighter sunset variant.
Dusk Purple#7C3AEDDeep purple — illustrative accent.
Twilight#C4B5FDSoft violet — illustrative accent.
Breeze Blue#A0C3ECSoft blue — illustrative accent.
Midnight#0D1726Deep blue-black for illustration backgrounds.

### Surface

Canvas#0A0A0ADefault near-black page surface — the brand's only ground.
Canvas Soft#1A1C20Slightly lighter — hovered nav items and tooltips.
Canvas Card#191919Charcoal fill inside product-feature cards.
Canvas Mid#363A3FMid-dark for nested surfaces and code mockups.
Hairline#2123271 px solid divider on dark surfaces.

### Text

Ink#FFFFFFDefault text on canvas.
Ink Hover#FAFAF7Slightly off-white hover variant.
Body#DADBDFSecondary body — supporting copy.
Body Mid / Mute#7D8187Captions and fine print.

/ 02 · Typography

## Type hierarchy

Universal Sans (Inter substitute) at weight 400 carries every display, body, and button. Geist Mono uppercase with positive tracking (1.4 px) carries every eyebrow, label, and metric counter. Negative tracking at display sizes is the brand's visual signature.

display-xl96 / 96 · -2.4
Frontier AI
display-lg72 / 72 · -1.8
Sub-hero scale
display-md48 / 48 · -1.2
Section headline
display-sm32 / 36 · -0.6
Card-cluster heading
display-xs20 / 28 · 0
Inline display
body-lg18 / 28 · 0
Lead paragraph copy sets the tone for sections: short, declarative, restrained.
body-md16 / 24 · 0
Default body. Operating instructions and supporting marketing copy.
caption-mono14 / 20 · 1.4
/ section eyebrow
caption-mono-sm12 / 16 · 1.2
/ small mono label
button-md14 / 20 · 0
Read announcement
body-sm14 / 20 · 0
Secondary body — fine print, table cells, supplementary captions.

/ 03 · Buttons

## Button variants

Every interactive element is a 9999 px pill with a 1 px translucent-white border. The shape never varies. The brand uses white-filled pills only on one Sign Up CTA; every other call-to-action is the canonical outline-on-dark pill.

/ button-primary
Rare white-filled pill. Used on a single Sign Up CTA. White background, near-black ink.
/ button-outline-on-dark
Canonical outline pill. Translucent-white 1 px border, transparent fill, white label. Every non-primary CTA.
/ button-outline-sm
Tighter padding variant for card-cluster CTAs. Same chrome.

/ 04 · Cards

## Cards & containers

Cards are tight 8 px rectangles in canvas-card (#191919) with a 1 px hairline border. No shadow. No gradient. The brand uses hairline elevation only.

/ 0.1 · card-content

#### Default content card

Charcoal fill, 1 px hairline border, 24 px interior padding. Default chrome for any content block on dark canvas.

Read
/ 0.2 · card-feature-product

#### Grok · Voice mode

Same chrome as card-content. Hosts an SVG illustration plus headline, body, and a single outline pill CTA at the foot.

Custom Voices
/ 0.3 · card-feature-product

#### xAI API

Same chrome and the same translucent-white outline pill. The repetition IS the system — the pill carries every CTA across the site.

Read the docs

/ 05 · Forms

## Form elements

Text inputs sit on the lighter canvas-soft (#1A1C20) with a 1 px hairline border, 8 px radius, and white ink. The same body-md type-stack carries the value as carries any paragraph.

/ Work email
/ Org name
/ Prompt

/ 06 · Spacing

## Spacing scale

A 4 px base unit ladders the entire system. Hero / content bands sit on 64 px section padding at desktop; cards interior pad at 24 px.

xxs2 px
xs4 px
sm8 px
md12 px
lg16 px
xl24 px
2xl32 px
3xl48 px
4xl64 px

/ 07 · Border radius

## Border radius scale

Two effective radii do all the work: 8 px for any card chrome and 9999 px for every interactive element. Full-bleed bands carry zero radius.

none0 px
sm8 px
pill9999 px
full9999 px

/ 08 · Elevation

## Elevation & depth

The brand uses no shadows. Two levels — flat and hairline — carry every depth cue. Cards, buttons, and inputs all stop at the 1 px hairline border.

/ Level 0 · Flat No shadow, no border. Default surface for any band that sits directly on canvas.
/ Level 1 · Hairline 1 px solid #212327 border. Carries card chrome, button outlines, divider rules.

/ 09 · Signature

## Signature components

The hero band, content band, monospace eyebrow, hairline divider, sticky nav, and footer encode the brand's full surface vocabulary. Every page reduces to a stack of these blocks.

/ hero-band

### Building beneficial AI

96 px Universal Sans weight 400 with -2.4 px tracking on a near-black canvas. The negative tracking is the voice.

/ content-band

### Section headline

Standard 48 px display-md preceded by a Geist Mono uppercase eyebrow. Padding 64 px vertical on desktop.

/ eyebrow-mono

Geist Mono uppercase tracked 1.4 px. The brand's signature label — reads like a code comment.

/ divider-hairline

1 px solid #212327. Carries every section boundary on dark.

/ 10 · Responsive

## Responsive behavior

Two breakpoints carry the system: a tablet reflow at 1024 px and a mobile reflow at 720 px. Hero scales 96 → 48 px; grids collapse 2-up → 1-up; nav inline links collapse into a hamburger.

Breakpoint | Width | Key changes
--- | --- | ---
Mobile | < 768 px | Hero scales 96 → 48 px; grids 1-up; hamburger nav; type-row stacks.
Tablet | 768 – 1023 px | Hero 72 px; section padding 72 / 32; nav center hides.
Desktop | ≥ 1024 px | Full 96 px hero, 2-up product card grid, 64 / 48 section padding.

## Pricing Tiers

Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.

/0.1 · Starter
$9/month

For individuals getting started.

- Core features
- Up to 3 projects
- Community support

/0.2 · Pro Most popular
$29/month

For teams ready to ship.

- Everything in Starter
- Unlimited projects
- Email support
- Advanced analytics

/0.3 · Team
$99/month

For organizations operating at scale.

- Everything in Pro
- SSO + audit log
- Priority support
- SLA & onboarding