Typography

Norio typography is token-based. The UI face is Inter (via next/font → --font-inter). Prefer CSS variables from the token build over the docs-kit utility classes (.ds-*, .fs-*), which belong only to this documentation chrome.

Font family

--font-family-sans — Inter stack (prefers var(--font-inter))
--font-family-mono — monospace stack

Size & leading

Size token	Value	Leading token
`--font-size-2xs`	10px	`--font-leading-2xs`
`--font-size-xs`	12px	`--font-leading-xs`
`--font-size-sm`	16px	`--font-leading-sm`
`--font-size-compact`	14px	`--font-leading-compact`
`--font-size-md`	20px	`--font-leading-md`
`--font-size-lg`	24px	`--font-leading-lg`
`--font-size-xl`	40px	`--font-leading-xl`
`--font-size-2xl`	48px	`--font-leading-2xl`
`--font-size-3xl`	72px	`--font-leading-3xl`
`--font-size-4xl`	84px	`--font-leading-4xl`

Weight & tracking

Weights: --font-weight-light, --font-weight-regular, --font-weight-medium, --font-weight-semibold, --font-weight-bold
Tracking helpers such as --font-tracking-tight and --font-tracking-display

Usage in SCSS

.example {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  line-height: var(--font-leading-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

Edit scales in tokens/tokens.json, then run npm run tokens.