{"id":"f93ac72e-73b2-4b2c-80eb-351ddfa56f4d","name":"Playful","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/f93ac72e-73b2-4b2c-80eb-351ddfa56f4d","originalSiteUrl":"https://playful.software","capturedAt":"2026-04-30T03:10:35.262Z","colors":[{"name":"Midnight Ink","hex":"#0f172a","role":"Primary text, deep neutrals for icons and borders. This near-black provides strong contrast against light surfaces","group":"neutral","cssVariable":"--color-midnight-ink"},{"name":"Vivacious Pink","hex":"#ff2e95","role":"CTA buttons, accented links, and vibrant highlights — this vivid pink defines primary interactivity and branded elements","group":"brand","cssVariable":"--color-vivacious-pink"},{"name":"Frost Canvas","hex":"#f6f2ee","role":"Primary page background, footer background, and subtle secondary button backgrounds. It provides a warm, soft base; Hero section and key visual backgrounds – a soft, multi-hued gradient establishing a playful and spacious atmosphere","group":"neutral","gradient":"linear-gradient(225deg, #f6f2ee 0%, #ffc8c6 10%, #edd8f8 20%, #ddbef8 30%, #ce9afa 40%, #c473f3 50%, #b258e7 60%, #9c3ae7 70%, #7e24dd 80%, #5a19d0 90%, #2f07b8 100%)","cssVariable":"--color-frost-canvas"},{"name":"Pitch Black","hex":"#000000","role":"Deepest text for headlines and critical user interface elements, providing absolute contrast. Also used for dark component backgrounds and shadows","group":"neutral","cssVariable":"--color-pitch-black"},{"name":"Deep Graphite","hex":"#111111","role":"Card backgrounds, section headers, and dark surface accents","group":"neutral","cssVariable":"--color-deep-graphite"},{"name":"Coal Text","hex":"#202126","role":"Headline text for secondary sections","group":"neutral","cssVariable":"--color-coal-text"},{"name":"Pale Ash","hex":"#e8e5e0","role":"Subtle borders and dividers, providing visual structure without harsh lines","group":"neutral","cssVariable":"--color-pale-ash"},{"name":"Cloud White","hex":"#ffffff","role":"Input fields, content backgrounds within cards, and for text on dark backgrounds","group":"neutral","cssVariable":"--color-cloud-white"},{"name":"Slate Gray","hex":"#414040","role":"Input field text, placeholder text, and muted body copy","group":"neutral","cssVariable":"--color-slate-gray"},{"name":"Light Taupe","hex":"#e2dcd6","role":"Delicate borders and secondary structural elements","group":"neutral","cssVariable":"--color-light-taupe"},{"name":"Light Graphite","hex":"#353535","role":"Darkest background for subtle overlays or components","group":"neutral","cssVariable":"--color-light-graphite"}],"typography":[{"role":"The primary typeface for all text. Its weights are used for impactful headlines at larger sizes and for clear, concise body text. The tight letter spacing for display sizes gives it a modern, compact feel.","sizes":"14px, 16px, 18px, 26px, 30px, 70px, 79px","family":"Inter","weight":"400, 500, 600, 700, 900","weights":[400,500,600,700,900],"lineHeight":"1.00, 1.15, 1.19, 1.20, 1.23, 1.33, 1.70","substitute":"system-ui, sans-serif","letterSpacing":"-0.002"},{"role":"Used for accessibility-focused elements like button labels and form inputs, providing robust legibility.","sizes":"13px, 15px, 16px, 20px","family":"Arial","weight":"400, 600, 700","weights":[400,600,700],"lineHeight":"1.20, 1.40","substitute":"Helvetica Neue, Helvetica, sans-serif"}],"spacing":{"radius":{"tags":"999px","cards":"44px","images":"16px","buttons":"99px"},"elementGap":"10px","sectionGap":"113px","cardPadding":"12px","pageMaxWidth":"1500px"},"radius":{"tags":"999px","cards":"44px","images":"16px","buttons":"99px"},"guidelines":{"do":["Always use a generous `sectionGap` of 113px to maintain spaciousness between primary content blocks.","Apply `border-radius: 44px` to article cards and larger UI containers to soften surfaces and align with the playful aesthetic.","Utilize 'Vivacious Pink' (#ff2e95) exclusively for primary calls to action, active navigation states, and key interactive highlights.","Ensure all primary headings use Inter font with `letter-spacing: -0.002em` to achieve a compact, signature appearance.","Prioritize 'Frost Canvas' (#f6f2ee) for main page backgrounds to maintain a light and airy feel.","Employ the dual shadow `rgba(0, 0, 0, 0.22) 0px 32px 80px 0px, rgba(0, 0, 0, 0.08) 0px 2px 8px 0px` for elevated cards.","Use 'Midnight Ink' (#0f172a) for body text and secondary element borders for strong contrast and clarity."],"dont":["Do not use dark backgrounds for sections that contain extensive body copy; maintain a light background to preserve readability.","Avoid arbitrary border radii; stick to the established system tokens: 44px for cards, 99px for buttons, 16px for images.","Never introduce new chromatic colors outside of 'Vivacious Pink' (#ff2e95) and the brand gradient for UI elements.","Do not use a default system font for any body text or headings; 'Inter' is paramount for brand identity.","Avoid dense, information-heavy blocks without sufficient padding or `elementGap` of at least 10px.","Do not add any additional box-shadows to elements other than cards; rely on the subtle elevation provided by background color differences."]}}