Typography
Fascinate + Outfit twee-font systeem met semantische type scale
Typography
Roosevelt OPS gebruikt een twee-font systeem: Fascinate voor branding en Outfit voor alle UI-tekst.
Fonts
| Rol | Font | Weights | CSS Variable | Tailwind |
|---|---|---|---|---|
| Logo / Branding | Fascinate | 400 (enige) | --font-logo | font-logo |
| Body / Headings / UI | Outfit | 100–900 (variable) | --font-sans | font-sans |
ℹ
Waarom Fascinate?
Art Deco logotype met hoog contrast. Kleur #5F2104 op wit geeft 12.31:1 — ruim WCAG AAA. Alleen voor branding, nooit voor body tekst.
Type Scale
| Scale | Size | Line Height | Weight | Tailwind | Gebruik |
|---|---|---|---|---|---|
| Caption | 12px | 18px | 400 | text-caption | Metadata, timestamps |
| Body | 14px | 20px | 400 / 500 | text-body | Standaard body tekst |
| Subtitle | 16px | 26px | 500 / 600 | text-subtitle | Subheadings, labels |
| Title | 16px | 26px | 600 | text-title | Card titels, sectie headers |
| Title L | 24px | 32px | 600 | text-title-l | Pagina titels |
| Display | 39px | 1.1 | 600 | text-display | Hero sectie titels |
| Hero | 49px | 1.1 | 700 | text-hero | Landing page hero |
WCAG Contrast
| Combinatie | Ratio | Level |
|---|---|---|
#5F2104 (brand) op wit | 12.31:1 | AAA |
#0A0F1A (label-primary) op wit | 17.4:1 | AAA |
#334155 (label-secondary) op #F8FAFC | ~7:1 | AAA |
#C4854A (brand dark) op #0a0a0a | 4.6:1 | AA |
Code Voorbeelden
Branding
Body tekst
Heading hiërarchie
⚠
Fascinate beperkingen
Fascinate heeft slechts één weight (400) en is bedoeld voor korte, grote tekst. Gebruik het nooit voor body tekst of kleine formaten.