Typography

Plus Jakarta Sans, everywhere. A humanist sans with enough warmth to feel approachable and enough structure to read as competent — exactly the register we want. Four weights are in active use; don't reach past them.

Regular carries body copy. Medium sets every heading. Bold is for inline highlights only — stat numbers, a single emphasized phrase. Light is occasional, for very large display numerals. That's the whole system.

The full ladder, top to bottom. Headings share one weight (Medium 500); size carries the hierarchy. Tracking stays minimal — slightly negative on the largest sizes, easing back toward zero as type shrinks (only the eyebrow is tracked open). Line-height loosens as size drops. Labelled values are the site-canonical sizes.

Reading the ladder. Specimens are capped to fit this column, so the largest rows render smaller than their labels — the labelled px and weights are the canonical truth, the rendered glyphs show ratio and rhythm. In practice the scale tops out at H1 (52px): every page title and section head we measured on the live site sits at 52 / 46 / 30. Display (84px) is reserved for rare oversized moments and isn't used in standard layouts.

The one rule that keeps headings clean: every heading is Medium 500, and only the size changes. Bigger means more important — full stop. Don't bump a sub-head to Bold to separate it; that makes it look heavier than the line above and inverts the hierarchy.

Small roles that punctuate the page. These earn their effect through case, weight, and color — not size. Use each for its one job.

The signature heading move: a two-tone section header — a plain phrase plus one phrase filled with the blue→cyan gradient, on the same 45° axis as our hero washes. It's how nearly every marketing section opens. One gradient phrase per header, display sizes only.

Rules: headlines ≥28px only — the gradient muddies and can fail contrast at small sizes. Never on body copy, captions, or UI text. The classes set a solid color fallback first, then clip the gradient — keep the fallback. The on-dark variant is vivid; the --on-light variant stays in a legible mid-blue range for white and Cloud Gray grounds.

Not everything gradients. Content-page titles, blog headings, and big CTA bands stay plain — like the recurring No BS. Just Proper IT. band, set in plain white display on a navy/photo ground. Gradient is the marketing spike; plain is the default.

Body copy is built to be read. Regular 400 at a generous 1.8 line-height, with lines held to a comfortable measure so the eye can find the next row without effort.

Styles for Insights articles and case studies: a longer body than the marketing pages, plus the list and pull-quote patterns those pages use.

Two list patterns

Pull-quote

Bullets, list markers, and the quote rule are Trust Blue #257CA8 (--color-primary) — never teal. Article body is 18 / 1.6 with 1.42em paragraph spacing; the pull-quote is 20px italic. Use these values verbatim — no rounding.

Why one family works — from the design-principles research. Typefaces fall into rough families — oldstyle serifs, moderns, slab serifs, sans serifs, scripts, decoratives — and Robin Williams sorts every pairing into three buckets: concord (one family, quiet and unified), conflict (two faces of similar structure — the reader can't tell a choice from a copy-paste accident), and contrast (clearly, confidently different families with different jobs). The rule of thumb: combine faces from clearly different families, or don't combine at all. Concord and contrast both work. Conflict never does.

She lists six axes you can contrast type on: size, weight, structure, form, direction, and color — and the working advice is to move two or three at once rather than nudging one. Jump at least 1.5× in size between hierarchy levels, 2× for a page's main heading, and give the darkest value on the page to the thing you most want read. A single-family brand like Proper Sky gives up the “structure” axis (two typeface skeletons) on purpose — and compensates on the others. That is why the brand rules read the way they do:

Four ways type drifts off-brand. Each example below is wrong.

Try type before you set it. Edit the text, scrub the controls, or load a scale level. Everything stays within the brand's weights and the gradient treatment — settings persist while you work.