Typography

A fixed label scale in DM Sans — hierarchy from size and color, not bold shouting.

Every piece of text uses one of seven named styles. The scale is deliberately small: one hero per screen, semibold only for titles, and quiet grays doing the hierarchy work.

The scale

Each helper returns a material.LabelStyle, so call .Layout(gtx) — or pass .Layout where a widget is expected. Sp(th, ratio) derives any further size from the one base instead of scattering magic numbers.

open demo ↗

lotusui.LabelHero(th, "Projects")            // 20sp — the screen's H1
lotusui.LabelTitle(th, "Add an item")        // 16sp semibold
lotusui.LabelCardTitle(th, "A card")         // 14sp semibold
lotusui.LabelBody(th, "Primary row text")    // 14sp
lotusui.LabelMeta(th, "Secondary text")      // 13sp
lotusui.LabelCaption(th, "2 minutes ago")    // 12sp
lotusui.SectionLabel(th, "GROUP")            // quiet group caption