Typography
Rasuke's primary typeface is BDO Grotesk, with Host Grotesk for display / H2, DM Sans for meta text, and Bonheur Royale for script accents. There are no product utility classes such as .ds-1 or .fs-1. Size comes from tokens, applied on semantic or BEM classes in section SCSS.
Families
- Sans:
"BDO Grotesk", "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif—var(--font-family-sans) - Display:
"Host Grotesk", "BDO Grotesk", system-ui, …—var(--font-family-display) - Meta:
"DM Sans", "BDO Grotesk", system-ui, sans-serif—var(--font-family-meta) - Script:
"Bonheur Royale", cursive—var(--font-family-script) - Mono:
ui-monospace, SFMono-Regular, Menlo, monospace
The layout loads Host Grotesk, DM Sans, and Bonheur Royale from Google Fonts in src/layouts/base.njk. BDO Grotesk is licensed and is not shipped — add your local @font-face when available; until then the stack falls back cleanly. To change a family, edit font.family in tokens/tokens.json (and the font <link> in the layout if the source changes), then run npm run tokens.
Weights
400 regular · 500 medium · 600 semibold · 700 bold · 800 extrabold — var(--font-weight-regular) and siblings.
Size scale
| Token | CSS variable | Value | Line height | Notes |
|---|---|---|---|---|
| tiny | --font-size-tiny | 12px | 22px | Meta / labels |
| sm | --font-size-sm | 14px | 24px | |
| md | --font-size-md | 16px | 26px | Body default |
| lg | --font-size-lg | 18px | 26px | |
| xl | --font-size-xl | 20px | 30px | |
| 2xl | --font-size-2xl | 22px | 32px | |
| 3xl | --font-size-3xl | 24px | 34px | |
| h6 | --font-size-h6 | 20px | 28px | |
| h5 | --font-size-h5 | 30px | 36px | Fluid down to xl |
| h4 | --font-size-h4 | 50px | 58px | Fluid down to h5 |
| h3 | --font-size-h3 | 60px | 70px | Fluid down to h4 |
| h2 | --font-size-h2 | 74px | 84px | Fluid down to h3 |
| h1 | --font-size-h1 | 75px | 75px | Fluid down to h3 |
Tracking tokens: --font-tracking-none (0), --font-tracking-tight (−0.05em), --font-tracking-tighter (−0.07em), --font-tracking-display (−0.05em), --font-tracking-wide (0.08em). Individual sections add their own display sizes as layout.* tokens (for example the showcase titles and the preloader wordmark / counter), rather than growing the global ramp.
Usage
.hero-3__title {
font-family: var(--font-family-display);
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
letter-spacing: var(--font-tracking-display);
}