Tactile Digital / Deformable UI
Also called: Deformable UI, Squishy UI, Jelly UI, Tactile digital
Glossy jelly controls with chrome rims that squash and stretch under your finger — UI that feels like a soft toy.
Design keywords
Say these words to ask for this style.
Tactile Digital makes every control look and behave like a soft, glossy object. Buttons are saturated jelly with a bright highlight blob on top and a darker underside; cards are puffy clay slabs wrapped in a polished chrome rim. Interaction is physical: hover wobbles, press squashes the element wide and flat, release springs back with overshoot. The base is a deep grape night so the candy colours and chrome glints pop.
Best for
- Casual and mobile games, launchers and reward screens
- Creator and music toys, sticker/emote apps
- Gen-Z consumer apps that want haptic-feeling UI
- Promo and loyalty campaigns with big CTAs
Avoid for
- Banking, legal and healthcare forms
- Dense data tools where motion distracts
- Users who rely on reduced motion (provide a static fallback)
✓ Do
- Squash on press: translateY(4px) scale(1.1,.84) in 90ms, then spring back with cubic-bezier(.34,1.56,.64,1)
- Give every button a top highlight blob and a 5–6px darker underside
- Wrap cards and avatars in a 3px chrome gradient rim (decorative, overrides the 2px border token)
- Keep text on solid, high-contrast jelly — the gloss band is ≤30% of button height and sits under the label
✕ Don't
- Don’t use flat, matte fills — everything should catch light
- Don’t animate layout properties; deform with transform only
- Wobble only the hovered element; no idle wobble except ≤2 decorative gumdrops
- Don’t use pastel, low-saturation colour (that reads as claymorphism)
Not to be confused with
On mobile
This is where the style shines: press = squash, release = spring. Use the jelly look for the primary CTA, the active tab bubble and the featured card; keep list rows flat on a single puffy card so scrolling stays smooth. Pair the squash with a light haptic tick on native.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.