SuperHi Plus

SuperHi Plus employs a vibrant and high-contrast design language, built on a foundation of deep blue and crisp white. Surfaces are predominantly flat, with color providing separation and hierarchy rather than shadows or complex textures. Typography is compact and direct, ensuring quick communication, while generous spacing frames content with confidence. The overall impression is energetic, modern, and direct, using bold color as a primary structuring element. Use SuperHi Blue (#0033e5) as the primary background for content sections and cards to maintain brand identity. Utilize Canvas White (#f0f7ff) for all body text and informational elements on SuperHi Blue backgrounds to ensure high contrast and readability. Apply a 16px border-radius to all cards and primary buttons, transitioning to 72px for pill-shaped buttons to vary visual emphasis. Employ the Haas Grot Disp Web font at weight 400 for all text, relying on the type scale for hierarchy rather than varied weights. Maintain a comfortable density with element gaps ranging from 6px to 16px, and card/section padding around 22-24px. Use Accent Highlight Blue (#527ceb) specifically for interactive states like button hovers to provide clear feedback. Structure pages with alternating sections of SuperHi Blue and Canvas White to create a clear visual rhythm. Avoid using multiple font weights; stick exclusively to Haas Grot Disp Web weight 400 for consistency. Do not introduce drop shadows for elevation; rely on color and border treatments for component separation and visual surfacing. Refrain from using heavily saturated colors outside of the defined brand and accent blues. Do not use generic black (#000000) for text on blue backgrounds; always use Canvas White (#f0f7ff) for optimal contrast. Avoid large imagery that breaks the grid or draws focus from the core UI; keep visuals concise and contained. Do not use generic, unrounded rectangles; ensure all interactive elements and containers have a defined border-radius from the token system. Do not vary paragraph line-heights excessively; adhere to the defined line-height values appropriate for each text size.