WonderTwin Design
The executable form of the design system. Tokens, components, mascots, and voice — rendered from the same source the apps consume.
Colors
Brand palette and the semantic roles each hue plays. Coral is the only action color; mint = Max running, lavender = Dot observing.
Typography
Geist for impact, Inter for body, JetBrains Mono for code. The full type scale rendered live.
Spacing & radii
Spacing ramp, corner radii, and elevation. Visual reference for token names used in code.
Components
Live brand primitives — BrandButton, CodeBlock, TwinStatusDot, MascotImage. Real package, not screenshots.
Mascots
Auto-generated lookbook of every canonical pose for Max, Dot, and the pair.
Voice & principles
How Max and Dot speak, and the writing principles that govern marketing and product UI.