Typography

Two working families, an accent serif, and a closed ladder of sizes. Pages never reach for a text-* utility: they select a typography component and a size, which is what stops the scale drifting one heading at a time.

import from ~/components/ui/typography · ~/components/brand/typography · src/brand/fonts.css

Families

font-display

House Of ZA — endeavors, period

font-sans

We endeavour to make life design and to design life.

font-mono

--color-primary-500: #00D4FF

font-display / font-sans / font-mono

Work Sans carries display and body. Open Sans holds the mono slot.

Giphurs is the intended display face. The file has never existed in this repo, so Work Sans carries display until it lands. See src/brand/fonts.css.

Display — the brand extension

House Of ZA

We endeavour to make life design

[email protected]

Fluid clamp() sizes ABOVE the design system's Heading ladder. Three steps, because a marketing page has three magnitudes of voice.

Heading tops out at size="4xl" (text-7xl / 4.5rem). The wordmark runs to 9.375rem and has to scale with the viewport, so Display sits beside Heading rather than restyling it.

Heading

Heading 4xl

Heading 3xl

Heading 2xl

Heading xl

Heading lg (default)

Heading md

Heading sm

`as` is semantics and is fully decoupled from `size`. An h2 can look small.

Body

Lead. The deck under a headline — lighter, roomier, and balanced so it does not end on an orphan.

Default body. We work on small to medium projects that involve multidisciplinary knowledge, including material, product, visual and digital creation.

Muted. Metadata, captions, the things that sit behind the content.

Accent. Brand-colored emphasis, for a token name or an active value.

`measure` caps the line length at the one named reading width (40.625rem).

Label and Eyebrow

Label — sm
Label — md, accent

Eyebrow xs — tracking-eyebrow
Eyebrow sm — the section eyebrow
Eyebrow md — tracking-label, signal

<Label> (design system) vs <Eyebrow> (brand)

Label tops out at tracking-wider (0.05em). The brand's spaced uppercase runs 0.2em–0.3em, so Eyebrow extends it rather than overriding it.

Code

The primary role resolves at --primary-500 in brand.css.

<Code>

Inline, for a token or an identifier.

Rules

Select a component and a size. Heading, Body, Label, Display, Eyebrow.

Use `as` for the semantic tag and `size` for the visual weight. They are independent.

Cap long-form copy with `measure` so the line length stays readable.

Need a size the ladder does not have? Add a step to the scale in src/brand/scales.css.

Don't

Never write a raw text-* or font-* utility in a page or a section.

Never put a raw <h1>-<h6> in a route. The heading level is the `as` prop.

Never reach for a bracketed one-off size. That is exactly the escape the lint gate blocks.

Do not pass weight as a prop. Weight belongs to a variant.

Accent face

Nyght Serif is the brand's accent voice: the one or two phrases per page that should read as written rather than set. It sits beside the working families (Work Sans, Open Sans), reached through the font-accent utility, and is used almost always in italic and in the accent red. It has no size ladder of its own — it inherits the display size of the line it sits inside.

make life design, design life.

font-accent · italic · text-accent · 400/500 italic, 400 upright

A phrase or a line, never a paragraph. It is punctuation, not body.
Italic by default. The upright weight exists but is rarely the right call.
Pair it with the accent red, so the shift in voice and colour land together.