Micro-interactions

Also called: Microinteraction design, Feedback-rich UI, Juicy UI

A calm, clean interface where every control answers back: ripples, drawn checkmarks, bouncy toggles, pinging dots and gentle hover lifts.

“Delightful feedback”Interaction‑ledEra: 2014 → todayFriendlyTrustworthyPlayfulCalm

Open full screen ↗

micro-interactions / landingEN

micro-interactions / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm8pxRadius md12pxRadius lg16pxRadius xl24pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

button ripplecheck-draw animationtoggle bouncehover liftpinging status dotselected-state ticksfocus halotiny overshoot

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

Not to be confused with

Motion-Driven →Motion-Driven animates whole sections entering the page; Micro-interactions animate a single control only when it is touched or changes state.Tactile Digital / Deformable UI →Tactile UI makes the controls themselves look squishy and 3D; Micro-interactions keep flat, clean controls and add small feedback effects.Flat Design →Flat design is a static, colour-block look; Micro-interactions share the clean base but add halos, ticks, ripples and lifts on every control.

On mobile

This is where the style shines: ripple on every tappable row, a bouncing icon pill on the active tab, ticks drawn on confirm, and haptic-paired toggles. Keep each effect under 300ms and never delay navigation for it.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinAlbert Sans · 600/700/800

The quick brown fox

Heading · ThaiAnuphan · 600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinAlbert Sans · 400/500/600

Clear words make shared decisions.

Body · ThaiAnuphan · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Anuphan is a friendly, loopless geometric Thai whose round bowls and open counters match Albert Sans’s clean, approachable grotesque.

Colour palette

Light

Dark

Design tokens

Radius	`sm 8px · md 12px · lg 16px · xl 24px · pill 999px`
Border	`1px`
Shadow	`0 8px 20px -6px rgba(14,29,26,0.14)`
Display	`clamp(2.6rem, 5.4vw, 4.4rem)`
Motion	`220ms cubic-bezier(.34,1.56,.64,1)`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Micro-interactions (micro-interactions) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 16px;
  --background: #F3F7F5;
  --foreground: #0E1D1A;
  --card: #FFFFFF;
  --card-foreground: #0E1D1A;
  --popover: #FFFFFF;
  --popover-foreground: #0E1D1A;
  --primary: #0B6E4F;
  --primary-foreground: #FFFFFF;
  --secondary: #FFC94D;
  --secondary-foreground: #2A1E00;
  --muted: #E9F1ED;
  --muted-foreground: #4E615C;
  --accent: #E9F1ED;
  --accent-foreground: #0E1D1A;
  --destructive: #D9344F;
  --border: #D7E3DE;
  --input: #D7E3DE;
  --ring: #0B6E4F;
  --chart-1: #0B6E4F;
  --chart-2: #3FC79A;
  --chart-3: #FFC94D;
  --chart-4: #FF4F70;
  --chart-5: #7A8F89;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0E1D1A;
  --sidebar-primary: #0B6E4F;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #E9F1ED;
  --sidebar-accent-foreground: #0E1D1A;
  --sidebar-border: #D7E3DE;
  --sidebar-ring: #0B6E4F;
}

