Level 0 — page canvas, the dominant background field
Color
Surface levels
Level 1 — recessed surface, footer and deep panels
Level 2 — raised card surface and the lifted UI layer
Level 3 — low-emphasis tint for inactive states
Color tokens
Color is rationed. Achromatic whites and silvers carry almost all content, while the chromatic palette is reserved for atmospheric gradients, card surface differentiation, and one signature pill button that morphs from teal-cyan to lavender-pink.
Brand
| Name | Value | Role |
|---|---|---|
| Liquid Abyss | #012624 | Primary canvas — page background, header, hero, and the dominant dark-teal field. Establishes the deep-water atmosphere |
| Liquid Deep | #011d1c | Recessed surface level — footer background and deeper card panels, a half-step darker than the canvas |
| Liquid Kelp | #003734 | Raised card surface and primary button fill — the lifted surface one step above the abyss |
| Lavender Phosphor | #fde9ff | Highlight color for large statistics, counter numbers, and emphasis figures — luminous punctuation on dark surfaces |
| Bioluminescent Gradient | linear-gradient(90deg, rgb(0, 130, 124) 0%, rgb(203, 255, 252) 100%) | Signature button and UI gradient — a linear sweep from teal-cyan into pale aqua |
| Aurora Gradient | linear-gradient(90deg, rgb(203, 255, 252) 0%, rgb(237, 255, 254) 26.25%, rgb(255, 253, 250) 47.57%, rgb(250, 209, 255) 88.96%) | Supporting palette color for small decorative accents when the core palette needs contrast |
Neutrals
| Name | Value | Role |
|---|---|---|
| Slate Deep | #707777 | Subtle surface tint for inactive or low-emphasis backgrounds, between canvas and card |
| Silver Mist | #bbc7c6 | Secondary body text, muted descriptions, and link color in resting state. Carries a faint green undertone |
| Ash | #f2f2f2 | Tertiary text for pull-quotes — a neutral cool-gray when Silver Mist's teal undertone is too colored |
| Liquid Mist | #edfffe | Cool-tinted off-white for emphasized body text and section labels, with a barely-perceptible cyan whisper |
| Platinum | #ffffff | Pure white for headings, nav items, icon strokes, and high-contrast text |
- Text, primary: #ffffff
- Text, body and secondary: #bbc7c6
- Text, emphasis: #edfffe
- Background, canvas: #012624
- Border: #707777
- Accent for statistics and highlights: #fde9ff
- Primary filled action: #003734
Next
Put the next screen on the abyss.
Set the canvas, stack the surfaces, track the labels, and spend the color once. The guidelines are the whole system in two lists.