Standards & overrides. This system adopts the mainstream layout rules (4pt grid, fixed type scale, three named max-widths, layout primitives over ad-hoc flex, Grid only for two-axis alignment). It overrides the reference standard's specific numbers in four places: spacing scale skips 20 / 40 / 80 / 128; body type is 15px (Linear/Stripe-style) rather than 16/17px; radii are subtle (6 / 8 / 10) rather than dramatic; container widths are device-derived (sm 640 / md 768 / lg 1024 / xl 1100) rather than role-derived. Treat these as authoritative — consuming projects follow this system, not the reference standard, when the two disagree.

Three reusable insets. Every card, dialog body, and surface panel reaches for one of these — never an ad-hoc literal. Reach for tight in dense rows or compact lists, default for standard cards / dialogs, lg for hero frames.

One token, every viewport. --pad-x: clamp(20px, 5vw, 32px). Use on <main>, marketing shells, and any page-level container — padding fluidly grows with the viewport from 20px on phones to 32px above 640px. Replaces ad-hoc padding: 0 32px + media-query overrides.

Three steps. --bp-sm: 640px · --bp-md: 768px · --bp-lg: 1024px. CSS custom props can't appear inside @media queries (spec limitation), so the same literals are repeated in media rules. The tokens exist so JS, container queries, and clamp() math share a single source of truth.

Pick the role, not the size. sm reading-width prose · md form / dialog · lg app content · xl design doc / marketing. Build pages from the .center-* primitives below — they apply both the right max-width and --pad-x.

Compose pages from these — don't re-derive flex per section.Each primitive owns its own gap and breakpoint logic, so spacing compounds consistently across section boundaries. Reach for raw display: flex/grid only when none of these fits.

When to use. Mutually-exclusive short list (2–5 items), all options visible at once, user picks one value. Billing cycle (monthly / annual), density (comfortable / compact), role (owner / admin / viewer). If the list is longer than 5, use a <select>. If selecting a tab switches a content panel, use tabs instead — this pattern sets a value, not a view.

Semantics. Container is role="radiogroup" with aria-label; each button is role="radio" + aria-checked="true|false". Arrow keys (←/→, ↑/↓) move focus and selection; only the active button is tab-stoppable.

Dialog vs AlertDialog. role="dialog" is for anything modal: forms, info, onboarding flows. role="alertdialog" is reserved for destructive / interrupting confirms — screen readers announce it more forcefully. Rule of thumb: if ignoring the prompt has a cost, it's an AlertDialog. Otherwise it's a Dialog.

Build with native <dialog>. Use the HTML <dialog> element with .showModal(). You get focus-trap, escape-to-close, ::backdrop, and correct default ARIA for free.

Action-button layout.Desktop: right-aligned, [cancel · confirm]. Mobile (< 480px): reversed-stack, confirm on top for thumb-reach. Primary button verb matches the action — "Delete", "Send invites", "Cancel subscription". Never "OK" / "Yes".

Tier the treatment to the blast radius. Not every destructive action needs a modal. Match the friction to the cost of a mistake. This system does not ship a red "danger" button variant — copy, context, and type-to-confirm carry the signal.

Two loaders, two contexts. Full-page loader when a whole surface or large region is waiting on one operation. Inline loader when the wait is local — inside a card, chat bubble, button action, or a step within a form. Never show both in the same viewport at once.

Preview the shape of what's coming. Skeletons are not loaders — they are placeholder blocks sized to match the content that will render, shown while that content is being fetched.