SuperHi

This system expresses a playful, creative energy through a vibrant, almost primary color palette paired with a functional, crisp sans-serif typography. Geometric and organic shapes in vivid hues act as visual anchors and decorative elements. The intentional use of deep, saturated blue as the primary interactive color, alongside a large, friendly radius for buttons and inputs, creates an approachable but authoritative digital learning environment. Use Electric Blue (#2727e6) for all primary call-to-action buttons and active states to maintain brand consistency. Prioritize Haas Grot Disp weight 400 with negative letter-spacing for all display-level headings to capture the system's distinctive visual tone. Apply the 32px or 48px border-radius to buttons and the 5000px (pill) radius for inputs and badges for a consistent soft, approachable feel. Leverage the full palette of accent colors (Lemon Zest #ffda00, Vivid Green #16ab59, Coral Glow #ffbac4, Cool Aqua #91d8ec) for geometric decorative shapes and illustrations to enhance visual interest. Maintain comfortable spacing: use 8px for elementGap between inline items and cardPadding of 16px where content is contained. Do not use generic square buttons; always apply either a 32px, 48px, or 5000px border-radius to interactive elements. Avoid applying heavy drop shadows; the design relies on bold shapes and colored backgrounds for depth, not elevation effects. Do not use monochromatic schemes; the brand identity is built on a diverse and vivid accent color palette. Refrain from using system fonts like Arial or Helvetica; Haas Grot Text, Haas Grot Disp, and Martian Mono are critical for the brand's unique typographic voice. Do not use text links with underlines; use the Text Link Button component which typically has no decoration.