DESIGN SYSTEM & TOKENS

HairDuty living
style guide.

A premium, editorial design system adhering to WCAG 2.2 AA accessibility, minimum 12px text sizes, GPU-only motion, and Core Web Vitals optimization.

1. Color Tokens & Palette (§4A.2)

--forest-900 #193B30 · Footer / Overlays

--forest-700 #244E40 · Brand Primary

--copper-500 #B46C50 · Action / Emphasis

--rose-gold-200 #E7B08B · Soft Highlights

--sage-100 #E9EEE7 · Section Wash

--cream-100 #F8F6F1 · Canvas Paper

Semantic Hair-Type Chips

Straight 1A–1C Wavy 2A–2C Curly 3A–3C Coily 4A–4C Fine Porosity Dense / Coarse

2. Typography & Interactive Elements (§4A.3)

Display Hero: The Hair Edit

Section Heading: Good things for good hair

Body text is set in Instrument Sans at 16px base with 1.6 line height and a 65–75ch comfortable reading measure. Minimum font size anywhere on the platform is 12px for WCAG compliance.

Primary Button Light Button Editorial Text Link →

3. Disclosures & CLS-Safe Ad Slot (§4A.4)

As an Amazon Associate and affiliate partner, HairDuty earns from qualifying purchases. Recommendations are chosen with care. Learn more