{"id":"c81d2be0-05b7-4755-8046-f2d19fbc448c","name":"Wonder","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","colors":[{"name":"Midnight Plum","hex":"#0f0217","role":"Primary page background, structural container backgrounds","group":"neutral","cssVariable":"--color-midnight-plum"},{"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","cssVariable":"--color-ghost-ink"},{"name":"Off-Black","hex":"#111111","role":"Text for inverted elements, occasionally used for badge backgrounds","group":"neutral","cssVariable":"--color-off-black"},{"name":"Bright Snow","hex":"#ffffff","role":"Primary text color, icon fills, and accent on light-themed or inverted elements","group":"neutral","cssVariable":"--color-bright-snow"},{"name":"Silver Mist","hex":"#e1e4e8","role":"Muted text, placeholder text, and decorative borders on light elements","group":"neutral","cssVariable":"--color-silver-mist"},{"name":"Border Violet","hex":"#44374a","role":"Hairline separators, subtle borders for cards, buttons, and input fields","group":"neutral","cssVariable":"--color-border-violet"},{"name":"Muted Ash","hex":"#6f6774","role":"Secondary text for descriptions and helper text","group":"neutral","cssVariable":"--color-muted-ash"},{"name":"Charcoal Grey","hex":"#737373","role":"Tertiary text color, icon strokes and fills at lower prominence","group":"neutral","cssVariable":"--color-charcoal-grey"},{"name":"Fuchsia Burst","hex":"#d262ff","role":"Primary action button backgrounds, interactive highlights, and decorative color accents","group":"brand","cssVariable":"--color-fuchsia-burst"},{"name":"Deep Orchid","hex":"#6a1791","role":"Decorative strokes in UI elements, subtle hover states, and brand illustration elements","group":"brand","cssVariable":"--color-deep-orchid"},{"name":"Dark Magenta","hex":"#2d063a","role":"Text on very dark backgrounds, secondary heading color","group":"brand","cssVariable":"--color-dark-magenta"},{"name":"Sunset Orange","hex":"#d97757","role":"Orange text accent for links, tags, and emphasized short phrases","group":"accent","cssVariable":"--color-sunset-orange"}],"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"}],"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."]}}