Grok

Add this design system to use its color palette, typography, spacing & other tokens while creating your own designs.

AI assistant. Near-black cosmic canvas, sunset-gradient glow, light sans headlines with mono uppercase chrome.

core colors

typefaces

tokens

Now playing — motion preview

Palette

The system's color tokens.

primary

#050505

on-primary

#FFFFFF

accent-aura

#FF6A3D

on-surface

#050505

on-surface-secondary

#636363

surface

#FCFCFC

surface-input

#F4F4F3

surface-chip

#F1F1F0

hairline

OKLCH(0.1157 0 NONE / 0.06)

Typography

Type tokens — family, size.

font-sansThe quick brown fox jumpsuniversalSans, Inter, Roboto, "Open Sans", Arial, sans-serif

displayThe quick brown fox jumps{typography.font-sans}

bodyThe quick brown fox jumps{typography.font-sans}
16px

promptThe quick brown fox jumps{typography.font-sans}
16px

labelThe quick brown fox jumps{typography.font-sans}
14px

captionThe quick brown fox jumps{typography.font-sans}
13px

Spacing & Shape

Layout spacing tokens.

Token	Value	Preview
base	8px
scale	[4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px]

Border Radius

Corner rounding tokens.

Token	Value	Preview
control	8px
prompt	28px
pill	9999px

design.md

The system as one file your coding agent can read and build from.

design.mdreadable by AI agents

tokens (raw)

name: grok-design
version: alpha
description: >
  A minimal, near-white product canvas (#FCFCFC) with near-black ink (#050505),
  built around a single centered prompt bar. Type is Universal Sans (xAI's
  grotesque) with slightly negative tracking, kept neutral and unfussy. The
  brand is essentially monochrome — black pill "Sign up", white outline pill
  "Sign in", a black voice button — with the one signature flourish being a
  soft warm-orange aura/vignette glowing at the viewport edges. Geometry is
  fully rounded (full pills, large soft prompt bar, 8px controls) and the page
  is flat and spacious — an utterly calm, single-task hero.
colors:
  # Brand / action
  primary: '#050505'          # near-black pill ("Sign up") + ink
  on-primary: '#ffffff'
  accent-aura: '#ff6a3d'      # warm-orange edge glow/vignette (approx)
  # Text
  on-surface: '#050505'
  on-surface-secondary: '#636363'  # muted controls / placeholder
  # Surface
  surface: '#fcfcfc'          # near-white page
  surface-input: '#f4f4f3'    # the large prompt bar fill (approx)
  surface-chip: '#f1f1f0'     # model selector / chips (approx)
  # Hairlines
  hairline: 'oklch(0.1157 0 none / 0.06)'  # ~black @6% — very faint borders
typography:
  font-sans: 'universalSans, Inter, Roboto, "Open Sans", Arial, sans-serif'  # OSS sub: "Inter" / "Geist"
  display:                    # wordmark-class / large headings
    fontFamily: '{typography.font-sans}'
    fontWeight: 500
    letterSpacing: -0.02em
  body:
    fontFamily: '{typography.font-sans}'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.006em   # -0.1px
  prompt:                     # the "What do you want to know?" input
    fontFamily: '{typography.font-sans}'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: -0.006em
  label:                      # buttons / model selector
    fontFamily: '{typography.font-sans}'
    fontSize: 14px
    fontWeight: 500
    letterSpacing: -0.006em
  caption:                    # footer disclaimer
    fontFamily: '{typography.font-sans}'
    fontSize: 13px
    fontWeight: 400
rounded:
  control: 8px                # links / small controls
  prompt: 28px                # the big prompt bar (approx)
  pill: 9999px                # buttons, chips, voice button
spacing:
  base: 8px
  scale: [4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px]
components:
  button-primary:             # "Sign up"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label}'
    rounded: '{rounded.pill}'
    padding: '8px 16px'
  button-secondary:           # "Sign in"
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    borderWidth: 1px
    borderColor: '{colors.hairline}'
    rounded: '{rounded.pill}'
  prompt-bar:                 # the centered hero input
    backgroundColor: '{colors.surface-input}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.prompt}'
    note: 'leading "+" attach, trailing model selector ("Fast"), mic, and a black circular voice button'
  voice-button:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    rounded: '{rounded.pill}'
  chip-model:                 # "Fast ⌄" selector
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.pill}'
motion:
  # Calm; subtle focus/hover transitions and the gently pulsing edge aura. No parallax.
icons:
  style: outline
  stroke: ~1.5px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color-rules: 'Monoline near-black; "+" attach, mic, waveform (voice). The logo is the slashed-circle Grok mark.'

