Open Mafold

Typography

Every piece of text picks one named style. Size, weight, line height and letter spacing travel together, so nobody assembles type from parts.

The scale

Fifteen pixels is the message size; the rest step out from there. No half pixels, and only four weights: 400, 500, 600, 700.

Say it once, for everyone.
Hero headlines
.t-display40/44 · 700 · -0.02em
Say it once, for everyone.
Page titles on wide screens
.t-title-130/36 · 700 · -0.015em
Say it once, for everyone.
Page and sheet titles
.t-title-224/30 · 600 · -0.01em
Say it once, for everyone.
Section headings
.t-title-320/26 · 600 · -0.005em
Say it once, for everyone.
The paragraph under a page title
.t-lead18/28 · 400
Say it once, for everyone.
Card titles, emphasised rows
.t-headline17/24 · 600
Say it once, for everyone.
Long reading: posts, docs
.t-prose16/26 · 400
Say it once, for everyone.
Large body, field text
.t-callout16/22 · 400
Say it once, for everyone.
Messages and most UI text
.t-body15/21 · 400
Say it once, for everyone.
Labels that lead a row
.t-body-medium15/21 · 500
Say it once, for everyone.
Secondary rows, buttons
.t-subhead14/20 · 400
Say it once, for everyone.
Buttons, tabs
.t-subhead-medium14/20 · 500
Say it once, for everyone.
Meta lines
.t-footnote13/18 · 400
Say it once, for everyone.
Values in tables
.t-footnote-semibold13/18 · 600
Say it once, for everyone.
Hints, timestamps
.t-caption12/16 · 400
Say it once, for everyone.
Small labels
.t-caption-semibold12/16 · 600
Say it once, for everyone.
Badges, the smallest text
.t-caption-211/14 · 500 · 0.01em
pnpm tokens --check
Anything typed or copied
.t-code13/20 · 400

Using a style

As a class, or as the font shorthand. Titles also set their tracking.

<h2 class="t-title-3">Connections</h2>
<p class="t-body">Link an account once and every agent can use it.</p>
.row-title { font: var(--mf-type-body-medium); }
.page-title {
  font: var(--mf-type-title-2);
  letter-spacing: var(--mf-type-title-2-tracking);
}

Typefaces

Inter for everything people read, JetBrains Mono for anything typed or copied. Chinese falls back to PingFang SC, then Noto Sans SC.

--mf-font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
--mf-font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospace;