Primary · Dark navy
Primary text, headings, and dark surfaces. The base is --color-ink-900; every lighter stop is a neutral that carries secondary text, labels, borders, and surfaces.
Base
Color
Convert's color system, the brand palette, the full ink neutral scale, and the tints and surfaces that hold it all together. Click any swatch to copy its hex value.
Secondary · Violet
The brand accent: links, eyebrows, icons. The base is --color-violet-700. The 600 / 800 / 900 stops build the statistic gradient; 50 / 100 / 200 are tint surfaces.
Base
Accent · Blue
Primary actions only (CTAs). The base is --color-blue-600 with --color-blue-700 as the hover state; 50 / 100 / 200 are tints.
Base
Surface · Cream
Default card and panel surface. The base sits under a hover state and a warm stroke for cards and mockups.
Base
Supporting palette
Status and accent only, used sparingly. Green signals compliance, privacy, and success; orange carries avatars and attention.
Green
Orange
Usage
Semantic aliases map intent to a palette value. Reference the alias in code, never the raw hex.
| Alias | Value & use |
|---|---|
--color-action-primary |
blue-600, primary CTAs |
--color-action-hover |
blue-700, CTA hover |
--color-link |
violet-600, text links |
--color-text-primary |
ink-900, headings, body |
--color-text-secondary |
ink-700, descriptions |
--color-text-muted |
ink-600, uppercase labels |
--color-border |
ink-400, default card border |
--color-bg-subtle |
ink-300, section borders, tab backgrounds |
Note: Convert's design system is actively evolving. These values are current as of the latest update; confirm before using them in permanent or printed materials.