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)

#f2fbff

100

#def3ff

200

#a4ddff

300

#69c8ff

400

#2eb2ff

500

#0099f2

600

#0074b7

700

#005b90

800

#003655

900

#001d2e

950

#000407

Magenta

zmoki-magenta

Brand signature — favicon, Author panel, highlights

#fff2fb

100

#ffdef6

200

#ffa4e5

300

#ff69d4

400

#ff2ec3

500

#f200ad

600

#b70083

700

#7c0059

800

#41002f

900

#2e0021

950

#070005

Jade

zmoki-jade

Resources & actions — resource links, form buttons

#f3fef6

100

#e0fee8

200

#95fab2

300

#5df889

400

#25f660

500

#0ae949

600

#08c33d

700

#068b2c

800

#034014

900

#022d0e

950

#181b19ff

Flame

zmoki-flame

External — outbound links, Contact panel

#fff6f2

100

#ffe8de

200

#ffbea4

300

#ff9469

400

#ff692e

500

#f24500

600

#de3f00

700

#a42f00

800

#551800

900

#2e0d00

950

#070200

Lemon

zmoki-lemon

Highlight — marker behind headings (404, callouts)

#fff6f2

100

#fffae2

200

#fef4bb

300

#feed95

400

#fde76e

500

#fde047

600

#fdd920

700

#dfbc02

800

#927b02

900

#312901

950

#0a0800

Neutrals

Background

zmoki-bg

#ff692e

Page background

Surface

zmoki-surface

#fff2ed

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)