Typography
Role-based type scale — ui-*, body-*, display-* — not generic sm/md/lg.
Type roles are named for what they're for, not their size. ui-* is chrome
(buttons, labels, form controls), body-* is reading copy, display-* is
headings. Every step bakes in its own line-height and letter-spacing — never
override those with a separate leading-*/tracking-* utility.
ui-xs
12px / 16px
Medium
Asteria UI
ui-sm
13px / 18px
Medium
Asteria UI
ui-md
14px / 20px
Medium
Asteria UI
ui-lg
16px / 24px
Medium
Asteria UI
body-sm
14px / 22px
Regular
Asteria UI
body-md
16px / 26px
Regular
Asteria UI
body-lg
18px / 28px
Regular
Asteria UI
display-xs
24px / 32px
Semibold
Asteria UI
display-sm
30px / 38px
Semibold
Asteria UI
display-md
36px / 44px
Semibold
Asteria UI
display-lg
48px / 58px
Semibold
Asteria UI
display-xl
60px / 72px
Semibold
Asteria UI
display-2xl
72px / 88px
Semibold
Asteria UI
Usage
<p className="text-ui-md font-medium text-fg-primary">Form label</p>
<p className="text-body-md text-fg-secondary">Paragraph copy.</p>
<h1 className="text-display-lg font-semibold text-fg-primary">Page heading</h1>ui-* letter-spacing is a fixed -0.1px at every size (confirmed across
Button, Badge, Field, and Input) — not proportional to font-size, so it's
baked into the text-ui-* utilities in theme.css rather than left to a
separate tracking-* class, which is em-relative and would drift per size.
Font family is Inter throughout: --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif.