Gummy Candy
Glossy gummy gradients, jelly-wobble buttons and a sugar-pink canvas.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A candy-shop window: strawberry, orange, grape and mint gradients with a wet gloss highlight across every button, fat rounded headlines and cards that wobble like jelly when you touch them. Macro photography of translucent gummies glowing in the light. Sweet without being saccharine.
Gummy Candy borrows from sweet-shop windows, fruit-gum packaging and the glossy, translucent look of jelly sweets under light. A sugar-pink canvas carries soft gradient blobs in strawberry, orange, grape and mint; buttons are juicy gradient pills with a wet white highlight across the top; cards are big, soft and rounded at 32px. Motion is bouncy and elastic, with jelly squash on entrances. Photography is macro, backlit and glowing. It should feel indulgent, happy and tactile.
Principles
- Every action looks edible: gradient fill plus a glossy top highlight.
- Round to 32px on cards and 999px on buttons; nothing is sharp.
- Motion squashes and wobbles; never linear.
- Gradients flow pink → orange → grape → mint, in that order.
- Backlit macro photography makes the product glow.
Motion
Cards land with a jelly squash: they overshoot to 104%, squish to 98% and settle. On hover, buttons wobble horizontally twice like a gummy bear being poked, and the flavour marquee scrolls in Titan One.
Do & don't
Do
- ✓ Add a white gloss highlight to every gradient button.
- ✓ Use elastic easing with overshoot on entrances.
- ✓ Give each feature card a flavour colour blob.
Don't
- ✕ Don't use hard or black shadows.
- ✕ Don't use sharp corners.
- ✕ Don't use uppercase labels.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 373 lines of DESIGN.md in total.
More like this
All Playful →
Comic Panels
No. 077Ben-Day dots, thick ink panels and speech bubbles. Every section is a splash page.
Sticker Pop
No. 079Die-cut stickers slapped on at jaunty angles: coral, cobalt and sunshine on cream.
Toy Blocks
No. 080Primary-colour building blocks with studs on top and a satisfying 6px click.
Doodle Notebook
No. 097Ballpoint doodles on ruled paper, a red margin and sticky notes for the important bits.
Memphis Party
No. 098Squiggles, confetti triangles and clashing colour: the 1981 design party, still going.
Soft Clay
No. 099Puffy clay cards, plasticine 3D renders and lavender light. Squeezable interfaces.