ClassPass

This design system feels energetic and clear, like a fitness studio bathed in natural light with sharp accents. The bright blue calls attention to interactive elements, contrasting with a clean, predominantly achromatic background. Rounded corners and generous spacing soften the overall feeling, making the diverse offerings appear approachable and user-friendly, rather than overwhelming. Prioritize Sky Blue (#0055ff) for all primary interactive elements like buttons and active navigation states. Use a 9999px border-radius for all primary and secondary buttons to maintain the 'pill' aesthetic. Apply 20px border-radius for larger card-like components to soften their appearance. Ensure headings use 'circuit' font at 42px/1.05 for primary messages, with 'norms' font for all other text sizes. Maintain high contrast text with Midnight Ink (#000000) or Deep Graphite (#111111) on white backgrounds or Cloud White (#ffffff) on Sky Blue. Utilize 8px as the base unit for all minor spacing, building up to 16px, 24px, and 40px for larger internal element separation. Use Sunshine Yellow (#fce172) exclusively for banner-type announcements to capture immediate attention. Do not introduce new color hues; stick to Sky Blue, Sunshine Yellow, and the established neutrals. Avoid using square buttons or applying radii other than 9999px for interactive elements. Do not use 'circuit' font for body text or small labels; it is reserved for prominent headings. Avoid subtle contrast text on white backgrounds; always use Midnight Ink or Deep Graphite to ensure readability. Do not deviate from the established padding values; consistent spacing is key for visual harmony. Do not use shadows for elevation except where explicitly defined; depth is primarily created through background surfaces. Do not use background images directly on content cards; instead, feature photography as a mosaic behind UI elements.