Typography
Three faces, each with one job: a serif for display, a sans for everything people read and click, and a mono for code. Each family lists a Chinese face after the Latin one, so mixed text sets in both.
- Display is Noto Serif SC at weight 400 only, with negative tracking that grows with the size. A bold serif is off-brand.
- Body, navigation, buttons and labels are Manrope with Noto Sans SC: 400 for paragraphs, 500 for labels and emphasis.
- Code is Maple Mono.
- Math is Noto Sans Math, falling back to the system’s math font.
Emphasis grows by size, not weight: reach for a bigger serif before a heavier one. The uppercase micro-label is the only type that is not in sentence case.
The fonts load from Google Fonts and jsDelivr without holding up the page; see the overview for the Fonts component.
| Token | Value | Description |
|---|---|---|
--font-displayfont.display | "Noto Serif SC", "Noto Serif CJK SC", Georgia, serif | Display headlines, at weight 400 only. |
--font-sansfont.sans | Manrope, "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif | Body, titles, navigation, buttons and labels. Manrope sets Latin text and Noto Sans SC sets Chinese. |
--font-monofont.mono | "Maple Mono NL NF CN", ui-monospace, SFMono-Regular, monospace | Code, terminal output and technical detail. |
--font-mathfont.math | "Noto Sans Math", "Cambria Math", "STIX Two Math", math | Math formulas. Without Noto Sans Math, the math font that comes with the system: Cambria Math on Windows, STIX Two Math on macOS. An ordinary sans serif cannot stretch brackets or enlarge operators. |
Each style is a class, such as .ds-display-xl, and a set of variables, one per property. On screens narrower than 768px the three largest display sizes step down, with their tracking redrawn for the smaller size, while display-sm stays put. This is a token change, so every class and component follows without a media query of its own.
| Token | Value | Description |
|---|---|---|
--display-xl-sizedisplay-xl.ds-display-xl · --display-xl-family -lh -ls -weight | 4rem / 1.05 · 400 · -1.5pxNarrow 2.75rem / 1.05 · 400 · -1px | The page headline. |
--display-lg-sizedisplay-lg.ds-display-lg · --display-lg-family -lh -ls -weight | 3rem / 1.1 · 400 · -1pxNarrow 2.375rem / 1.1 · 400 · -0.8px | Section headlines. |
--display-md-sizedisplay-md.ds-display-md · --display-md-family -lh -ls -weight | 2.25rem / 1.15 · 400 · -0.5pxNarrow 2rem / 1.15 · 400 · -0.4px | Subsection headlines. |
--display-sm-sizedisplay-sm.ds-display-sm · --display-sm-family -lh -ls -weight | 1.75rem / 1.2 · 400 · -0.3px | Card headlines and prices. |
--title-lg-sizetitle-lg.ds-title-lg · --title-lg-family -lh -ls -weight | 1.375rem / 1.3 · 500 · 0px | Large sans titles. |
--title-md-sizetitle-md.ds-title-md · --title-md-family -lh -ls -weight | 1.125rem / 1.4 · 500 · 0px | Card and list titles. |
--title-sm-sizetitle-sm.ds-title-sm · --title-sm-family -lh -ls -weight | 1rem / 1.4 · 500 · 0px | Small titles and labels. |
--body-md-sizebody-md.ds-body-md · --body-md-family -lh -ls -weight | 1rem / 1.55 · 400 · 0px | Running text. |
--body-sm-sizebody-sm.ds-body-sm · --body-sm-family -lh -ls -weight | 0.875rem / 1.55 · 400 · 0px | Secondary text. |
--caption-sizecaption.ds-caption · --caption-family -lh -ls -weight | 0.8125rem / 1.4 · 500 · 0px | Captions and metadata. |
--caption-upper-sizecaption-upper.ds-caption-upper · --caption-upper-family -lh -ls -weight | 0.75rem / 1.4 · 500 · 1.5px | Uppercase micro-labels for categories and badges. The only type that is not sentence case. |
--code-sizecode.ds-code · --code-family -lh -ls -weight | 0.875rem / 1.6 · 400 · 0px | Code blocks and inline code. |
--button-sizebutton.ds-button · --button-family -lh -ls -weight | 0.875rem / 1 · 500 · 0px | Button labels. |
--nav-link-sizenav-link.ds-nav-link · --nav-link-family -lh -ls -weight | 0.875rem / 1.4 · 500 · 0px | Navigation links. |