Typography
| Role | Family | Token | Tailwind | Use |
|---|---|---|---|---|
| Display | Oxanium Variable | --sb-font-display |
font-display |
Headings h1 to h4, display text, key hints |
| Sans | Geist Variable | --sb-font-sans |
font-sans |
Body text, controls, h5 |
| Mono | JetBrains Mono Variable | --sb-font-mono |
font-mono |
Code, values, eyebrows, table headers |
All three are open-licensed (OFL) variable fonts shipped as local woff2 files, Latin and Latin Extended subsets, with font-display: swap. They load from @static-bloom/css/fonts.css, which the full CSS bundle, @static-bloom/tailwind and the Starlight plugin import. No request leaves your origin, which in-game pages require.
Specimen
Section titled “Specimen”Signal in the static
Neon tubes and soft ink
Quiet surfaces, loud accents
Readable in every flavor
Panels, cards and HUD frames
Section label in the body face
Mono uppercase eyebrow
Lead text opens a section at 1.25rem with relaxed leading and muted ink.
Body copy is Geist at 1rem with 1.55 line height. It carries strong text,
emphasis and inline code without changing rhythm.
wanted_level 3 · payout 4,500 · 0123456789 != =>
Heading roles
Section titled “Heading roles”Element defaults in @static-bloom/css base styles, mirrored by classes so any tag can take a role:
| Role | Class | Font | Size / line height | Weight | Notes |
|---|---|---|---|---|---|
| Display L | .sb-display-lg |
display | 4.5rem / 0.95 | 750 | tracking −0.02em |
| Display M | .sb-display-md |
display | 3.75rem / 1 | 700 | tracking −0.02em |
| Display S | .sb-display-sm |
display | 3rem / 1.05 | 700 | tracking −0.02em |
| h1 | .sb-h1 |
display | 2.5rem / 1.1 | 650 | tracking −0.01em |
| h2 | .sb-h2 |
display | 2rem / 1.15 | 650 | tracking −0.01em |
| h3 | .sb-h3 |
display | 1.5rem / 1.25 | 600 | tracking −0.01em |
| h4 | .sb-h4 |
display | 1.25rem / 1.3 | 600 | tracking −0.01em |
| h5 | .sb-h5 |
sans | 1.125rem / 1.3 | 600 | |
| h6, eyebrow | .sb-h6, .sb-eyebrow |
mono | 0.75rem / 1.3 | 500 | uppercase, tracking 0.2em, fg-subtle |
| Lead | .sb-lead |
sans | 1.25rem / 1.7 | 400 | fg-muted |
Display headings balance their lines (text-wrap: balance) and paragraphs avoid orphans (text-wrap: pretty). Helpers: .sb-mono (mono with tabular figures and ligatures), .sb-text-muted and .sb-text-subtle. For long-form HTML, wrap it in .sb-prose (.sb-prose-sm, .sb-prose-lg, .sb-prose-wide), which styles lists, quotes, code, tables and rules at a 65ch measure.
| Token | Size | Tailwind |
|---|---|---|
--sb-text-2xs |
0.6875rem | none |
--sb-text-xs |
0.75rem | text-xs |
--sb-text-sm |
0.875rem | text-sm |
--sb-text-base |
1rem | text-base |
--sb-text-lg |
1.125rem | text-lg |
--sb-text-xl |
1.25rem | text-xl |
--sb-text-2xl |
1.5rem | text-2xl |
--sb-text-3xl |
1.875rem | text-3xl |
--sb-text-4xl |
2.25rem | text-4xl |
--sb-text-5xl |
3rem | text-5xl |
--sb-text-6xl |
3.75rem | text-6xl |
--sb-text-7xl |
4.5rem | text-7xl |
The Tailwind theme keeps Tailwind’s own font sizes, which match this scale from xs to 7xl. 2xs exists only as a CSS variable.
| Leading | Value | Tracking | Value |
|---|---|---|---|
--sb-leading-tight |
1.15 | --sb-tracking-tighter |
−0.02em |
--sb-leading-snug |
1.3 | --sb-tracking-tight |
−0.01em |
--sb-leading-normal |
1.55 | --sb-tracking-normal |
0 |
--sb-leading-relaxed |
1.7 | --sb-tracking-wide |
0.04em |
--sb-tracking-wider |
0.08em | ||
--sb-tracking-widest |
0.2em |
In the game
Section titled “In the game”HUD text sits over moving, high-contrast scenes. Keep body text at text-sm (0.875rem) or larger, use the display face only for short labels, and put text on a glass or solid panel rather than straight on the game. HUD patterns shows the panel recipes.