Type & Space

Figtree is the interface. It carries every label, every button, every table cell, and it is the reason the product reads as calm rather than as literary. Instrument Serif is for names and titles only: the wordmark, page headings, section heads. Geist Mono is for anything a person might have to compare character by character.

The split has one hard rule behind it, and it comes from the logo: the word "Phloom" is always live Instrument Serif text, never an outlined graphic. That is why the wordmark can animate per letter, why it is what a screen reader announces, and why the symbol beside it is always aria-hidden.

Serif italic is not a utility voice. It was tried for descriptions under admin page titles and failed the review: at small sizes it is harder to read than the sans, for no gain. It stays reserved for genuine marginalia.

These are utilities, not sizes to reinvent per page. Each row below is set in the real class named beside it, so what you are reading is the scale as it currently exists rather than a description of it.

Any column of numbers a person compares gets .tabular-nums-pro. Proportional digits are prettier in a sentence and useless in a column, because the ones are narrow and the rows stop aligning. This matters more here than in most products: the usage and analytics surfaces are almost entirely columns of numbers.

The Tailwind 4px step, used plainly. Interior page rhythm settles on a small vocabulary rather than the whole scale: gap-1.5 to gap-2.5 inside a control, gap-4 between cards, gap-6 to gap-8 between page sections, and p-5 rising to sm:p-7 inside a card. When in doubt, match the nearest existing surface rather than picking a new step.

Radii come off one root, --radius (currently …), multiplied into seven tiers in @theme inline. Retuning the root moves every corner in the product together.

The part worth knowing: a squircle needs MORE radius than a circle to look the same. Where corner-shape: squircle is supported, the shell and card utilities step their radius up inside an @supports block rather than leaving it alone, because superellipse corners read visibly tighter at the same number. A card is 1.25rem normally and 1.5rem as a squircle. Tiles inside it step down one tier, so a squircle card never contains circular tiles.