Foundation
Typography
Nerio Core defaults to platform System UI so products stay native, neutral, and usable without a font request. The documentation brand uses Geist independently.
Font contract
| Role | Default token | Use |
|---|---|---|
| Sans | --n-font-sans → --n-font-sans-system | Product UI and body copy |
| Mono | --n-font-mono → --n-font-mono-system | Code and numeric values |
Native consistency means a product uses each platform's familiar UI family; it does not mean pixels are identical across operating systems. Font family changes remain CSS token overrides, not a fourth runtime axis beside theme, mode, and density.
Typography presets
| Preset | Sans token | Mono token | Font loading |
|---|---|---|---|
| System | --n-font-sans-system | --n-font-mono-system | None |
| Geist | --n-font-sans-geist | --n-font-mono-geist | Consumer-owned |
| Inter | --n-font-sans-inter | --n-font-mono-system | Consumer-owned |
| IBM Plex | --n-font-sans-ibm-plex | --n-font-mono-ibm-plex | Consumer-owned |
| Manrope | --n-font-sans-manrope | --n-font-mono-system | Consumer-owned |
| Source Sans 3 | --n-font-sans-source-sans | --n-font-mono-system | Consumer-owned |
| Space Grotesk | --n-font-sans-space-grotesk | --n-font-mono-system | Consumer-owned |
| Custom | Override --n-font-sans at root or on a product surface. | Consumer-owned | |
The n-typography-* classes are scoped token recipes. They can style an app root, preview, or product area, but Nerio intentionally has no data-font axis.
Font loading
System
@import "@nerio-ui/tokens/styles.css";Optional font families
Load non-system families in the consuming product. Nerio does not bundle font files or download fonts from a remote provider. A Next.js app may use next/font locally; the same consumer-ownership rule applies.
@font-face { font-family: "Geist"; src: url("/fonts/geist-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;}/* The font file is supplied by your product. */<div className="n-typography-geist"> <App /></div>Load Inter, IBM Plex, Manrope, Source Sans 3, or Space Grotesk the same way, then apply the matching n-typography-* recipe. IBM Plex may also load IBM Plex Mono; every other preset intentionally keeps the system mono stack.
Type scale
| Size | Token | Default | Use |
|---|---|---|---|
| xs | --n-font-size-xs | 12px | Metadata, badges, dense captions |
| sm | --n-font-size-sm | 13px | Labels, helper text, table cells |
| md | --n-font-size-md | 14px | Default UI body and controls |
| lg | --n-font-size-lg | 16px | Lead copy and compact section intros |
| xl | --n-font-size-xl | 18px | Small headings |
| 2xl | --n-font-size-2xl | 20px | Metric values and page sections |
| 3xl | --n-font-size-3xl | 24px | Editorial headings |
Semantic roles
| Role | Alias | Default |
|---|---|---|
| Body size | --n-body-font-size | --n-font-size-md |
| Body line height | --n-body-line-height | --n-line-height-normal |
| Control size | --n-control-font-size | --n-font-size-md |
| Control weight | --n-control-font-weight | --n-font-weight-medium |
| Label size | --n-label-font-size | --n-font-size-md |
| Label weight | --n-label-font-weight | --n-font-weight-medium |
| Helper size | --n-helper-font-size | --n-font-size-xs |
| Helper line height | --n-helper-line-height | --n-line-height-normal |
Custom typography
:root { --n-font-sans: "IBM Plex Sans", var(--n-font-sans-system);}.my-product-surface { --n-font-sans: "IBM Plex Sans", var(--n-font-sans-system);}- Keep the existing type scale, line-height tokens, and control heights across presets.
- Components consume semantic font tokens, never hard-coded Geist, Inter, or system stacks.
- Do not scale type with viewport width inside compact product surfaces.