Typography
Font stacks, type scale, and text treatments following the neo-brutalist + 8-bit CRT aesthetic.
Font Stacks
Bricolage Grotesque
Primary heading font. Bold, technical, slightly condensed. Used for h1-h6, section titles, and hero text.
font-family: 'Bricolage Grotesque', sans-serif;
weights: 400, 600, 700, 800JetBrains Mono
Monospace body font. Technical, precise, terminal-like. Used for body text, specs, code, navigation.
font-family: 'JetBrains Mono', monospace;
weights: 400, 500, 600Type Scale
| Element | Font | Size | Weight | Line Height | Usage |
|---|---|---|---|---|---|
| h1 | Bricolage | clamp(2.2rem, 5vw, 3.5rem) | 700 | 1.15 | Page titles |
| h2 | Bricolage | clamp(1.6rem, 3.5vw, 2.4rem) | 700 | 1.15 | Section titles |
| h3 | Bricolage | clamp(1.1rem, 2vw, 1.5rem) | 700 | 1.15 | Card titles, subsections |
| body | JetBrains Mono | 0.9rem | 400 | 1.6 | Body text |
| small | JetBrains Mono | 0.7rem | 500 | 1.5 | Metadata, nav, specs |
| code | JetBrains Mono | 0.75rem | 400 | 1.6 | Inline code |
Chromatic Aberration
All headings have a subtle RGB fringe effect (CRT phosphor bleed):
h1, h2, h3, h4, h5, h6 {
text-shadow:
0.5px 0 0 rgba(255, 0, 0, 0.06),
-0.5px 0 0 rgba(0, 100, 255, 0.05);
}Dark mode increases opacity slightly: red 0.08, blue 0.07.
Section Labels
Section markers use a simple dot + number pattern in accent orange:
● 01 ● 02 ● 03
.section-code {
font-family: var(--font-mono);
font-size: 0.65rem; font-weight: 500;
color: var(--accent-orange);
letter-spacing: 0.04em;
}