Typography

Default face is Inter Variable, vendored under /bapp-core/ui/vendor/inter/inter.css. Override --bf-font-sans at any scope to switch the primary face.

Type scale

2xs — 11px — short captions, footnotes

xs — 12px — table headers, badges

sm — 13px — dense UI, labels

base — 14px — default body text

md — 15px

lg — 16px

xl — 18px — section titles

2xl — 20px

3xl — 24px — page titles

4xl — 30px

5xl — 36px — display

Weights

100 — Thin

300 — Light

400 — Regular

500 — Medium

600 — Semibold

700 — Bold

800 — Extra Bold

900 — Black

Numerals

Use .bf-tabular-nums on tabular figures (KPIs, prices) so columns line up.

$1,239.50

$ 9.50

$1,239.50

$ 9.50

Swap the primary font

Override the token at any scope:

<div style="--bf-font-sans: 'IBM Plex Sans', sans-serif">
  All descendant text uses IBM Plex while keeping the same scale.
</div>

Lorem ipsum (Georgia override)

Lorem ipsum (Inter default)