The reusable design-system BASE layer — the accessibility + motion contract every builder inherits, independent
of the scheme colors. Parameterized by CSS-var names so an app on its OWN color vocabulary (not the shadcn role
names) can point it at its own ring/destructive vars. Emits, all reduced-motion-gated:
keyboard-only focus rings (:focus-visible) on every interactive element — mouse clicks stay clean;
the [aria-invalid] destructive border+ring contract (app toggles the attribute, theme owns the look);
the .sr-only + .skip-link accessibility utilities (skip-to-content);
motion primitives — shake/fade-in-down (form errors), [data-reveal] staggered scroll-reveal, and the
asymptotic .navprogress bar — so each app drives behavior while the look is one inherited source;
a GLOBAL prefers-reduced-motion baseline that neutralizes all of the above for users who ask for it.
The reusable design-system BASE layer — the accessibility + motion contract every builder inherits, independent of the scheme colors. Parameterized by CSS-var names so an app on its OWN color vocabulary (not the shadcn role names) can point it at its own ring/destructive vars. Emits, all reduced-motion-gated:
:focus-visible) on every interactive element — mouse clicks stay clean;[aria-invalid]destructive border+ring contract (app toggles the attribute, theme owns the look);.sr-only+.skip-linkaccessibility utilities (skip-to-content);shake/fade-in-down(form errors),[data-reveal]staggered scroll-reveal, and the asymptotic.navprogressbar — so each app drives behavior while the look is one inherited source;prefers-reduced-motionbaseline that neutralizes all of the above for users who ask for it.