Docs / Design Tokens
Design Tokens
The complete design token reference. True neutral palette, accent colors, spacing scale, typography, shadows, and semantic tokens for dark and light modes.
Accent palette
The accent palette uses true neutral grays for a monochrome, professional aesthetic. All accent values are available as --claw-accent-{50-950} CSS custom properties.
accent-50
#FAFAFA
accent-100
#F5F5F5
accent-200
#E5E5E5
accent-300
#D4D4D4
accent-400
#A3A3A3
accent-500
#EDEDED
accent-600
#D4D4D4
accent-700
#B3B3B3
accent-800
#8F8F8F
accent-900
#6E6E6E
accent-950
#4B4B4B
True neutrals
Substrate uses true neutral grays with no blue or warm tint. The scale runs from pure white (#FFFFFF) to near-black (#0A0A0A) with extra stops at 150 and 850 for fine-grained surface differentiation. Pure black (#000000) is used for the page background.
neutral-0
#FFFFFF
neutral-50
#FAFAFA
neutral-100
#F5F5F5
neutral-150
#EBEBEB
neutral-200
#E5E5E5
neutral-300
#D4D4D4
neutral-400
#A3A3A3
neutral-500
#737373
neutral-600
#525252
neutral-700
#404040
neutral-800
#262626
neutral-850
#1A1A1A
neutral-900
#111111
neutral-950
#0A0A0A
Semantic colors
Status and feedback colors for success, warning, error, and info states. Each semantic color has a muted variant for backgrounds.
Success
#22C55E
Warning
#EAB308
Error
#EF4444
Info
#3B82F6
Typography
Three font families serve distinct purposes across the design system:
Space Grotesk
Headings, navigation, hero text. Geometric sans-serif with distinctive character for brand presence.
Inter
Body text, UI labels, descriptions. Highly legible at small sizes, optimized for screens with tabular figures.
JetBrains Mono
Code blocks, terminal output, technical values. Ligatures supported, clear distinction between similar characters.
Spacing system
Substrate uses a 4px base grid. All spacing values are multiples of 4px for consistent alignment. The system defines two spacing contexts:
Application spacing
Dense, functional layouts
Padding: 8-16px
Body font: 13-14px
Line height: 1.4-1.5
Component gaps: 4-8px
Marketing spacing
Spacious, cinematic layouts
Section gap: 96-128px
Block gap: 64px
Body font: 16-18px
Line height: 1.6-1.8
Border radius
Tight radii for application UI, larger radii for marketing and feature cards:
| Token | Value | Usage |
|---|---|---|
| --radius-sm | 2px | Checkboxes, small inputs |
| --radius-md | 4px | Buttons, inputs, badges |
| --radius-lg | 6px | Cards, panels |
| --radius-xl | 8px | Dialogs, large cards |
| --radius-2xl | 12px | Feature cards, sections |
| --radius-3xl | 16px | Marketing cards |
| --radius-4xl | 24px | Hero elements, pills |
Shadows
Shadow tokens are tuned for dark mode by default, with stronger opacity values to remain visible against dark backgrounds. Light mode variants use subtler values.
| Token | Usage |
|---|---|
| --claw-shadow-sm | Subtle elevation (buttons, small cards) |
| --claw-shadow-base | Default card elevation |
| --claw-shadow-md | Dropdowns, popovers |
| --claw-shadow-lg | Modals, dialogs |
| --claw-shadow-xl | Full-page overlays |
| --claw-shadow-glow | Accent glow (CTA buttons) |
| --claw-shadow-glow-lg | Large accent glow (hero elements) |
Surface tokens
| Variable | Dark | Light | Description |
|---|---|---|---|
| --claw-bg | #000000 | #FFFFFF | Page background |
| --claw-surface-1 | #0A0A0A | #FAFAFA | Primary surface (sidebars, cards) |
| --claw-surface-2 | #111111 | #F5F5F5 | Secondary surface (nested cards, inputs) |
| --claw-surface-3 | #1A1A1A | #EBEBEB | Tertiary surface (hover states, badges) |
| --claw-elevated | #1A1A1A | #FFFFFF | Elevated surfaces (popovers, dropdowns) |
Text tokens
| Variable | Dark | Light | Description |
|---|---|---|---|
| --claw-text | #FAFAFA | #111111 | Primary text |
| --claw-text-secondary | #A3A3A3 | #525252 | Secondary text, descriptions |
| --claw-text-muted | #737373 | #737373 | Muted text, placeholders |
| --claw-text-accent | #FAFAFA | #111111 | Accent text, links |
Border tokens
| Variable | Dark | Light | Description |
|---|---|---|---|
| --claw-border | rgba(255,255,255,0.08) | rgba(0,0,0,0.08) | Default border |
| --claw-border-muted | rgba(255,255,255,0.04) | rgba(0,0,0,0.04) | Subtle dividers |
| --claw-border-strong | rgba(255,255,255,0.14) | rgba(0,0,0,0.14) | Emphasized borders |
| --claw-border-accent | rgba(255,255,255,0.20) | rgba(0,0,0,0.20) | Accent/selected borders |
Interaction tokens
| Variable | Dark | Light | Description |
|---|---|---|---|
| --claw-hover | rgba(255,255,255,0.04) | rgba(0,0,0,0.04) | Hover state overlay |
| --claw-active | rgba(255,255,255,0.06) | rgba(0,0,0,0.08) | Active/pressed state |
| --claw-selected | rgba(255,255,255,0.10) | rgba(0,0,0,0.08) | Selected item background |
| --claw-focus-ring | rgba(255,255,255,0.40) | rgba(0,0,0,0.30) | Focus ring color |