{"id":"f93ac72e-73b2-4b2c-80eb-351ddfa56f4d","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","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":"Playful","summary":"Gradient Playground","description":"Playful adopts a vibrant yet refined aesthetic with a spacious layout that emphasizes content clarity. Backgrounds feature subtle gradients, creating soft washes of color. Typography is predominantly dark and compact, giving a serious counterpoint to the playful accent colors. Interactive elements utilize a vivid pink, contrasting against a canvas dominated by off-white, imparting an energetic yet sophisticated feel.","industry":"productivity","colorScheme":"light","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"},{"name":"Vivacious Pink","hex":"#ff2e95","role":"CTA buttons, accented links, and vibrant highlights — this vivid pink defines primary interactivity and branded elements","group":"brand"},{"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%)"},{"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"},{"name":"Deep Graphite","hex":"#111111","role":"Card backgrounds, section headers, and dark surface accents","group":"neutral"},{"name":"Coal Text","hex":"#202126","role":"Headline text for secondary sections","group":"neutral"},{"name":"Pale Ash","hex":"#e8e5e0","role":"Subtle borders and dividers, providing visual structure without harsh lines","group":"neutral"},{"name":"Cloud White","hex":"#ffffff","role":"Input fields, content backgrounds within cards, and for text on dark backgrounds","group":"neutral"},{"name":"Slate Gray","hex":"#414040","role":"Input field text, placeholder text, and muted body copy","group":"neutral"},{"name":"Light Taupe","hex":"#e2dcd6","role":"Delicate borders and secondary structural elements","group":"neutral"},{"name":"Light Graphite","hex":"#353535","role":"Darkest background for subtle overlays or components","group":"neutral"}],"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"}],"typeScale":[{"role":"caption","size":13,"lineHeight":1.4,"letterSpacing":0},{"role":"body","size":16,"lineHeight":1.2,"letterSpacing":-0.002},{"role":"subheading","size":26,"lineHeight":1.33,"letterSpacing":-0.002},{"role":"heading-sm","size":30,"lineHeight":1.23,"letterSpacing":-0.002},{"role":"heading","size":70,"lineHeight":1.15,"letterSpacing":-0.002},{"role":"display","size":79,"lineHeight":1,"letterSpacing":-0.002}],"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."]},"components":[{"name":"Ghost Button","role":"Navigational or secondary actions where visual weight should be minimal."},{"name":"Primary Action Button","role":"Main calls to action."},{"name":"Circular Secondary Button","role":"Icon-only or small, focused interactive elements."},{"name":"Feature Card","role":"Displaying product features or content blocks."},{"name":"Input Field","role":"Collecting user data."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference: \ntext: #0f172a\nbackground: #f6f2ee\nborder: #e8e5e0\naccent: #ff2e95\nprimary action: #ff2e95 (filled action)\n\nExample Component Prompts:\nCreate a Primary Action Button: #ff2e95 background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n\nCreate a Feature Card: Background 'Deep Graphite' (111111), 44px border-radius, shadow 'rgba(0, 0, 0, 0.22) 0px 32px 80px 0px, rgba(0, 0, 0, 0.08) 0px 2px 8px 0px'. Content inside should use Inter 16px weight 400 in 'Cloud White' (ffffff) for body, with 12px card padding. \n\nCreate a Ghost Button: Background transparent, 'Midnight Ink' (0f172a) text using Arial 16px weight 400. Padding: 12px vertical, 32px horizontal. Used for secondary navigation like 'When will it be available?' "}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777518617395-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777518617395-thumb.jpg"},"similarStyleIds":["3e5c272b-8d68-40d8-9726-b4d6914b4b16","6f8a45e4-d1a4-4b6d-b857-a4dc70dd1b52","9117a4f5-6171-44ad-aa85-a387a5d80620","9fecf7d6-b717-49ca-8edc-b10d6110b21c","e6a3facd-791c-4cc6-868d-2c6382d3cb0a","da332394-784c-4df2-9e66-c3f7b1d28f28","0c77bb2a-c7cd-499b-b5cd-90268eefe906","b5ca4e9a-2322-4796-b4c5-3b3bf194821f","3677bc04-7461-4aa4-aec7-5291bac41b0b","48e5de76-05d5-4c4e-a269-c7c245b291ec","d67e1407-6d16-47e8-89cf-22f5c5f2dd88","9342e89b-c2fe-4acf-9993-53b44e0c13b5","ad529e8a-3427-4152-bed9-6ec5097f25b6","75fdb89f-ca64-41b3-af36-7a78bd09448e","6b201ccd-16ae-4c2d-84bb-498f7cb568dd","47c9e353-bed3-4d6c-8316-63a2db5cc377","9ff62d34-e48d-4fcb-9fd9-c018e2747542","db451eca-8de6-43a9-a5d5-35271befdffd","c14bfde7-6f08-4b54-bd9b-39989d10cfef","736830b5-90b1-47b0-99dd-d79454a0d22a"],"exports":{"designMdUrl":"/references/refero/f93ac72e-73b2-4b2c-80eb-351ddfa56f4d/design.md","tokensJsonUrl":"/references/refero/f93ac72e-73b2-4b2c-80eb-351ddfa56f4d/tokens.json","tailwindV4Url":"/references/refero/f93ac72e-73b2-4b2c-80eb-351ddfa56f4d/tailwind-v4.css","cssVariablesUrl":"/references/refero/f93ac72e-73b2-4b2c-80eb-351ddfa56f4d/tailwind-v4.css"}}