Design System
The single source of truth for every pixel rendered in W3AI.
Tokens, primitives, density rules, and motion grammar. Every other module composes from here. Nothing in product code defines a color, radius, or duration directly.
State Logic
Reactive surfaces this module exposes to the runtime.
dark | light. Dark-first. Light is derived, never authored.
compact | regular | spacious. Drives spacing scale only.
Mirrors OS preference. Disables non-essential motion.
ai | wallet | agent | gov | enterprise. Tints the active surface.
Visual Variants
Allowed rendering modes. No ad-hoc styles outside this set.
Floating panels, navigation, modals.
Dialog confirmations, destructive sheets.
Read-only data, inactive runtimes.
SF Pro Display. Headers only.
SF Mono. Addresses, hashes, runtime IDs.
Four-step elevation. No custom shadows.
Motion Tokens
Deterministic timing curves. No custom easing per component.
| token | value | use |
|---|---|---|
| motion.fast | 120ms ease-out | Hover, focus, toggle. |
| motion.base | 240ms cubic-bezier(.2,.8,.2,1) | Panel enter, route change. |
| motion.slow | 480ms cubic-bezier(.2,.8,.2,1) | Glass morph, runtime swap. |
| motion.spring | stiffness 240, damping 28 | Drag, sheet drop. |
Isolation Rules
Hard boundaries enforced at the module edge.
No raw hex values in product code. Only semantic tokens from styles.css.
No bespoke easing curves. Use the four motion tokens above.
Components may not introduce new elevation levels.
Typography pairings are fixed. Display + Mono. No third family.