Typography
Space Grotesk for the interface, IBM Plex Mono for code and DM Sans 900 for game moments, with semantic roles.
Variable Space Grotesk 300–700: headings 500–600, labels 500 and reading 400. IBM Plex Mono 600 for code and metadata. DM Sans 900 only for rewards and game titles.
Current state
Decisions that already exist and can be observed in the product.
Font files and their OFL licenses are served from /fonts; no Google Fonts request.
Headings use clamp with rem bounds. Inputs use 1rem and paragraphs a 1.75 line height.
Every weight ships as a real file; nothing is synthesized. The registry distributes font stacks and roles; consumers copy the font files and declare @font-face.
Interface font · Space Grotesk · 300–700
Build with character.
Clear hierarchy, strong contrast, and comfortable reading for real product interfaces.
bl-type-displayBuild with character. Learn by making.
clamp(2.5rem, 1.5rem + 4vw, 4.5rem) · 500 · 1.1 · -0.04em
bl-type-page-titleBuild with character. Learn by making.
clamp(2rem, 1.5rem + 2vw, 3rem) · 600 · 1.15 · -0.03em
bl-type-section-titleBuild with character. Learn by making.
clamp(1.25rem, 1rem + 1vw, 1.5rem) · 500 · 1.25 · -0.02em
bl-type-card-titleBuild with character. Learn by making.
1.125rem · 500 · 1.3 · -0.01em
bl-type-bodyBuild with character. Learn by making.
1rem · 400 · 1.75 · 0em
bl-type-smallBuild with character. Learn by making.
0.875rem · 400 · 1.7 · 0em
bl-type-labelBuild with character. Learn by making.
1rem · 500 · 1.5 · 0em
bl-type-label-smallBuild with character. Learn by making.
0.875rem · 500 · 1.5 · 0em
bl-type-label-largeBuild with character. Learn by making.
1.125rem · 500 · 1.5 · 0em
bl-type-inputBuild with character. Learn by making.
1rem · 400 · 1.5 · 0em
bl-type-codeBuild with character. Learn by making.
0.875rem · 600 · 1.7 · 0em
bl-type-eyebrowBuild with character. Learn by making.
0.75rem · 600 · 1.5 · 0.1em
bl-type-game-titleBuild with character. Learn by making.
clamp(2rem, 1.25rem + 2.5vw, 3.5rem) · 900 · 1.1 · -0.02em
bl-type-game-numberBuild with character. Learn by making.
1rem · 900 · 1.2 · 0em
Technical font · IBM Plex Mono
npx shadcn@latest add https://brutallab.facilito.dev/r/brutallab-typography.jsonCurrent tokens
Values present today; documenting them does not make every value final.
| Token | Value | Current use |
|---|---|---|
| bl-type-display | clamp(2.5rem, 1.5rem + 4vw, 4.5rem) / 500 / 1.1 | Space Grotesk |
| bl-type-page-title | clamp(2rem, 1.5rem + 2vw, 3rem) / 600 / 1.15 | Space Grotesk |
| bl-type-section-title | clamp(1.25rem, 1rem + 1vw, 1.5rem) / 500 / 1.25 | Space Grotesk |
| bl-type-card-title | 1.125rem / 500 / 1.3 | Space Grotesk |
| bl-type-body | 1rem / 400 / 1.75 | Space Grotesk |
| bl-type-small | 0.875rem / 400 / 1.7 | Space Grotesk |
| bl-type-label | 1rem / 500 / 1.5 | Space Grotesk |
| bl-type-label-small | 0.875rem / 500 / 1.5 | Space Grotesk |
| bl-type-label-large | 1.125rem / 500 / 1.5 | Space Grotesk |
| bl-type-input | 1rem / 400 / 1.5 | Space Grotesk |
| bl-type-code | 0.875rem / 600 / 1.7 | IBM Plex Mono |
| bl-type-eyebrow | 0.75rem / 600 / 1.5 | IBM Plex Mono |
| bl-type-game-title | clamp(2rem, 1.25rem + 2.5vw, 3.5rem) / 900 / 1.1 | DM Sans |
| bl-type-game-number | 1rem / 900 / 1.2 | DM Sans |
What is missing
Gaps that prevent this foundation from being a stable rule.
Some inherited components retain direct typography utilities.
Next decisions
Recommended order for turning findings into a stable foundation.
- 01
Use semantic roles and preserve h1/h2/h3 hierarchy. Check long translations and zoom before publishing.