All colours are defined as CSS custom properties in :root inside style.css. Always use the token, never a raw hex value — this keeps future palette changes to one place.
Accent — Teal
The primary brand colour. Teal signals trustworthiness and scientific precision without being clinical.
--accent
#1b8a7f
Links, interactive elements
--accent-dark
#0d5a53
Button fill, hover states, tag text
--accent-darker
#05403c
Deep hover, pressed states
--accent-pale
#c8ebe5
Selection highlight, code background, nav hover
--tag-bg
#d4f0eb
Tag pill fill
Text
--text / --ink
#1a1a18
Primary body text, headings. `--ink` is used for the dark footer background.
--text-muted
#6b6860
Secondary labels, dates, captions, muted tag text
Backgrounds & Surfaces
--bg / --surface
#ffffff
Page background, dropdown panels, nav bar
--card-bg
#f9f8f6
Cards, hero panels, collector items
--dark-highlight
#f0e6d2
Warm highlight, occasional use
(muted tag)
#ece9e2
Background of `.tag-muted` pills — no token, defined inline in CSS
Status & Alerts
Used for the .warning and .danger boxes in documentation content (see Components).
--warning
#e8a020
Medium-severity warning border (`.warning`)
--warning-bg
#fff8ec
Medium-severity warning background
--danger
#c0392b
Severe-warning border (`.danger`)
--danger-bg
#fdecea
Severe-warning background
Borders
--border
#e2e0da
All dividers, card borders, input borders
Shadows
Shadow tokens are used as box-shadow values. No swatch, but each has a distinct role.
| Token |
Value |
Use |
--shadow |
0 1px 4px rgba(0,0,0,0.08) |
Resting card lift |
--shadow-hover |
0 3px 10px rgba(13,90,83,0.2) |
Card on hover — teal-tinted so it matches the palette |
--shadow-dropdown |
0 4px 12px rgba(0,0,0,0.1) |
Floating menus and dropdowns |
