Type system

Typography

MTC uses DM Sans as the production UI typeface, Syne for selected brand moments, and JetBrains Mono for technical labels inside the library.

Primary UI

DM Sans

Used for all production headings, body copy, forms, dialogs, tables, cards, and navigation.

400 Regular 500 Medium 600 Semibold 700 Bold 900 Black

Build the trainer business hub.

Readable, calm, product-first. The app should not feel like a generic dashboard or a marketing template.

Brand accent

Syne

Use sparingly for brand lockups, campaign labels, or moments that need more identity. Do not use it for dense app UI.

Real coaches. Real plans. Real results.

Documentation

JetBrains Mono

Use for tokens, code, keyboard hints, file paths, technical metadata, and internal design operations notes.

--font-display: 'DM Sans Variable'
--font-body: 'DM Sans Variable'
--font-syne: 'Syne Variable'

Production Hierarchy

Use fewer sizes with stronger intent. Avoid decorative heading stacks that compete with the actual task.

Page title

DM Sans 900, tight tracking, direct nouns

Section title

DM Sans 700, compact and scannable

Body text explains what changes, what matters, and what the trainer should do next.

DM Sans 400 or 500, no filler copy