Preview image. Unlock full-res
Vibrant, rounded play-world. All surfaces are soft, every color is a smile.
This design system feels like a playful, vibrant activity center for the mind. A maximalist use of saturated primary and secondary colors, especially the 'Sunshine Yellow' background, instantly communicates an optimistic and engaging environment. Rounded shapes on cards and buttons, paired with a custom rounded display font, create an approachable, friendly aesthetic. The visual energy is high, reflecting a dynamic and supportive approach to therapy.
Always use 'Sunshine Yellow' (#fdcb40) as the primary background color for pages and major sections to maintain a high-energy, positive mood.
Apply Action Orange (#fd4401) exclusively for primary calls-to-action to maximize impact and user engagement.
Ensure all interactive elements like buttons and key cards have a 23.81px or 47.62px border radius, creating a consistent soft and approachable feel.
Use ABC Diatype Rounded Plus for all UI text, such as navigation, buttons, and card titles, keeping its -0.02em letter spacing for a compact, friendly look.
Employ Robuck Rounded at 62px and above for major display headlines, leveraging its low line height (0.8) to create distinctive, stacked typographic compositions.
Utilize a generous 48px padding within cards to ensure sufficient white space and legibility in information-dense areas.
Integrate the vibrant accent colors like 'Ocean Blue' (#006cff), 'Bubblegum Pink' (#f780d4), and 'Teal Splash' (#04c6c5) primarily in illustrations and decorative elements, carefully balancing their intensity.
Do not use sharp corners; ensure all UI elements such as cards, buttons, and badges adhere to the specified radii, typically 23.81px or 47.62px.
Avoid generic system fonts for prominent headlines; always prioritize Robuck Rounded for its unique, playful character at display sizes.
Do not desaturate the primary brand colors; the system thrives on vivid hues like 'Sunshine Yellow' and 'Action Orange'.
Avoid excessive text density; break up content into manageable blocks with ample spacing, referencing the 48px card padding and 38px section gaps.
Do not introduce new primary or accent colors outside the defined palette; the current set is carefully chosen for its energetic harmony.
Refrain from using shadows for elevation; rely on color contrast and distinct background colors to differentiate surfaces and sections.
Do not use letter-spacing: normal for text set in ABC Diatype Rounded Plus; always apply -0.02em to maintain its characteristic compact appearance.
