Helix theme

Design system.

One token contract. Every color, size and shape on this page is read live from helix.css, if it's not here, it doesn't ship.

Color

Semantic tokens (what sections use). Click any swatch to copy its value.

Gradients (the four approved combinations + light wash)

Type scale

Nunito Sans for everything (Light body, Bold–Black headings, ALL-CAPS eyebrows). Accent callouts are Instrument Serif Italic, short phrases only, never long passages.

Eyebrow · Nunito Bold · all caps · 0.1em tracking

Components

Buttons

Primary large → Primary → Primary small Ghost

Card

Eyebrow

Card title

Cards are white on paper, 8px radius (guide line language), subtle border + light shadow. Hover adds lift only when clickable.

Form

Label

Icons (snippet `hx-icon`, Lucide-derived, stroke 1.8–2.2, currentColor)

bag

chevron-down

arrow-right

check

menu

x

search

Bands & rhythm

Pages color-block: paper → dark/lavender → paper. Sections pad with --hx-section (72–128px fluid). Dark bands may add .hx-atmos glows + .hx-crosshair marks.

.hx-paper (default)

.hx-band--alt

.hx-band--lavender

.hx-band--brand (lavender→plum)

.hx-band--dark