Legacy reference — not Client-First

Relume / Untitled UI legacy classes

This page catalogues the Relume/Untitled UI (uui-*) classes still live on this site, so pages that have not yet been migrated to Client-First have somewhere to check what they are relying on. It is a map, not a system — /style-guide and brand/style-guide.md remain the only design system to build or rebuild pages against. Per CLAUDE.md's "Things being removed" list, every class shown below is slated for deletion once the page(s) depending on it are rebuilt in Client-First.

Why this exists: a site-wide class search turned up 100+ real uui-* classes still in active use — Navbar02's dropdown, the FAQ01/FAQ02 accordion components, Layout01/Layout08 section components, plus the typography, spacing, container and button utilities documented below. Renaming or deleting any of these before their dependent pages are rebuilt will break live rendering. Treat this as a "check here before touching" reference, not a style option for new work.

Typography

Relume/Untitled UI's own heading and text-size scale — parallel to, and separate from, Client-First's heading-style-h1–h6 and text-size-large|medium|regular|small|tiny. Do not mix the two scales on one page.

Heading medium

.uui-heading-medium — ≈2.25rem / 600

Heading xxsmall

.uui-heading-xxsmall — ≈1.25rem / 600

Subheading label

.uui-heading-subheading — ≈1rem / 600

Text size large — the quick brown fox jumps over the lazy dog.

.uui-text-size-large

Text size medium — the quick brown fox jumps over the lazy dog.

.uui-text-size-medium

Text size small — the quick brown fox jumps over the lazy dog.

.uui-text-size-small

Numbered duplicates: most of these exist as 2–5 near-identical copies site-wide (e.g. uui-heading-medium, uui-heading-medium-4, uui-heading-medium-5) from repeated Relume component pastes. This page documents one canonical class per family — if you find an element using a numbered variant, check query_styles before assuming it's intentionally different; it almost always isn't.

Buttons

Relume/Untitled UI's button variants — separate from Client-First's button base class + is-* combos (is-secondary, etc.) documented on /style-guide.

Text link button Secondary gray →

.uui-button-link* — transparent text-link, ~1rem / 600 · .uui-button-secondary-gray — bordered, swatch-coloured · .uui-button-icon — small flex icon wrapper · .uui-button-row — flex-wrap row utility (wraps the three above)

Spacing

Simple min-height spacer utilities — no visual rendering to demo, listed here for reference only.

.uui-space-xxsmall — 0.5rem (8px)
.uui-space-xsmall — 1rem (16px)
.uui-space-small — 1.5rem (24px)
.uui-space-medium — 2rem (32px)

Containers

.uui-container-large — 80rem max-width
.uui-container-small / .uui-max-width-large — 48rem max-width
.uui-page-padding* — several variants, inconsistent values (mirrors the same "60 distinct max-width values" mess CLAUDE.md flags for Client-First's own containers — not yet cleaned up on this side)

Watch for .uui-page-padding 6 — unlike its siblings, this variant carries its own bordered box plus a LightYellowBackground variable background — the same pattern already documented for the Homepage newsletter section elsewhere in this engagement. If a page uses it expecting plain padding, the background/border will surprise whoever edits it next.

Status

This page is itself TEST-only scaffolding, not a page users ever see — it exists purely so the assistant and anyone else touching not-yet-migrated pages has one place to check before renaming or deleting a uui-* class. Once every page depending on Relume/Untitled UI classes has been rebuilt in Client-First (tracked in audit/page-decisions-log.md), this page and every class documented on it can be deleted together.