Foundation demo // Type specification
Measurements, weights and hierarchy in one contract.
The type specification defines every metric so product and engineering share a single typographic contract—no ad-hoc pixels, no tribal knowledge.
Token-locked
WCAG AA
Fluid
Act I // Metrics
Line-height, tracking and optical size locked to tokens.
Every typographic measurement lives in a CSS custom property. Changing one token reflows the entire hierarchy without scattering pixel overrides across components.
Act II // Accessibility
Minimum sizes and contrast pairs baked into the color system.
Body text never drops below 16px. Kickers and small print floor at 12px. Every text token is paired with a surface token that guarantees WCAG AA contrast.
Body ≥ 16px
Small ≥ 12px
AA 4.5:1
contrast pairing
--vl-text-primary on --vl-bg-main → 12.4:1
--vl-text-muted on --vl-bg-surface → 7.2:1
--vl-text-accent on --vl-bg-main → 5.8:1
Rule
Never rely on color alone.
Underlines, icons or weight changes reinforce meaning for all users.
Act III // Implementation
Apply via utility classes and CSS variables—not ad-hoc pixels.
Use vl-display-xl, vl-title-lg or vl-body-lg
classes to assign roles. Override at the token level for theming, never at the component level.
Act IV // Applied specification
Metrics, accessibility and utility classes: one typographic contract.
Lock every measurement to a token, pair text and surface colors for contrast, then apply roles via utility classes instead of ad-hoc pixel values.