Foundations

Typography

Two families, a short type scale and five heading roles.

Two families: Bricolage Grotesque for headings (font-display, applied to h1–h3 automatically) and Inter for everything else. Running text stops at 70 characters a line.

Heading roles

Every heading uses one of these five roles; the tests fail on a heading without one. Sizes are CSS variables, so they grow on wider screens and the theme playground can change them.

text-display

The home headline only

Roll. Call. Refuse.

text-title

Each page’s h1 (PageHeader)

How to play

text-section

h2 between panels; home sections; a game on the Games page; Stat numbers

Each round

text-heading

Panel titles (h2 inside a Panel)

A question from the table

text-subheading

h3 inside a section; note panel titles

Second call

Text sizes

Class	Size	Use it for	Sample
`text-2xs`	10px	Labels on dice groups only (DiceGroup, OutcomeGrid)	Five dice, ten games
`text-xs`	12px	Captions, notes, eyebrows, table details	Five dice, ten games
`text-sm`	14px	Secondary text, controls, most tool UI	Five dice, ten games
`text-base`	16px	Body text	Five dice, ten games
`text-lg`	18px	Lead paragraphs (PageHeader description)	Five dice, ten games
`text-xl`	20px	Emphasis inside a component	Five dice, ten games
`text-2xl`	24px	A call’s name, a figure inside a card	Five dice, ten games

Larger sizes come only from the heading roles. Arbitrary sizes (text-[13px]) fail the tests.

Eyebrow

Meet the ten games

eyebrow is the small uppercase label above or before something: “Next”, “1st call”, a footer group. Add a color class with it.

Weight and emphasis

font-semibold for labels and emphasis; font-medium for controls; font-bold only for figures.
One level of heading per step down: title, section, heading, subheading.
tabular-nums for any figure that changes or lines up in a column.

Don’t

Skip heading levels for size: pick the role, not the level.
Set headings in Inter, or body text in the display face.
Use all caps except through eyebrow.