Design system

The Zaap-inspired primitives.

Tokens, components, and layout patterns. 4-palette theme system (Run 5) is at the top — the active palette is highlighted; flip themes via the switcher in the header to see each one in context.

Theme palettes

Four palettes, one switcher.

Pick a palette via the swatch button in the header (top-right). The choice persists via localStorage and applies sitewide. Hex values shown below mirror src/styles/themes.css verbatim.

Ocean (default)

Cool, professional, blue-dominant — the default palette.

primary #0EA5E9
secondary #06B6D4
tertiary #14B8A6
bg-white #F8FBFE
bg-soft #EFF6FC
text-primary #0C1D3A
text-secondary #3B5068
border #DBE7F2

Violet

The original Zaap-inspired palette — bold and brand-forward.

primary #7C3AED
secondary #EC4899
tertiary #F59E0B
bg-white #FFFFFF
bg-soft #FAFAFF
text-primary #1F1B4D
text-secondary #4C4872
border #EDE9FE

Dark

True dark mode — ocean-tinted: bright sky blues against deep navy backgrounds.

primary #38BDF8
secondary #22D3EE
tertiary #2DD4BF
bg-white #0A1525
bg-soft #0F1F36
text-primary #E0F2FE
text-secondary #93C5FD
border #1E2F4A

Sunset

Warm, approachable, orange-pink-dominant. Suits preschools and warmer brands.

primary #F97316
secondary #E11D48
tertiary #EAB308
bg-white #FFFBF7
bg-soft #FFF4EB
text-primary #3B1D0F
text-secondary #5E3620
border #F3DCC7

Colors

Palette

--color-primary

#0EA5E9

--color-primary-dark

#0369A1

--color-primary-light

#7DD3FC

--color-primary-pale

#F0F9FF

--color-secondary

#06B6D4

--color-secondary-pale

#ECFEFF

--color-tertiary

#14B8A6

--color-tertiary-pale

#F0FDFA

--color-success

#10B981

--color-info

#3B82F6

--color-text-primary

#0C1D3A

--color-text-secondary

#3B5068

--color-text-tertiary

#6B8098

--color-bg-white

#F8FBFE

--color-bg-soft

#EFF6FC

--color-bg-dark

#0C1D3A

--color-border

#DBE7F2

--color-border-strong

#A8C1D8

Typography

Plus Jakarta Sans · weights 400 → 800

H1 · weight 800

Run your institution.

H2 · weight 700

Premium platform without the playbook.

H3 · weight 700

Live data queries

Body · large

For lead paragraphs and section subheads. Comfortable reading at medium distance.

Body · base

The workhorse — default for marketing copy, cards, and most content regions.

Buttons

Variants & sizes

primary

secondary

ghost

gradient

dark

GradientBadge

Pill labels for eyebrows and tags

Primary Pink Amber Soft (subtle) AI-Powered

IconBadge

Soft-tinted icon containers

violet

pink

amber

emerald

info

Cards