Oz
A brand + interaction layer inspired by the digital world of Oz (Summer Wars), laid on top of Design-Next without touching its architecture. It only overrides token values and adds motion at the points of interaction — no component breaks (zero rupture). Light mode is the canonical theme: the luminous white plaza. Flip the Oz toggle (✦) in the top bar to see this whole site come alive — it composes with dark mode.
Install
npx shadcn@latest add @design/oz-tokensAfter install: @import the tokens after theme.css in your global stylesheet, add @custom-variant oz (&:is(.oz *));, then add the oz-toggle component (@design/oz-toggle) and a small no-flash script that applies the .oz class from localStorage.
The six principles
Calm at rest, alive on contact
The chrome stays sober and accessible. Energy lives in the motion — focus, hover, press, state changes — not in the surface. One ambient element per screen, max.
Every action has a bodily reaction
Press springs, focus blooms into a halo, toggles glow when on. Interactive elements answer the cursor and the keyboard.
The glitch is a signal
A short, non-looped glitch fires only for an input error, a delete-to-confirm, or incoming data. It never decorates.
Focus is joyful
The keyboard focus ring becomes an Oz halo — but it stays highly visible and contrast-checked. The halo augments the ring, it never replaces it.
Colour encodes function
A constant grammar: magenta = action, cyan = navigation / info / input focus, lime = success, amber = warning, red = danger.
Presence is ambient, opt-out by default
Looping presence animations only mark genuinely live / selected / online states — and are cut cleanly by prefers-reduced-motion.
Colour grammar
--primary · magenta--info · cyan--success · lime--warning · amber--destructive · redLive
These are the unmodified Design-Next components. Toggle Oz in the top bar and watch the press, focus halo, the neon button, the gradient badge, and the error glitch wake up.