# Tactile Digital / Deformable UI > Glossy jelly controls with chrome rims that squash and stretch under your finger — UI that feels like a soft toy. - Nickname: Jelly buttons - Also called: Deformable UI, Squishy UI, Jelly UI, Tactile digital - Category: Soft & Dimensional - Moods: Playful, Bold, Techy, Friendly - Industries: Gaming, Kids & Family, Creative & Portfolio, Web3 & Crypto, Media & Entertainment - Style page: https://uilingo.dev/styles/tactile-digital-deformable-ui/ 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) ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Tactile Digital / Deformable UI" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line Glossy jelly controls with chrome rims that squash and stretch under your finger — UI that feels like a soft toy. Design keywords: jelly buttons, squash and stretch, chrome rim, puffy clay cards, glossy highlight blob, springy overshoot, candy neon on grape, wobble on hover. ## Visual language Controls that look and behave like soft, glossy toys on a deep grape night (#170F2E). Buttons, icons and active states are saturated jelly — lime, hot pink, cyan — lit from above with a bright highlight blob, darker at the bottom and resting on a 5px darker underside. Cards and bars are puffy clay slabs wrapped in a polished chrome rim; secondary buttons and the eyebrow tag are pure chrome. Interaction is physical: hover wobbles the element, press squashes it wide and flat, release springs back with overshoot. ## Signature details (must be visible) - Jelly fill for colour C (C = lime #B4F03C, pink #FF4FA8, cyan #3EE0FF…): background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb,C 55%,#fff) 0%, C 46%, color-mix(in srgb,C 70%,#000) 100%); box-shadow: inset 0 -5px 9px color-mix(in srgb,C 50%,#000), inset 0 3px 4px rgba(255,255,255,.55), 0 5px 0 color-mix(in srgb,C 42%,#000), 0 12px 20px rgba(5,0,20,.42) - Gloss blob: ::after with border-radius 999px and linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.08)). On tiles, icons and cards ≥96px tall: top 3px, left/right 14%, height 40%. On buttons: top 2px, height 30%, max-height 12px (small buttons 24% / 8px), placed UNDER the label (button isolation:isolate, ::after z-index:-1) so Thai upper vowels and tone marks never sit inside the highlight. Highlighted pricing card: top band only — height 18%, max-height 24px (it must end above the plan name), left/right 10%, opacity .45 - Chrome rim: a decorative 3px border that overrides the 2px border token — border: 3px solid transparent; background: padding-box, linear-gradient(160deg, #FFF, #B9BFD8 20%, #5B6285 42%, #EEF0F8 56%, #8B92B0 76%, #F6F7FC) border-box - Squash on press: transform: translateY(4px) scale(1.1,.84) over 90ms; release springs back over 320ms with cubic-bezier(.34,1.56,.64,1) - Wobble only the hovered element: keyframes scale(1.09,.9) → (.93,1.07) → (1.04,.96) → (.98,1.02) → 1 over 620ms, inside prefers-reduced-motion: no-preference. No idle wobble; an idle bob is allowed on at most 2 decorative gumdrops (translateY ±6px, 3s ease-in-out), disabled under reduced motion - Display type in Rubik/Kanit 800: background: linear-gradient(180deg,#FFF6FF 0 49%,#CBBDEE 51% 100%) (lavender = textMuted token); -webkit-background-clip:text; background-clip:text; color:transparent; filter: drop-shadow(0 5px 0 #0B0618). Never use text-shadow with clipped text — it paints over the gradient - Sunken 'goo wells' for inputs, tracks and progress bars: inset 0 4px 9px rgba(0,0,0,.35) on surface-2 (#21163F) ## Design tokens — use these exact values Colours (dark mode): - background #170F2E - surface #2A1D52 - surface-2 #21163F - text #FFF6FF - text-muted #CBBDEE - primary #B4F03C (text on it #162400) - secondary #FF4FA8 (text on it #2B0018) - accent #3EE0FF - border #4A3A80 - success #5BEA8A · warning #FFC83D · danger #FF5C7A - chart series #B4F03C, #FF4FA8, #3EE0FF, #FFC83D, #A98BFF Radius: sm 14px, md 20px, lg 28px, xl 36px, pill 999px Border width: 2px Shadows: sm `inset 0 -3px 0 rgba(0,0,0,0.22), inset 0 2px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(5,0,20,0.35)`, md `inset 0 -6px 14px rgba(0,0,0,0.28), inset 0 4px 10px rgba(255,255,255,0.08), 0 12px 26px rgba(5,0,20,0.45)`, lg `inset 0 -10px 20px rgba(0,0,0,0.3), inset 0 6px 14px rgba(255,255,255,0.1), 0 22px 44px rgba(5,0,20,0.55)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 320ms cubic-bezier(.34,1.56,.64,1) ## Typography (Latin + Thai) - Headings: Rubik 700/800 with Thai fallback Kanit 700/800 - Body: Rubik 400/500/600 with Thai fallback Prompt 400/500/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&family=Kanit:wght@700;800&family=Prompt:wght@400;500;600&display=swap - CSS stacks: heading `"Rubik", "Kanit", system-ui, sans-serif`; body `"Rubik", "Prompt", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.9rem, 6.5vw, 5.25rem), heading weight 800, heading tracking -0.02em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Kanit’s heavy, rounded-corner strokes match Rubik’s soft-cornered bold weights; loopless Prompt keeps the same geometric, friendly body rhythm. ## Components - Primary button: lime jelly capsule with dark text #162400; accent: pink jelly with #2B0018 text; danger: red jelly #FF5C7A with dark text #2B0018 (≈6:1; white fails at 2.97:1); secondary: chrome capsule (silver gradient, dark text, white text-shadow); all wobble on hover and squash on press - Cards: clay slab (top lighter, bottom darker) inside the 3px chrome rim, radius 28px; hover lifts 6px and stretches slightly. Highlighted pricing card is pink jelly with dark text — declare its jelly background and jelly box-shadow AFTER the base card rules, or the card's clay shadow wins - Feature icons: 52px jelly squircles cycling lime, pink, cyan, yellow, violet, each with its own gloss blob - Inputs: sunken capsule wells; on focus the border turns into a chrome rim with a 0 0 0 5px rgba(180,240,60,.3) lime halo - Switch: sunken track; thumb is a chrome ball that widens (squashes) while pressed; checked track turns into lime jelly - Segmented control: sunken track with a chrome selected pill; tabs: selected tab is a lime jelly pill - Badges: small gummy pills with a top highlight and a 2px dark underside; chips: sunken pills, active chip is pink jelly scaled to 1.06 - Nav, top bar and tab bar: clay slabs edged with a 3px chrome line; logo is a chrome sphere - Charts: 5px lime line with a hard drop shadow 0 4px 0, area fill a gradient from color-mix(in oklch,#B4F03C 70%,#2A1D52) at 85% opacity to transparent — mix in oklch, because alpha-blending lime over grape turns muddy grey, capsule bars with a left-to-right gloss, round-capped thick donut, pill-shaped heatmap cells with inner shading ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: a bento grid where the headline is the largest tile and stats/features fill the others. Navigation: bar style. Sections in order: hero → features → stats → showcase → testimonials → pricing → faq → cta. Feature section as grid. Use a bento hero: a big clay copy tile with jelly CTAs, two stat tiles decorated with floating gumdrop jellies (the only idle motion), and a pink jelly feature tile. Sections sit on the dark grape canvas (#170F2E) with a 26px dot grid and three glows: radial-gradient(28% 30% at 12% 18%, rgba(180,240,60,.22), transparent 70%), radial-gradient(30% 32% at 88% 12%, rgba(255,79,168,.26), transparent 70%), radial-gradient(34% 36% at 70% 92%, rgba(62,224,255,.18), transparent 70%). Alternate sections are sunken wells (radius 48px); the stats well is compact (≈42px block padding). Showcase: a clay panel with lime-jelly tabs, a glossy line-chart card and two KPI tiles. Pricing, testimonials and FAQ items are chrome-rimmed clay cards; the CTA band is a full pink jelly slab with a lime jelly button. Dashboards use a chrome-edged top nav where the active link is a lime jelly pill, KPI numbers in lime with hard shadows, and thick glossy charts. ## Content Use realistic product copy (fictional brand) suited to: Casual and mobile games, launchers and reward screens. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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) - Matte pastel clay on a light background — that is Claymorphism - Flat chunky buttons with only a solid bottom border and no gloss (Gamified Playful) - Realistic 3D renders, perspective scenes or photographic lighting (3D Hyperrealism) - Animating width, height or margins — deform only with transform: scale() - Low-saturation or muted colours; jelly must be candy-bright - Gloss that covers the label, white text on light jelly (pink/red/lime), or idle wobble on buttons ## Stack notes One self-contained HTML file with a