typography
one family — Karla, loaded from packages/ui/fonts/Karla-Regular.woff2 via the --font-karla css variable. all UI text is lowercase by rule (see DESIGN.md).
eight scale steps. specimens render from packages/ui/tokens.ts — change a value there and this page updates.
import from @klera/ui/tokens (typography)
variants
display
lower the dose, raise the floor.
3.2remweight 400line 1tracking -0.04em
marketing hero
h1 — page title
lower the dose, raise the floor.
2.6remweight 400line 1tracking -0.03em
stage hero on dashboard pages
h2 — section title
lower the dose, raise the floor.
1.4remweight 500line 1.1tracking -0.02em
section header within a page
h3 — card title
lower the dose, raise the floor.
1.1remweight 500line 1.2tracking -0.01em
portal-card / panel header
body
lower the dose, raise the floor.
0.95remweight 400line 1.55
default running text
small
lower the dose, raise the floor.
0.82remweight 400line 1.45
helper text, metadata
caption / chip
lower the dose, raise the floor.
0.78remweight 600line 1.2tracking 0.08em
uppercase eyebrows, status pills
metric display
lower the dose, raise the floor.
2remweight 500line 1tracking -0.02em
stat-card big number