SUSupaUI

Foundations

Typography

Three voices in one kit — display serif (Gloock), body serif/sans (Source Serif & Inter), pixel mono labels (Departure Mono).

Display — Gloock

Pixel labels meet editorial display.

Pixel labels meet editorial display.

Pixel labels meet editorial display.

Pixel labels meet editorial display.

Pixel labels meet editorial display.

Body — Inter

The kit's running text. Inter at 18 leads to a generous 1.5 leading and a relaxed measure for editorial copy.

Smaller paragraphs sit at 16 with a comfortable 1.5 leading.

Captions and helper text drop to 14 and tone="muted".

Pixel labels — Departure Mono

14 · BUTTON LABEL12 · BADGE LABEL10 · MICRO TAG

Why three voices

The pixel face is load-bearing — it's how the kit signals control surfaces (buttons, badges, kbd chips, code) without leaning on colour. Display serif marks editorial intent; sans body keeps forms readable at small sizes. Don't mix the voices inside a single component.