Typography
Scale
Typography scale for interface text.
- text-basefont-size: 14px; line-height: 20px
- text-smfont-size: 13px; line-height: 19px
- text-xsfont-size: 12px; line-height: 17px
Note
Avoid overriding a step’s line-height with leading-* or text-sm/6, and avoid arbitrary sizes (text-[13px]) — if no scale step fits, treat it as a scale or design conversation rather than a one-off.
Prose
For rich text (user-generated content, comments, documents), use the <Prose /> component, which applies its own typographic rhythm. For one-off cases, use the scale below.
- text-prose-h1font-size: 20px; line-height: 28px
- text-prose-h2font-size: 17px; line-height: 24px
- text-prose-h3font-size: 15px; line-height: 21px
- text-prose-basefont-size: 14px; line-height: 23px
- text-prose-prefont-size: 14px; line-height: 22px
- text-prose-compact-basefont-size: 13px; line-height: 21px
- text-prose-compact-prefont-size: 13px; line-height: 21px
Fonts
Sans (Muoto)
Font Weight
While Muoto is a variable font (see below), use only the following weights:
- normal
font-normal- book
font-book- medium
font-medium
Use font-book (450) as the heaviest weight for interface text, including labels, buttons, section headers, card titles, values, and table heads. Weight 500 is for prose: Prose applies it to strong text and h1 to h3, and title-level text outside Prose takes it from a text-prose-h1, text-prose-h2, or text-prose-h3 token, which bakes the weight in. Never write font-medium or a heavier weight in interface code. The @o/pipeline/no-off-scale-font-weight ESLint rule enforces this as an error in apps/operate, apps/design, apps/automations, @o/ai and @o/pipeline itself, and as a warning in apps/sandbox. It is off in apps/web and apps/waitlist, and workspaces that don’t load Pipeline’s ESLint config don’t run it; a markdown renderer that genuinely needs medium opts out with an eslint-disable comment that says why.
Playground