Typography
The type system uses Inter as the primary sans-serif. All scale values are expressed in rem for accessibility (they respect the user's browser font size preference).
Font families
| Token | Value | Usage |
|---|---|---|
--mk-font-sans | Inter, system-ui | All product UI text |
--mk-font-mono | JetBrains Mono | Code, tokens, IDs |
--mk-font-serif | Georgia | Long-form editorial (rare) |
Install Inter from Google Fonts or bundle it locally:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />Type scale
Heading Display
Heading Large
Heading Medium
Heading Small
Title
Subtitle
Body — the quick brown fox jumps over the lazy dog.
Body Small — the quick brown fox jumps over the lazy dog.
Caption — metadata, labels, helper text.
Font weights
| Token | Value | Preview |
|---|---|---|
--mk-font-weight-light | 300 | Light text sample |
--mk-font-weight-regular | 400 | Regular text sample |
--mk-font-weight-medium | 500 | Medium text sample |
--mk-font-weight-semibold | 600 | Semibold text sample |
--mk-font-weight-bold | 700 | Bold text sample |
--mk-font-weight-extrabold | 800 | Extrabold text sample |
Line heights
| Token | Value | Usage |
|---|---|---|
--mk-line-height-none | 1 | Single-line UI elements (buttons) |
--mk-line-height-tight | 1.25 | Headlines |
--mk-line-height-snug | 1.375 | Subheadings |
--mk-line-height-normal | 1.5 | Body text |
--mk-line-height-relaxed | 1.625 | Long-form reading |
--mk-line-height-loose | 2 | Spacious list items |