Wonder

Wonder is a dark-themed design system evoking a 'code editor' aesthetic with deep, muted purple backgrounds and high-contrast white text. It balances stark UI elements – sharp borders, minimal elevation – with a single vivid fuchsia accent that serves as a functional highlight. Typography is precise and utilitarian, hinting at a developer-tool context, while transparent and ghost elements create a sense of depth and interactivity within the dark canvas. Always use Midnight Plum (#0f0217) as the base background for main page sections to maintain the dark theme. Apply Fuchsia Burst (#d262ff) for primary call-to-action buttons and key interactive elements. Utilize Bright Snow (#ffffff) for all primary text content against dark backgrounds to ensure high contrast. Reinforce interactive elements with a distinct 8px border-radius for buttons and navigation items, or a 9999px (pill-shape) for badges and inputs. Employ Border Violet (#44374a) for subtle borders and dividers between UI elements, creating clear but not harsh separation. Use Uncut Sans Variable for headlines (50px, weight 400, letter-spacing -0.0500em) to communicate authority with a unique, modern feel. Ensure input fields have a semi-transparent background (rgba(255, 255, 255, 0.08)) and Border Violet outline for a cohesive dark UI appearance. Avoid using highly saturated colors other than Fuchsia Burst (#d262ff) for functional interface elements; reserve other bright colors for imagery or specific, non-interactive highlights. Do not introduce sharp, angular cards; all cards should have a consistent 14px border-radius. Do not use heavy, opaque drop shadows for elevation; rely on the subtle elevation provided by oklab(0 0 0 / 0.08) 0px 0px 0px 1px and similar lightweight shadows. Do not deviate from the specified typefaces; Uncut Sans Variable, Inter, and Martian Mono are the only approved font families. Avoid full-bleed content sections that break the overall maximum width pattern, except for intentional heroic visual elements. Do not use dark text on dark backgrounds; maintain high contrast with Bright Snow (#ffffff) for readability. Do not use solid borders on ghost buttons; utilize the Border Violet (#44374a) for a delicate outline effect.