Radii Vocabulary

About

The gap between what designers say and what developers implement is often a vocabulary problem. "Make it pop" is contrast or visual weight. "Feels too heavy" is type weight or shadow elevation. "Looks generic" often points to spacing system or border-radius. "Doesn't feel native" is usually easing and duration. "Too jumpy" is spring amplitude. "Feels alive" is micro-interactions or mascot animation. Radii Vocabulary takes anything you can describe in plain language — client feedback, design notes, gut reactions, Figma comments — and returns the exact design terms you need, with links to live demos so you can see and understand each concept before coding it.

What it does

• Accepts plain-language design descriptions, complaints, vague feedback, or goals
• Returns 1–5 matched Radii terms with a one-line reason for each match
• 40+ built-in plain-language mappings: "card feels flat", "button looks cheap", "feels laggy", "nothing stands out", "navigation is lost", and more
• Works on animation vocabulary: "too bouncy" → spring-animation, "feels mechanical" → motion-design, "jarring" → prefers-reduced-motion
• Works on loading states: "feels laggy", "loading is boring", "content jumps" → maps to skeleton-loader, optimistic-ui, loading-state
• Handles layered problems: "it feels cheap and hard to use" → maps to multiple contributing terms across color, spacing, and interaction

Give it

• 1.Any design description in plain language: "the button doesn't look clickable", "it feels too cramped", "the animation feels wrong", "make the hierarchy clearer"
• 2.Optional: a screenshot or component file for additional context

Example output

Input: "The animation feels too aggressive and mechanical"

→ motion-design — The easing function is likely linear or ease-in-out — for UI animations, use ease-out for entrances and a spring cubic-bezier for interactive feedback. radii.cloud/terms/motion-design
→ spring-animation — "Aggressive" often means too much amplitude (scale change > 5%) or too-high spring stiffness. Tune mass and stiffness down. radii.cloud/terms/spring-animation
→ animation — Duration may be too long (> 400ms) or too short (< 80ms) — both read as mechanical. Target 150–250ms for micro-interactions. radii.cloud/terms/animation
→ micro-interactions — "Mechanical" sometimes means the animation doesn't respond to input speed — consider velocity-matched physics for drag/swipe. radii.cloud/terms/micro-interactions