# Micro-interactions > A calm, clean interface where every control answers back: ripples, drawn checkmarks, bouncy toggles, pinging dots and gentle hover lifts. - Nickname: Delightful feedback - Also called: Microinteraction design, Feedback-rich UI, Juicy UI - Category: Interaction‑led - Moods: Friendly, Trustworthy, Playful, Calm - Industries: Fintech & Banking, SaaS, E‑commerce, Healthcare, Startup & Tech - Style page: https://uilingo.dev/styles/micro-interactions/ Micro-interactions keep the page itself quiet — mint-white canvas, white cards, one trustworthy green — and put all the personality into tiny, functional feedback. Buttons ripple from the touch point and their arrow chip slides, checkboxes draw their tick and flash a halo, switches carry a check inside a knob that squashes when pressed, chips gain a tick when selected, live dots ping, numbers and bars settle with a small overshoot. Each animation is 150–400ms, tied to one action, and tells the user that something happened. ## Best for - Banking, payments and wallet apps where confirmation matters - Forms, checkouts and settings screens - Mobile apps with lots of toggles and taps - Product UIs that need warmth without decoration ## Avoid for - Static editorial or reading pages - Kiosks and low-power devices with laggy input - Brands that want a bold, loud visual identity ## Do - Keep feedback 150–400ms and start it on pointerdown, not after the request - Animate one property per state change (scale, translate, stroke) with a slight overshoot - Pair every animation with a non-motion cue (colour, icon, text) for reduced motion ## Don't - Don’t animate things the user did not touch - Don’t make feedback slower than the action itself - Don’t use confetti or celebration for routine actions — save it for milestones ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Micro-interactions" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line A calm, clean interface where every control answers back: ripples, drawn checkmarks, bouncy toggles, pinging dots and gentle hover lifts. Design keywords: button ripple, check-draw animation, toggle bounce, hover lift, pinging status dot, selected-state ticks, focus halo, tiny overshoot. ## Visual language A calm, trustworthy fintech-clean interface — mint-white canvas, white 16px-radius cards, one deep money green and a sunny yellow — whose personality lives entirely in feedback. Nothing moves until it is touched or changes state; then it answers within 150–400ms with a small overshoot: a ripple spreads from the finger, a tick draws itself, a toggle knob squashes and pops, a selected chip gains a check, a live dot pings, a card lifts and its icon tile tilts. Static frames still show the readiness: soft focus halos, ticks on selected states, icons inside knobs and pill indicators. ## Signature details (must be visible) - Ripple on pointerdown for buttons, chips, list rows, tabs and nav items: a currentColor circle at 22% opacity scaling 0→1 and fading over 600ms from the touch point - Checkbox tick drawn in two strokes (width 0→6px, then height 0→11px over 420ms) plus a 5px halo ring in primary at 18% - Switch: 52×30 track without border; the white knob holds a green check (on) or grey dash (off), slides with cubic-bezier(.34,1.56,.64,1) and stretches to 30px wide while pressed - Selected chips turn green-tinted with a 1px green border and a small drawn tick before the label - Live status dots and the notification badge ping: a copy scales to 2.6× and fades, three times then stops - Primary large buttons carry the arrow inside an 8px-radius translucent chip that slides 3px on hover; every button scales to .96 on press - Hover lifts: cards rise 4px with a green-tinted border and 0 18px 40px -12px green shadow; their icon tile rotates −8° and scales 1.08 ## Design tokens — use these exact values Colours (light mode): - background #F3F7F5 - surface #FFFFFF - surface-2 #E9F1ED - text #0E1D1A - text-muted #4E615C - primary #0B6E4F (text on it #FFFFFF) - secondary #FFC94D (text on it #2A1E00) - accent #FF4F70 - border #D7E3DE - success #0B8A5B · warning #B66A00 · danger #D9344F - chart series #0B6E4F, #3FC79A, #FFC94D, #FF4F70, #7A8F89 Radius: sm 8px, md 12px, lg 16px, xl 24px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(14,29,26,0.06)`, md `0 8px 20px -6px rgba(14,29,26,0.14)`, lg `0 18px 40px -12px rgba(11,110,79,0.25)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 220ms cubic-bezier(.34,1.56,.64,1) ## Typography (Latin + Thai) - Headings: Albert Sans 600/700/800 with Thai fallback Anuphan 600/700 - Body: Albert Sans 400/500/600 with Thai fallback Anuphan 400/500/600 - Mono: JetBrains Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&family=Anuphan:wght@400;500;600;700&display=swap - CSS stacks: heading `"Albert Sans", "Anuphan", system-ui, sans-serif`; body `"Albert Sans", "Anuphan", system-ui, sans-serif`; mono `"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Anuphan — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 5.4vw, 4.4rem), heading weight 700, heading tracking -0.025em (Latin only), sentence-case labels. - 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: Anuphan is a friendly, loopless geometric Thai whose round bowls and open counters match Albert Sans’s clean, approachable grotesque. ## Components - Primary button: #0B6E4F, 12px radius, white text, inner top highlight + coloured soft shadow; hover −2px; active scale .96 in 80ms; ripple on press - Secondary button: white, 1px #D7E3DE border, small shadow; hover border tints green and shadow grows - Icon buttons: circular; the bell carries an 8px pink #FF4F70 dot with a white ring that pings, and the bell wiggles twice on load - Inputs: 12px radius; hover tints the border; focus = green border + 4px halo at 18%; error = red border + 4px red halo at 12% - Tabs: pill tabs — the selected one gets a 12% green fill and green text; segmented control = sunken mint track with a raised white thumb - Badges: status badges start with a 6px dot inside a 3px halo; solid badges are yellow #FFC94D on dark text - Progress: 10px track, green fill with diagonal light stripes that crawl three times after an update - FAQ: chevron drawn with borders that rotates 180° with a springy curve; rows get a white background on hover - Charts: bars scale 4% and brighten on hover; table rows tint on hover - Mobile tab bar: the active icon sits in a 56×30 green pill that pops in with an overshoot ## 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: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → logos → features → showcase → steps → testimonials → pricing → faq → cta. Feature section as bento. Split hero with headline left and a product mock right; the page itself stays still and clean. Features in a bento with one solid green tile, a tabbed showcase, numbered steps with halo rings, pricing with yellow solid badges and a green CTA panel with a yellow button. Navigation is a light bar where the current link gets a small green dot. Dashboards use a top nav with pill items, KPI cards, a line chart, donut, table with status badges and a status list with pinging dots. ## Content Use realistic product copy (fictional brand) suited to: Banking, payments and wallet apps where confirmation matters. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Keep feedback 150–400ms and start it on pointerdown, not after the request - Animate one property per state change (scale, translate, stroke) with a slight overshoot - Pair every animation with a non-motion cue (colour, icon, text) for reduced motion ## Don't - Don’t animate things the user did not touch - Don’t make feedback slower than the action itself - Don’t use confetti or celebration for routine actions — save it for milestones - Ambient or looping animation on things nobody touched (marquees, floating blobs, auto-playing hero motion) - Big section entrances and scroll choreography — that is Motion-Driven - Squishy 3D, clay or jelly-looking controls — that is Tactile/Deformable UI - Slow feedback (over 500ms) or animations that delay the actual action - Celebration confetti for routine actions - Removing visible state cues (ticks, halos, colour) so that meaning depends only on motion ## Stack notes One self-contained HTML file with a