Typography

Font family

Daybridge uses Inter Variable as its primary typeface on the web. On iOS and Android, we use the platform system fonts (SF Pro and Roboto respectively).

"InterVariable", "SF Pro Display", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
"Helvetica Neue", sans-serif

Text rendering

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;

Type scale

The standard UI size is 13px on desktop and 15px on mobile. The scale uses eight steps:

Line height

Each font size has two line-height values depending on context. Both are derived from the font size using CSS round() and clamp(), producing values snapped to a 4px grid.

Component line-height

For single-line UI elements — sidebar items, buttons, table cells, labels. Tight, just enough to contain the glyphs. This is the global default.

line-height: round(up, 1em + clamp(2px, 1em - 12px, 8px), 2px);

Reading line-height

For multi-line content — event descriptions, editor text, modal body copy. Generous, optimised for comfortable reading.

line-height: round(up, 1em + clamp(4px, 1em - 8px, 12px), 4px);

Padding around text

When text appears inside a boxed element — a button, tag, badge, or input — the component line-height defines a safe zone around the glyphs. Padding extends outward from this using the lh unit, which resolves to the element's computed line-height. This means padding scales automatically with text size — no per-size values needed.

Five density tiers, named with t-shirt sizes to match the radius and shadow scales:

/* xs — tags, badges, inline labels */
padding: 0.075lh 0.375lh;

/* sm — small buttons, chips, dense controls */
padding: 0.125lh 0.5lh;

/* md — buttons, standard controls */
padding: 0.25lh 0.625lh;

/* lg — prominent actions, large buttons */
padding: 0.4lh 0.875lh;

/* xl — text inputs, search fields */
padding: 0.625lh 0.875lh;

Both axes use lh (line-height-relative) so all padding scales proportionally with text size.

Setting element heights directly should be avoided. Instead, height is determined by the safe zone:

element height = line-height + (2 × vertical padding) + border

Inline congruence

When a badge or tag appears inline with text, its total height must fit within the surrounding text's reading line-height. Otherwise it pushes adjacent lines apart.

Rule: use one step down from the surrounding text size.

Text colors

Three semantic color tokens control text contrast. Each maps to a luminance shade, and the resolved color depends on the color mode applied to the element — neutral text is gray, brand text takes the brand hue, and so on. See the colors guide for how semantic colors work.

Examples