Principles
The rules every layer obeys — each enforced by a token, an attribute or a class, so the system keeps its own promises.
Principles are the arguments we already had, written down so they never get re-argued at midnight. Each one is enforced by the system itself — a token, an attribute, a class — not by memory.
The rules of one
One signal dot per surface — it marks the single live thing, never decoration. One accent word per headline (an <em> in the display voice). One inverse band per view, so contrast is earned by scarcity. One ask per page, near the end. When two things glow, neither is the live thing.
Tokens before templates
Every value in every layer is a var() off a ladder — colour, size, space, radius, shadow, duration. No raw hex, no magic numbers. If a component needs a value that isn't on a ladder, the component is wrong. This is also the entire customization API: override the token, own the system.
State lives in ARIA
Active, selected, pressed, current, done — all driven by aria-current, aria-selected, aria-pressed and [data-done]. Styling and the accessibility tree are the same attribute, so they can never disagree. A state class like .active is a lie waiting to happen.
The platform first
Accordion and collapse are <details>; modal and offcanvas are <dialog>; popovers use the Popover API; selects, checks and ranges are native elements dressed, never divs pretending. Focus trapping, ESC, light-dismiss and find-in-page come from the browser — free, and correct.
Motion is honest
Interaction feedback stays under 200ms and animates one property. Entrances are drawn, not faded, when they should read as gestures (annotations). Everything degrades to a fade or to nothing under prefers-reduced-motion. A marquee pauses on hover and hides its duplicate run from assistive tech.
Design at thumbnail scale
Every card, poster and canvas passes the P1 test: does the title survive a 120px crop? A creator's work is judged in a grid of thumbnails before it is ever judged full-screen — so the small size is the real size, and the big one is the luxury.
Reading is the interface
Prose never exceeds its measure (65ch), leads get one size up, numbers are tabular, labels are slate. Type roles — not utility font sizes — so every page speaks with the same voice at the same volume.
Accessible is the default, not the audit
Focus rings that show, skip links that work, contrast measured in both themes, targets 44px, colour never the only signal, forms wired with aria-invalid/aria-describedby. Accessibility is a foundation file (08-a11y), not a launch checklist.