Colors
Every ramp, every brand
Each brand’s 7 ramps of 12 steps, light and dark, generated by the theme engine from its brand file. Click a swatch to copy it.
Hover or focus a swatch to inspect it; click or press Enter to copy. marks a step a semantic role uses, and copying it as a CSS variable gives you that role. How ramps map to roles
Neobank · English, left to right
Vela
Primary: #3d45d6Accent: #12b5a6Neutral: cool neutralsShape: sharpType: Inter Tight / InterDensity: compact
Light
7 ramps × 12 steps
Dark
7 ramps × 12 steps
Insurance · English, left to right
Harbor
Primary: #1d6b63Accent: #e07a3fNeutral: warm neutralsShape: softType: Source Serif 4 / Source Sans 3Density: comfortable
Light
7 ramps × 12 steps
Dark
7 ramps × 12 steps
Arabic, right to left
Qamar
Primary: #f2a516Accent: #7a2e8eNeutral: warm neutralsShape: roundType: Readex Pro / IBM Plex Sans ArabicDensity: comfortable
Light
7 ramps × 12 steps
Dark
7 ramps × 12 steps
Family health benefits · English, left to right
Care
Primary: #0e63ffAccent: #f27f00Neutral: neutral neutralsShape: softType: Plus Jakarta SansDensity: comfortable
Light
7 ramps × 12 steps
Dark
7 ramps × 12 steps
रीसेलर कॉमर्स · Hindi, left to right
Haat
Primary: #b5179eAccent: #f48c06Neutral: warm neutralsShape: softType: MuktaDensity: comfortable
Light
7 ramps × 12 steps
Dark
7 ramps × 12 steps
This site’s own brand, monochrome on purpose
House
Primary: #18181bAccent: accent = primaryNeutral: neutral neutralsShape: softType: Geist / GeistDensity: comfortable
Light
7 ramps × 12 steps
Dark
7 ramps × 12 steps