Usage
Import color tokens directly via URL. All assets are served with CORS headers for cross-origin use.
Color Tokens
/* All palettes */
@import url("");
/* Individual palette */
@import url("");
@import url("");
@import url("");Token Usage
/* By name */
color: var(--software-lagoon);
/* By role — same color */
color: var(--software-vivid);Color Palettes
Each brand has a dedicated palette built on a single OKLCH hue with six perceptually uniform lightness steps.
Mood: cool · calm · technical
Character: factual · structured · dependable
| Name | Token | Alias | OKLCH | |
|---|---|---|---|---|
| Space | --software-space | --software-night | oklch(0.15 0.02 218) | |
| Midnight | --software-midnight | --software-dark | oklch(0.25 0.05 218) | |
| Teal | --software-teal | --software-base | oklch(0.4 0.08 218) | |
| Lagoon | --software-lagoon | --software-vivid | oklch(0.5 0.11 218) | |
| Signal | --software-signal | --software-bright | oklch(0.7 0.11 218) | |
| Frost | --software-frost | --software-paper | oklch(0.95 0.01 218) |
Mood: refined · restrained · institutional
Character: clear · enduring · trustworthy
| Name | Token | Alias | OKLCH | |
|---|---|---|---|---|
| Pitch | --holding-pitch | --holding-night | oklch(0.15 0.03 78) | |
| Walnut | --holding-walnut | --holding-dark | oklch(0.25 0.04 78) | |
| Brass | --holding-brass | --holding-base | oklch(0.4 0.07 78) | |
| Amber | --holding-amber | --holding-vivid | oklch(0.5 0.1 78) | |
| Gild | --holding-gild | --holding-bright | oklch(0.7 0.1 78) | |
| Sand | --holding-sand | --holding-paper | oklch(0.95 0.01 78) |
Mood: warm · confident · reflective
Character: personal · advisory · opinionated
| Name | Token | Alias | OKLCH | |
|---|---|---|---|---|
| Plum | --consulting-plum | --consulting-night | oklch(0.15 0.05 2) | |
| Mulberry | --consulting-mulberry | --consulting-dark | oklch(0.25 0.1 2) | |
| Burgundy | --consulting-burgundy | --consulting-base | oklch(0.4 0.17 2) | |
| Ruby | --consulting-ruby | --consulting-vivid | oklch(0.5 0.2 2) | |
| Ember | --consulting-ember | --consulting-bright | oklch(0.7 0.2 2) | |
| Linen | --consulting-linen | --consulting-paper | oklch(0.95 0.01 2) |
Each palette provides two ways to reference colors:
By name — the unique color name, e.g.
By role — a semantic alias consistent across all palettes, e.g.
By name — the unique color name, e.g.
var(--software-lagoon)By role — a semantic alias consistent across all palettes, e.g.
var(--software-vivid)
night- 0.15 — Near-black, deepest tone
dark- 0.25 — Dark backgrounds, heavy text
base- 0.40 — Primary brand color
vivid- 0.50 — Strongest chroma, accents
bright- 0.70 — Lighter accent, highlights
paper- 0.95 — Near-white, backgrounds
Logos & Icons
Dark-background icon variants are being redesigned and are not currently published.
Software
Holding
Consulting
