
Preview image. Unlock full-res
Playful, energetic cards
Coco employs a vibrant, playful aesthetic with a strong emphasis on card-based layouts and bold accent colors. The design system layers bright, saturated hues onto a clean, spacious light background, creating an energetic and approachable feel. Typography is assertive and compact, reinforcing a sense of efficiency, while generously rounded corners on components soften the overall impression. Prioritize Sky Blue (#23c4f7) for primary calls to action, maintaining its vividness against neutral backgrounds. Use 24px border-radius consistently for all card-like containers to reinforce the soft, approachable aesthetic. Employ GT America 700 (bold) for all main headings (32px, 64px) using Ink Black (#000000) or Canvas White (#ffffff) for strong contrast. Apply -0.0200em letter-spacing to display text (64px) and -0.0100em to subheading (24px) and heading (32px) text to ensure a compact, controlled typographic rhythm. Maintain generous 40px or 48px internal padding for cards to provide ample breathing room for content. Incorporate Vivid Orchid (#da4dfd) and Fresh Mint (#00d797) as accent backgrounds for cards to create visual variety and playful energy, ensuring text contrast remains legible. Do not introduce new border-radius values; stick to 24px for cards, 100px for buttons, 32px for images, and 3px for links. Avoid using multiple font families; all text should be GT America or its substitute. Do not add drop shadows to cards; the design relies on bold background colors and flat surfaces for visual hierarchy. Do not use dark backgrounds for entire sections, except when explicitly required for accent or specific content blocks; the theme is predominantly light. Avoid small, subtle text for calls to action; ensure action text uses GT America 500 and high contrast colors like Canvas White (#ffffff) on Sky Blue (#23c4f7).









