Typography

Promeo typography — two-tier system. The primitive layer (FontFamily / FontSize / FontHeight / FontWeight) mirrors Figma’s Promeo · Number / Type variable collection 1:1. The semantic layer composes primitives into the 20 named styles published in Figma’s 🔤 Typography page, grouped as Label / Headline / Title / Sub-title / Body / Caption.

Letter-spacing follows Figma’s 1% rule — every semantic style sets letterSpacing: fontSize * 0.01. Live previews below render in Inter (Google Fonts).

Source of truth: lib/tokens/typography.dart. Token JSON is hand-rolled in scripts/build-tokens.dart (see PRD 05 §6 末 for why direct-import + introspection isn’t viable from dart run).

Primitive Layer

Raw token values from lib/tokens/typography.dart. Composed via the _t() helper into semantic styles below.

FontFamily

headline	Inter
title	Inter
label	Inter
body	Inter
caption	Inter

FontSize (px)

xxs	10
xs	12
sm	14
sl	16
md	18
ml	20
lg	24
xl	28
xxl	32
xxxl	40

FontHeight (px)

xxsx	12
sx	16
sm	20
sl	24
s	28
md	32
ml	38
lg	40
xl	48

FontWeight

regular	400
medium	500
semibold	600
bold	700

Semantic Styles

The 20 named styles published in Figma's 🔤 Typography page. Click </> next to a style name to copy the AppText.<name> Dart identifier. Previews are rendered in real Inter — the value RD's Flutter widget composes via _t().

Label

• Promeo Design System
  label01 </> label/01

  16 / 24 · w500 · ls 0.16 · Inter

  Prominent form labels, button text.

• Promeo Design System
  label02 </> label/02

  14 / 20 · w500 · ls 0.14 · Inter

  Standard control labels, list items.

• Promeo Design System
  label03 </> label/03

  12 / 16 · w500 · ls 0.12 · Inter

  Small labels, metadata, table headers.

Headline

• Promeo Design System
  headline01Bold </> headline/01/bold

  40 / 48 · w700 · ls 0.40 · Inter

  Largest display, bold weight.

• Promeo Design System
  headline01Regular </> headline/01/regular

  40 / 48 · w400 · ls 0.40 · Inter

  Largest display, regular weight.

• Promeo Design System
  headline02Bold </> headline/02/bold

  32 / 40 · w700 · ls 0.32 · Inter

  Display headline, bold weight.

• Promeo Design System
  headline02Regular </> headline/02/regular

  32 / 40 · w400 · ls 0.32 · Inter

  Display headline, regular weight.

• Promeo Design System
  headline03Semibold </> headline/03/semibold

  28 / 38 · w600 · ls 0.28 · Inter

  Page title, semibold.

• Promeo Design System
  headline03Regular </> headline/03/regular

  28 / 38 · w400 · ls 0.28 · Inter

  Page title, regular weight.

Title

• Promeo Design System
  title01 </> title/01

  24 / 32 · w700 · ls 0.24 · Inter

  Largest section title.

• Promeo Design System
  title02 </> title/02

  20 / 28 · w700 · ls 0.20 · Inter

  Section title.

• Promeo Design System
  title03 </> title/03

  18 / 24 · w700 · ls 0.18 · Inter

  Dialog header, sub-section.

• Promeo Design System
  title04 </> title/04

  14 / 20 · w700 · ls 0.14 · Inter

  Compact section title.

• Promeo Design System
  title05 </> title/05

  16 / 24 · w700 · ls 0.16 · Inter

  Card title.

Sub-title

• Promeo Design System
  subTitle01 </> sub-title/01

  14 / 20 · w500 · ls 0.14 · Inter

  Secondary heading, softer than title/04.

Body

• Promeo Design System
  body01 </> body/01

  16 / 24 · w400 · ls 0.16 · Inter

  Large body text, primary reading.

• Promeo Design System
  body02 </> body/02

  14 / 20 · w400 · ls 0.14 · Inter

  Default reading text.

• Promeo Design System
  body03 </> body/03

  12 / 16 · w400 · ls 0.12 · Inter

  Compact body, helper copy.

Caption

• Promeo Design System
  caption01 </> caption/01

  10 / 12 · w500 · ls 0.10 · Inter

  Smallest UI label, Medium weight.

• Promeo Design System
  caption02 </> caption/02

  10 / 12 · w400 · ls 0.10 · Inter

  Smallest UI label, Regular weight.