Candy design skill for AI agents
Overview
Candy is a playful candy-shop design system skill file for AI coding assistants. It creates cheerful interfaces with soft pink surfaces, deep wine brand color, bubblegum accents, rounded cards, candy-gradient buttons, and bold Ubuntu typography.
The system is high-contrast, sweet, and expressive without losing component discipline. It works well when generated UI should feel joyful, consumer-friendly, and visually distinct.
Design Tokens
Color Palette
Candy uses a wine and bubblegum palette that stays legible across light and dark modes.
| Token | Value | Purpose |
|---|---|---|
| Surface | #FAEBF1 |
Soft pink page and section background |
| Panel | #F5D6E3 |
Card surfaces and derived component layers |
| Brand | #4F1135 |
Primary brand color, buttons, and strong accents |
| Brand Strong | #3A0B27 |
Deep wine contrast, borders, and active states |
| Heading | #3C0D28 |
High-emphasis headings |
| Body | #6E4258 |
Paragraphs, labels, and supporting copy |
Dark mode deepens the palette into wine surfaces with brighter pink brand accents. Tokens should be used consistently so the UI stays candy-like rather than becoming generic pink.
Typography
Candy uses Ubuntu across headings, body, buttons, and labels. The rounded sans-serif character reinforces the sweet visual tone while staying clear enough for forms, navigation, and product content.
Headings use bold weight, body text stays readable, and filled button labels use medium weight with a subtle wine-toned text shadow.
Spacing and Shape
Candy uses an 8px spacing rhythm, 96px symmetric section spacing, 1152px containers, and generous rounded components. Cards use 24px radius, while buttons use 8px corners or full pills.
Layouts should maintain one shared pink section surface rather than alternating backgrounds. Component depth comes from derived surface steps, borders, and soft wine-toned shadows.
Component Language
Cards are rounded pink panels with 1px borders and soft shadows. Brand buttons use a layered candy gradient: a bubblegum-to-wine fill framed by a lighter-to-darker gradient rim. Hover, focus, disabled, and active states should be explicit so the playful style remains usable.
Best For
Use Candy for consumer apps, playful SaaS, creator tools, event pages, product launches, games-adjacent UI, and generated interfaces that need a bright, memorable, high-energy visual identity.