Color
Five accent families and four structural neutrals. Every color on the site comes from a token — no inline hex.
Accents
Azure
zmoki-azure
Primary — links, navigation, hero sections, ink (900)
50
#f2faff
200
#b7e5ff
300
#7ccfff
400
#42b9ff
500 ·base
#0098f2
600
#0080cb
700
#005b90
800
#003655
900
#001d2e
950
#000407
Magenta
zmoki-magenta
Brand signature — favicon, Author panel, highlights
200
#ffd6f3
400
#ff5cc0
500 ·base
#f20098
600
#c10079
700
#8f005a
Jade
zmoki-jade
Resources & actions — resource links, form buttons
500 ·base
#00f25a
600
#00cb4b
Flame
zmoki-flame
External — outbound links, Contact panel
500 ·base
#f24500
Lemon
zmoki-lemon
Highlight — marker behind headings (404, callouts)
500 ·base
#fde047
Neutrals
Background
zmoki-bg
#b7e5ff
Page background
Surface
zmoki-surface
#f2faff
Cards & panels
Ink
zmoki-ink
#001d2e
Primary text
Muted
zmoki-muted
#475569
Meta & secondary text
Supporting greys (borders, dark panels, code blocks) use Tailwind slate-* directly.
Usage
Reference tokens as Tailwind utilities. Reach for the -500 base unless a panel needs more contrast.
- bg-zmoki-azure-500 — hero, primary links, nav
- bg-zmoki-magenta-500 — Author panel, brand accents
- text-zmoki-jade-500 — resource links, action buttons
- bg-zmoki-flame-500 — Contact panel, external links
- bg-zmoki-lemon-500 — heading highlight / marker
- bg-zmoki-surface — cards & panels (text-zmoki-ink / -muted)