{"id":"c81d2be0-05b7-4755-8046-f2d19fbc448c","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/c81d2be0-05b7-4755-8046-f2d19fbc448c","originalSiteUrl":"https://wonder.design","capturedAt":"2026-05-01T00:26:31.453Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Wonder","summary":"Deep canvas, fuchsia accent","description":"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.","industry":"devtools","colorScheme":"dark","colors":[{"name":"Midnight Plum","hex":"#0f0217","role":"Primary page background, structural container backgrounds","group":"neutral"},{"name":"Ghost Ink","hex":"#0b0211","role":"Gray text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color","group":"neutral"},{"name":"Off-Black","hex":"#111111","role":"Text for inverted elements, occasionally used for badge backgrounds","group":"neutral"},{"name":"Bright Snow","hex":"#ffffff","role":"Primary text color, icon fills, and accent on light-themed or inverted elements","group":"neutral"},{"name":"Silver Mist","hex":"#e1e4e8","role":"Muted text, placeholder text, and decorative borders on light elements","group":"neutral"},{"name":"Border Violet","hex":"#44374a","role":"Hairline separators, subtle borders for cards, buttons, and input fields","group":"neutral"},{"name":"Muted Ash","hex":"#6f6774","role":"Secondary text for descriptions and helper text","group":"neutral"},{"name":"Charcoal Grey","hex":"#737373","role":"Tertiary text color, icon strokes and fills at lower prominence","group":"neutral"},{"name":"Fuchsia Burst","hex":"#d262ff","role":"Primary action button backgrounds, interactive highlights, and decorative color accents","group":"brand"},{"name":"Deep Orchid","hex":"#6a1791","role":"Decorative strokes in UI elements, subtle hover states, and brand illustration elements","group":"brand"},{"name":"Dark Magenta","hex":"#2d063a","role":"Text on very dark backgrounds, secondary heading color","group":"brand"},{"name":"Sunset Orange","hex":"#d97757","role":"Orange text accent for links, tags, and emphasized short phrases","group":"accent"}],"typography":[{"role":"Headings and prominent display text. The variable font offers nuanced expressiveness, with tighter tracking for larger sizes to maintain visual density.","sizes":"14px, 15px, 16px, 18px, 24px, 38px, 50px","family":"Uncut Sans Variable","weight":"400, 500, 600","weights":"400, 500, 600","lineHeight":"1.10, 1.12, 1.33, 1.43, 1.45, 1.50, 1.56","substitute":"system-ui, sans-serif","letterSpacing":"-0.0500em at 50px, -0.0250em at 38px, 0.0800em at 14px"},{"role":"Body copy, navigation, and general UI text. It provides clarity and a modern feel, with subtle adjustments in letter-spacing across sizes to optimize readability.","sizes":"8px, 10px, 11px, 12px, 14px, 15px, 16px, 24px, 28px","family":"Inter","weight":"400, 500, 600, 700","weights":"400, 500, 600, 700","lineHeight":"1.20, 1.25, 1.33, 1.43, 1.50, 1.60, 1.63","substitute":"Inter, sans-serif","letterSpacing":"-0.0400em at 28px, -0.0250em at 24px, -0.0150em at 16px, 0.0500em at 12px"},{"role":"Specialized for code blocks, badges, and areas requiring a fixed-width, technical aesthetic. Its mono-spaced nature reinforces the code-centric aspects of the product.","sizes":"10px, 11px, 12px","family":"Martian Mono","weight":"400","weights":"400","lineHeight":"1.50, 1.63","substitute":"monospace","letterSpacing":"0.0500em"}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.5,"letterSpacing":0.5},{"role":"body","size":14,"lineHeight":1.5,"letterSpacing":0.08},{"role":"heading-sm","size":18,"lineHeight":1.45,"letterSpacing":0},{"role":"heading","size":24,"lineHeight":1.33,"letterSpacing":-0.6},{"role":"heading-lg","size":38,"lineHeight":1.12,"letterSpacing":-0.95},{"role":"display","size":50,"lineHeight":1.1,"letterSpacing":-2.5}],"spacing":{"radius":{"cards":"14px","badges":"9999px","inputs":"9999px","buttons":"8px","navItems":"8px"},"elementGap":"12px","sectionGap":"40px","cardPadding":"12px"},"radius":{"cards":"14px","badges":"9999px","inputs":"9999px","buttons":"8px","navItems":"8px"},"shadows":{"surfaces":[{"hex":"#0f0217","name":"Base Canvas","level":0,"purpose":"Dominant background for the entire application and main page sections."},{"hex":"#0b0211","name":"Card Surface","level":1,"purpose":"Background for contained interface blocks like cards and slightly elevated components."},{"hex":"#2b1a12","name":"Input Background","level":2,"purpose":"Background for interactive input fields and controls, offering a slight visual distinction."}]},"guidelines":{"do":["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."],"dont":["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."]},"components":[{"name":"Primary Action Button","role":"Filled action button"},{"name":"Ghost Outline Button","role":"Secondary action button"},{"name":"Navigation Link","role":"Navigation links and subtle interactive text"},{"name":"Transparent Card","role":"Informational display card"},{"name":"Elevated Content Card","role":"Important content display card"},{"name":"Input Field","role":"Text input areas"},{"name":"Round Badge","role":"Categorization or tag element"},{"name":"Product Hunt Badge","role":"Prominent external link indicator"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\ntext: #ffffff\nbackground: #0f0217\nborder: #44374a\naccent: #d262ff\nprimary action: #d262ff (filled action)\n\n### 3-5 Example Component Prompts\n1. Create a Primary Action Button: #d262ff background, #040106 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n2. Design a feature card: Transparent background, 14px border-radius, Border Violet 1px solid border. Title text 'Design with an agent.' (Inter, 24px, weight 600, #ffffff). Body text below it (Inter, 16px, weight 400, #e1e4e8).\n3. Generate a navigation bar: Midnight Plum background, with 'Careers' and 'Open app' as Navigation Links on the right. Include a small logo (icon) on the left that fills with Bright Snow (#ffffff).\n4. Create an input field for email: Semi-transparent background `rgba(255, 255, 255, 0.08)`, Bright Snow text (#ffffff), 9999px border-radius, a 1px solid Border Violet border. Placeholder text should be Muted Ash (#6f6774).\n5. Design a small badge: Off-Black background (#111111), Bright Snow text (#ffffff), 9999px border-radius, with 12px horizontal padding. Label it 'Public Alpha' using Martian Mono, 12px, weight 400, letter-spacing 0.5px."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777595159441-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777595159441-thumb.jpg","iconUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777595159441-icon.png","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c81d2be0-05b7-4755-8046-f2d19fbc448c-1777581481411-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c81d2be0-05b7-4755-8046-f2d19fbc448c-1777581481411-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c81d2be0-05b7-4755-8046-f2d19fbc448c-1777581481411-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c81d2be0-05b7-4755-8046-f2d19fbc448c-1777581481411-preview-detail-poster.jpg"},"similarStyleIds":["4e1ac04c-02ae-41cf-b588-3f6226a882f8","408a149c-702f-4442-99df-bea49d9c0d9b","c3ceca5c-d329-4559-b947-016172941ba2","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","7b083729-e694-4b66-82a3-befb08451722","86541d12-7870-4d51-8c47-0880fdb1ea01","cfab7b43-ed24-41e9-9272-c858700b865b","733e6475-892a-4138-8835-bf40344df317","6323a42b-3b47-4774-92e4-15651a9ba2ac","a7530405-e523-4268-bba5-ef13549fd61c","4d4772a3-e1da-415f-a6d7-658dcefdcecd","d417b42f-824d-45ba-a02e-cbef3b8ea0d8","c14bfde7-6f08-4b54-bd9b-39989d10cfef","108e2695-6970-47d5-b5b0-eea8fc34e048","2bf4c61f-de10-4614-ba1b-20c0453bd2a9","98a1ad40-90e2-4665-b49f-e5ffd4d4b90b","cb6e4ab0-b8fe-45b0-bd22-6339b073e26d","b8ba443e-5d83-4f37-b8c6-a1acd7623d0c","f71e92b0-d7a5-4203-b975-394f185218c2","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7"],"exports":{"designMdUrl":"/references/refero/c81d2be0-05b7-4755-8046-f2d19fbc448c/design.md","tokensJsonUrl":"/references/refero/c81d2be0-05b7-4755-8046-f2d19fbc448c/tokens.json","tailwindV4Url":"/references/refero/c81d2be0-05b7-4755-8046-f2d19fbc448c/tailwind-v4.css","cssVariablesUrl":"/references/refero/c81d2be0-05b7-4755-8046-f2d19fbc448c/tailwind-v4.css"}}