Typography
The system has two fonts with two jobs.font-sans (Hanken Grotesk) is for prose — headings, paragraphs, labels, everything readable. font-mono(Martian Mono) is for machine data — numbers and codes, never prose. Both are tokens (--font-sans / --font-mono).
Sans — prose recipes
Not split per framework: the recipes come from one shared module (@stroeer-labs/design-library/typography). React appliesclassName={typography.h1} and Angular[class]="typography.h1" — the identical string — so parity holds by construction, no React-vs-Angular comparison needed.
The Joke Tax Chronicles
Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne.
The King's Plan
The king thought long and hard, and finally came up with a brilliant plan: he would tax the jokes in the kingdom — even an inline code joke.
"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
The Joke Tax
The king's subjects were not amused. They grumbled and complained:
- 1st level of puns: 5 gold coins
- 2nd level of jokes: 10 gold coins
- 3rd level of one-liners: 20 gold coins
People stopped telling jokes
Are you sure absolutely sure?
Email address
Enter your email address.
Recipe reference
| Variant | Classes |
|---|---|
| typography.h1 | scroll-m-20 text-4xl font-extrabold tracking-tight text-balance |
| typography.h2 | scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 |
| typography.h3 | scroll-m-20 text-2xl font-semibold tracking-tight |
| typography.h4 | scroll-m-20 text-xl font-semibold tracking-tight |
| typography.p | leading-7 [&:not(:first-child)]:mt-6 |
| typography.blockquote | mt-6 border-l-2 pl-6 italic |
| typography.list | my-6 ml-6 list-disc [&>li]:mt-2 |
| typography.inlineCode | relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold |
| typography.lead | text-xl text-muted-foreground |
| typography.large | text-lg font-semibold |
| typography.small | text-sm leading-none font-medium |
| typography.muted | text-sm text-muted-foreground |
Mono — data only
Use font-mono for numeric values that align or are scanned (always with tabular-nums) and for codes / IDs / tokens. Never for body text, headings, labels or buttons.
Numbers · font-mono + tabular-nums
- Net budget
- 12,450.00 €
- VAT (19%)
- 2,365.50 €
- Total
- 14,815.50 €
Codes & IDs · font-mono
- Voucher
PPV-7Q2K-9XAF- Campaign ID
cmp_01HX9ZK3- SAP ID
4500291837
Large promo codes — same mono with letter-spacing:
Do / Don't
14,815.50 €
Aligned price — mono + tabular-nums.
Choose your sites
Mono on prose / headings — use font-sans.