Colorful

Colorful is a saturation-forward design language built for products that want to feel joyful, energetic, and human. It leans into bold hue contrasts, playful gradients, and tinted shadows that make the whole interface feel like it is glowing from within. Reach for it when you want to project optimism and personality rather than corporate restraint — consumer apps, creator tools, and brands that are not afraid to be loud.

Design principles

• Color carries the hierarchy. Use hue and saturation, not only size, to signal what matters most on a screen.
• Contrast is intentional, never muddy. Vibrant accents always sit on calm near-white or deep surfaces so text stays legible.
• Gradients are a flavor, not wallpaper. Apply them to focal elements like primary buttons and hero accents, and keep large backgrounds clean.
• Rounded, friendly geometry. Generous 16px radii soften the high energy so it reads as approachable rather than chaotic.
• Every color earns its contrast. No accent ships without passing AA against its background.
• Delight lives in the details. Micro-interactions, color bursts, and tinted glows reward attention.

Color

The foundation stays bright and airy: a pure white #FFFFFF background with a barely-pink #FFF5FB surface for cards, giving the saturated accents room to sing. The primary action color is a hot pink #FF4D8D, balanced by a violet secondary #7C3AED, with cyan #06B6D4, amber #FBBF24, and green #22C55E rounding out the playful swatch set. Foreground text is a deep plum-black #1A1024 for warmth, with muted text at #7A6E86 and hairline borders in #F0D9EC.

Light-mode token reference:

• Background #FFFFFF, Surface #FFF5FB, raised surface #FFFFFF with a colored shadow.
• Primary #FF4D8D, Primary hover #F0356F, Primary pressed #D62760.
• Secondary #7C3AED, Accent cyan #06B6D4, Accent amber #FBBF24, Success #22C55E.
• Foreground #1A1024, Muted #7A6E86, Border #F0D9EC, Focus ring #FF4D8D at 40% alpha.

For dark mode, drop the background to a rich #150B1F and surfaces to #241433, keep the same saturated accents (they read beautifully on dark), lift foreground to #FBEFF7, and shift borders to #3A2A4D. Tinted shadows become subtle glows rather than drop shadows.

Dark-mode token reference:

• Background #150B1F, Surface #241433, Border #3A2A4D.
• Primary #FF5C97 (brightened for dark), Secondary #9466F5, Cyan #22D3EE, Amber #FCD34D, Success #4ADE80.
• Foreground #FBEFF7, Muted #B5A6C2.

Gradient recipes: primary CTA = linear-gradient(135deg, #FF4D8D 0%, #7C3AED 100%); hero ambient = radial-gradient(circle at 30% 20%, rgba(255,77,141,0.18), transparent 60%). Use no more than two gradients per viewport so they stay special.