← Components home

QA — the rigour gate

One deterministic gate over every library and every teardown.

Libraries

Loading…

Teardowns (style guides)

Every rule the gate enforces, in plain English. A library = structure; a style guide = the broad branding (rounding, colour, fonts) that sits on top. Together they define the whole display, deterministically.

Named conventions (Isaac's authority) the libraries follow site-wide — the subtle, all-component rules a style guide alone doesn't dictate. Sourced from CONTRACT.md.

1 · A button is a button, everywhere

A CTA inside a nav, card, band or footer keeps the standard button styling and hover — it never inherits that component's link treatment. On dark/emphasis surfaces it takes the inverse button treatment, not an ad-hoc override.

2 · Every interactive element has a visible hover that keeps contrast

Hover treatments are captured from the source site or are named conventions — never invented (no generic darken-veil).

3 · Inverse surfaces pair to their own colours

On bands, footers and image surfaces, buttons and links use that surface's paired text/bg tokens, so contrast is guaranteed — no black-on-black, no invisible CTAs.

4 · Vertical centring by construction

Bars (nav, quickbar) centre content with symmetric padding, not min-height/align tricks that drift.

5 · Link underlining is by ROLE

Body text links are underlined (affordance). Nav links have placement/weight, so no rest underline — underline on hover. Footer links: no rest underline, hover underline. Each overridable per preset (--link-decoration, --nav-hover-decoration, --footer-hover-decoration). Buttons never underline.

6 · Rounding, colour & fonts belong to the Style Guide

A library never sets these — they're broad branding, applied consistently across every component. The library owns structure (separators, density, weight, composition). Library + Style Guide together = the complete, deterministic look.

7 · Rounding is one base, expressed as multipliers

The style guide sets a base rounding scale (--radius-sm/md/lg/full, --btn-radius). Components express each element relative to it — calc(var(--btn-radius) * 2) for an image corner, min(var(--radius-sm), 1rem) for a chip — so an image corner can be 2× the button rounding while everything stays consistent. (Matches Mitchell's section syntax.)

Lists & spacing rhythm

List indenting, bullet style and spacing rhythm are library structure (the subtle detail). Placeholder — add the agreed bullet-indent / list conventions here as they're decided, so there's one canonical home for them.