Reference
Helian · Design System
Live styleguide — every value below comes from DESIGN.md viatokens.css. No hardcoded values on this page.
Colors
Series identifiers — only as fills, never as text
Typography
H1 — Every piece of Helian is a translation of a culture.
H2 — Five collections, five cultures
H3 — South of France · Cloud Pant
H4 — Cindy's field notes
Body Large 18px — She spent an afternoon in a rice field near Arles.
Body 16px — Indigo is fermented, dipped, dried and buried in mud to fix the colour.
Body Small 14px · minimum on mobile
Label 14px · MOQ / LEAD TIME
MONO 14px · HL-SF-01 / 12.4 oz
Buttons
One accent button per viewport. Letterspaced label: press on the badge below.
Forms
Borders use stone (3.38:1, WCAG 1.4.11). Focus switches to ink + 2px ring.
Spacing
4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 px
Radius & Elevation
Depth is a 1px hairline first. Radius above 4px reads as generic retail.
Self-check
- Series colours not used as body text or small icons? (warm sand is 2.08:1 — fills only)
- Terracotta not used below 14px? (screen-size exemption unchanged)
- Form borders =
stone, nothairline? - Mobile type ≥14px, tap targets ≥44×44?
Source: DESIGN.md v1.5 · tokens: tokens.css · verify:npx -p @google/design.md designmd lint DESIGN.md