Grok

grok-design — version alpha

Surfaces studied via Playwright (grok.com home): computed styles + screenshots (the page is a JS app and renders the prompt UI after load). High-confidence on type (Universal Sans), the near-white canvas, near-black ink, and the pill buttons; the warm-orange edge aura and input/chip grays are nearest-hex approximations. Note: Grok also ships a dark mode; the captured default is light.

Overview

Grok's canvas is minimal and near-white ({colors.surface} #FCFCFC) with near-black ink ({colors.on-surface} #050505), organized around one centered prompt bar — a single-task, utterly calm hero. Type is Universal Sans (xAI's grotesque, Inter fallback) with slightly negative tracking (-0.1px), kept neutral and unfussy. The brand is essentially monochrome: a black pill "Sign up", a white outline pill "Sign in", and a black circular voice button. The one signature flourish is a soft warm-orange aura/vignette glowing at the viewport edges — the only chroma on an otherwise grayscale page. Geometry is fully rounded (full pills, a large ~28px soft prompt bar, 8px controls) and the page is flat and spacious, with the logo + prompt bar floating in generous whitespace.

Colors

Near-black — {colors.primary} #050505. Ink and the primary "Sign up" pill (white label) + the voice button.
Near-white page — {colors.surface} #FCFCFC. A hair off white; the prompt bar sits on a slightly grayer {colors.surface-input} (~#f4f4f3), and model chips on {colors.surface-chip}.
Muted — {colors.on-surface-secondary} ~#636363. Placeholder text, model-selector label, secondary controls.
Warm-orange aura — {colors.accent-aura} ~#ff6a3d. A soft glow/vignette at the page edges — the single brand color, used atmospherically (not on any component).
Hairlines — {colors.hairline} (~black @6%). Extremely faint borders on the outline pill and dividers; authored in oklch.

Typography

Universal Sans (universalSans, Inter fallback) — the only family. Closest open-source substitute: Inter or Geist. Run neutral with -0.1px tracking; weight 400 body, 500 for labels/headings. There is no decorative display face — the UI is the design.

Token	Size	Weight	Line-height	Tracking	Usage
body	16px	400	24px	-0.1px	Body / main
prompt	16px	400	28px	-0.1px	Prompt input
label	14px	500	—	-0.1px	Buttons / model selector
caption	13px	400	—	normal	Footer disclaimer

Layout

Base 8px. The page is a single centered column: a top bar (Imagine • settings • Sign in • Sign up), then the Grok logo and the prompt bar vertically centered in vast whitespace, with a small footer disclaimer. The prompt bar carries a leading "+" attach, a trailing "Fast" model selector, a mic, and a black voice button. No multi-section marketing scroll — the product is the landing page.

Elevation & Depth

Flat and clean. The prompt bar is a soft-filled rounded surface with no hard shadow; faint ~6% hairlines define edges. The only "depth" is the diffuse warm-orange edge aura giving the white page a subtle glow. No cards, no gradients on content.

Shapes

Fully rounded: full pills ({rounded.pill}) for buttons, chips, and the circular voice button; a large ~28px radius on the prompt bar; 8px for small controls/links. The soft, generous radii reinforce the calm, approachable feel.

Components

Primary button {components.button-primary} — black pill, white label ("Sign up").
Secondary button {components.button-secondary} — white pill with a ~6% hairline ("Sign in").
Prompt bar {components.prompt-bar} — the hero input: soft gray fill, ~28px radius, "+" attach, "Fast" model selector, mic, and a black circular voice button.
Model chip {components.chip-model} — "Fast ⌄" pill selector.

Motion

Calm and minimal: subtle focus/hover transitions on the prompt bar and a gently pulsing warm edge aura. No parallax, no scroll theatrics — stillness is the point.

Iconography

Thin outline monoline icons, near-black: "+" attach, mic, and the waveform voice glyph. The logo is the slashed-circle Grok mark. Sizes 16/20/24px.

Do's and Don'ts

Do keep the page near-white #FCFCFC with near-black ink and lots of whitespace.
Do center a single prompt bar as the hero; keep the UI the design.
Do use Universal Sans with slight negative tracking; no decorative display face.
Do keep buttons monochrome — black pill / white outline pill — and fully rounded.
Do use the warm-orange glow only as an atmospheric edge aura.
Don't put the orange on buttons or text.
Don't add hard shadows or busy sections; restraint is the brand.
Don't square the corners — everything is pill/soft.

Known Gaps

No semantic :root tokens are exposed; input/chip grays and the aura hue are nearest-hex approximations.
A dark mode exists; only the light default was captured.