Eyebrows
Uppercase lead-in labels for sections and heroes. Section Eyebrow is the base pattern with color variants.
| Style name | Font | Size & line | Weight | Color | Use cases | Live pages |
|---|---|---|---|---|---|---|
Hero Eyebrow | Lexend Deca, variable | 12px uppercase, 0.24em tracking with border | Regular | Muted on bordered pill | Encapsulated badge pill for major section introductions. The only bordered eyebrow style. | |
Section Eyebrow (Muted) | Lexend Deca, variable | 12px uppercase, 0.24em tracking | Regular | Muted foreground | Default section labels with muted foreground color. | |
Section Eyebrow (Primary) | Lexend Deca, variable | 12px uppercase, 0.24em tracking | Regular | Primary accent | Section labels with primary accent color for emphasis. | |
Section Eyebrow (Dynamic) | Lexend Deca, variable | 12px uppercase, 0.24em tracking | Regular | Accent-driven tint | Section labels with context-driven colors (e.g., stage indicators). | |
Scroll prompt | Lexend Deca, variable | 11px uppercase, 0.24em tracking | Medium | Muted foreground | Helper text under the home hero CTAs. | |
News back link (arrow) | Lexend Deca, variable | 14px medium inline text with left arrow hover slide | Medium | Primary accent | Article back-to-news links styled like the robotics report CTA, with matching hover motion. |