Passionfroot

Passionfroot embodies a light and energetic aesthetic, juxtaposing highly structured grids and data visualizations against whimsical, vibrant accent colors and playful 3D illustrations. The system balances professional clarity with an approachable, almost fantastical user experience. Surfaces are primarily crisp white, providing a clean canvas for sharp, purposeful typography and a spectrum of vivid hues that punctuate the interface with a soft, inviting pop. Use new-kansas for all headings and large display text, ensuring its unique character anchors key messages. Prioritize Canvas White (#ffffff) as the primary surface color for all interactive components to maintain clarity and contrast. Employ the full palette of vibrant accent colors (Lilac Dream, Cherry Blossom, Sunset Orange, Sky Teal) as full card backgrounds or prominent data visualizations to create playful segmentation. Apply all shadows with the rgb(237, 234, 228) 0px 0px 0px 1px, oklch(0.23 0.002 98 / 0.04) 0px 1px 1px -0.5px, oklch(0.23 0.002 98 / 0.04) 0px 3px 3px -1.5px, oklch(0.23 0.002 98 / 0.04) 0px 6px 6px -3px, oklch(0.23 0.002 98 / 0.02) 0px 12px 12px -6px stack for elevated UI elements. Maintain a default border-radius of 12px for most cards, buttons, and larger interface elements, reserving 9999px for pill-shaped elements. Utilize 8px as the default elementGap for tight-knit UI compositions, scaling up to 24px sectionGap for content separation. Use Nunito Sans with weights 400-700 and its specified letter spacing for all body copy and functional text to ensure readability. Align all page content to a max-width container, letting the hero stretch full-bleed as a visual anchor. Use Deep Sea Blue (#2c91af) and Royal Purple (#8200db) for interactive icon accents and highlighted text to guide user action. Employ Subtle Stone (#d8d6ce) for all hairline borders and input field outlines to maintain a light, unobtrusive visual structure. Incorporate Emerald Green (#58df8c) or Candy Red (#ee5968) as background fills for cards that convey semantic success or error states. Avoid using purely decorative, highly saturated background gradients on general UI components; reserve color for solid blocks and purposeful data visualization. Do not deviate from the specified Nunito Sans and new-kansas font families; do not introduce additional typefaces. Do not use dark backgrounds for primary content areas; the system is designed around a light-themed canvas. Refrain from using hard, angular corners; all components should adopt the characteristic 12px or 9999px border radii. Do not introduce heavy, opaque drop shadows; stick to the light, multi-layered shadows specified for subtle elevation. Avoid arbitrary color usage; every use of a chromatic color should have a clear purpose—either decorative accent, semantic indicator, or data visualization. Do not implement excessively sparse layouts. The system favors a compact density with intentional spacing for clarity, not emptiness.