.dark {
  --background: #0B1513;
  --foreground: #EAF5F1;
  --card: #13201D;
  --card-foreground: #EAF5F1;
  --popover: #13201D;
  --popover-foreground: #EAF5F1;
  --primary: #3FD8A2;
  --primary-foreground: #04201A;
  --secondary: #FFD166;
  --secondary-foreground: #2A1E00;
  --muted: #192A26;
  --muted-foreground: #9DB4AD;
  --accent: #192A26;
  --accent-foreground: #EAF5F1;
  --destructive: #FF6B7F;
  --border: #25403A;
  --input: #25403A;
  --ring: #3FD8A2;
  --chart-1: #3FD8A2;
  --chart-2: #9AF0CF;
  --chart-3: #FFD166;
  --chart-4: #FF6B86;
  --chart-5: #7E9C94;
  --sidebar: #13201D;
  --sidebar-foreground: #EAF5F1;
  --sidebar-primary: #3FD8A2;
  --sidebar-primary-foreground: #04201A;
  --sidebar-accent: #192A26;
  --sidebar-accent-foreground: #EAF5F1;
  --sidebar-border: #25403A;
  --sidebar-ring: #3FD8A2;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Micro-interactions (micro-interactions) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #F3F7F5;
  --color-surface: #FFFFFF;
  --color-surface-2: #E9F1ED;
  --color-text: #0E1D1A;
  --color-text-muted: #4E615C;
  --color-primary: #0B6E4F;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFC94D;
  --color-on-secondary: #2A1E00;
  --color-accent: #FF4F70;
  --color-border: #D7E3DE;
  --color-success: #0B8A5B;
  --color-warning: #B66A00;
  --color-danger: #D9344F;
  --color-chart-1: #0B6E4F;
  --color-chart-2: #3FC79A;
  --color-chart-3: #FFC94D;
  --color-chart-4: #FF4F70;
  --color-chart-5: #7A8F89;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(14,29,26,0.06);
  --shadow-md: 0 8px 20px -6px rgba(14,29,26,0.14);
  --shadow-lg: 0 18px 40px -12px rgba(11,110,79,0.25);
  --font-heading: "Albert Sans", "Anuphan", system-ui, sans-serif;
  --font-body: "Albert Sans", "Anuphan", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #0B1513;
  --color-surface: #13201D;
  --color-surface-2: #192A26;
  --color-text: #EAF5F1;
  --color-text-muted: #9DB4AD;
  --color-primary: #3FD8A2;
  --color-on-primary: #04201A;
  --color-secondary: #FFD166;
  --color-on-secondary: #2A1E00;
  --color-accent: #FF6B86;
  --color-border: #25403A;
  --color-success: #3FD8A2;
  --color-warning: #FFB547;
  --color-danger: #FF6B7F;
  --color-chart-1: #3FD8A2;
  --color-chart-2: #9AF0CF;
  --color-chart-3: #FFD166;
  --color-chart-4: #FF6B86;
  --color-chart-5: #7E9C94;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Micro-interactions (micro-interactions). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9686,
            0.9608
          ],
          "hex": "#f3f7f5"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.9451,
            0.9294
          ],
          "hex": "#e9f1ed"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.1137,
            0.102
          ],
          "hex": "#0e1d1a"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3059,
            0.3804,
            0.3608
          ],
          "hex": "#4e615c"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.4314,
            0.3098
          ],
          "hex": "#0b6e4f"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7882,
            0.302
          ],
          "hex": "#ffc94d"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1176,
            0
          ],
          "hex": "#2a1e00"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3098,
            0.4392
          ],
          "hex": "#ff4f70"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8431,
            0.8902,
            0.8706
          ],
          "hex": "#d7e3de"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.5412,
            0.3569
          ],
          "hex": "#0b8a5b"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7137,
            0.4157,
            0
          ],
          "hex": "#b66a00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.2039,
            0.3098
          ],
          "hex": "#d9344f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.4314,
            0.3098
          ],
          "hex": "#0b6e4f"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.7804,
            0.6039
          ],
          "hex": "#3fc79a"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7882,
            0.302
          ],
          "hex": "#ffc94d"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3098,
            0.4392
          ],
          "hex": "#ff4f70"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.5608,
            0.5373
          ],
          "hex": "#7a8f89"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0824,
            0.0745
          ],
          "hex": "#0b1513"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0745,
            0.1255,
            0.1137
          ],
          "hex": "#13201d"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.098,
            0.1647,
            0.149
          ],
          "hex": "#192a26"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9176,
            0.9608,
            0.9451
          ],
          "hex": "#eaf5f1"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6157,
            0.7059,
            0.6784
          ],
          "hex": "#9db4ad"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.8471,
            0.6353
          ],
          "hex": "#3fd8a2"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0157,
            0.1255,
            0.102
          ],
          "hex": "#04201a"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8196,
            0.4
          ],
          "hex": "#ffd166"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1176,
            0
          ],
          "hex": "#2a1e00"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.5255
          ],
          "hex": "#ff6b86"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1451,
            0.251,
            0.2275
          ],
          "hex": "#25403a"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.8471,
            0.6353
          ],
          "hex": "#3fd8a2"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7098,
            0.2784
          ],
          "hex": "#ffb547"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.498
          ],
          "hex": "#ff6b7f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.8471,
            0.6353
          ],
          "hex": "#3fd8a2"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.9412,
            0.8118
          ],
          "hex": "#9af0cf"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8196,
            0.4
          ],
          "hex": "#ffd166"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.5255
          ],
          "hex": "#ff6b86"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4941,
            0.6118,
            0.5804
          ],
          "hex": "#7e9c94"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0549,
              0.1137,
              0.102
            ],
            "hex": "#0e1d1a",
            "alpha": 0.06
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0549,
              0.1137,
              0.102
            ],
            "hex": "#0e1d1a",
            "alpha": 0.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 20,
            "unit": "px"
          },
          "spread": {
            "value": -6,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0431,
              0.4314,
              0.3098
            ],
            "hex": "#0b6e4f",
            "alpha": 0.25
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 18,
            "unit": "px"
          },
          "blur": {
            "value": 40,
            "unit": "px"
          },
          "spread": {
            "value": -12,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Albert Sans",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Albert Sans",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "JetBrains Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 220,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.34,
      1.56,
      0.64,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!