visual-design

name	visual-design
description	Visual design micro-patterns from detail.design for evaluating and improving UI polish — motion, accessibility, typography, and interaction details that make big differences.

When to Use This Skill

• Evaluating app design — Auditing an existing application for visual polish and micro-interaction quality.
• Implementing UI features — Building new components and wanting to apply best-practice design details.
• Pre-launch audit — Final quality pass before releasing to users, checking for unfinished edges and missing micro-interactions.
• Code review — Reviewing frontend PRs with an eye toward design quality, not just functionality.

Philosophy

Micro-details are the difference between software that works and software that feels right. Users cannot always articulate why one product feels premium and another feels cheap, but the answer is almost always in the details: the way a modal closes, the way a button responds to a disabled click, the way a favicon updates to reflect state.

These patterns matter because they compound. Each individual detail is small, but together they build:

• Trust — Polished interfaces signal competence. If the team cared about this pixel, they probably cared about your data too.
• Perceived quality — Users judge quality by feel, not feature lists. Smooth animations, thoughtful transitions, and contextual intelligence make software feel expensive.
• Competitive differentiation — Features are easy to copy. Craft is not. The last 1% of polish is what separates a good product from a great one.

Quick Audit Checklist

Use this checklist as a rapid diagnostic when evaluating any application's visual design quality.

Motion

• Are animations interruptible (not blocking user input)?
• Do layout shifts animate smoothly instead of jumping?
• Are staggered animations used for multi-element transitions?
• Do loading indicators communicate purpose, not just activity?
• Are modal close animations physics-aware (tracking scroll)?

Accessibility

• Do all touch targets meet the 44px minimum on mobile?
• Is prefers-reduced-motion respected?
• Are all forms fully keyboard-navigable?
• Do links have descriptive text (not "click here")?
• Are file paths truncated meaningfully (root + filename)?

Design

• Does the favicon adapt to light/dark mode?
• Is <meta name="theme-color"> set and updated dynamically?
• Are brand names capitalized correctly (GitHub, macOS, iOS)?
• Does search understand context and intent, not just keywords?
• Is application state persisted in the URL for sharing?
• Does the Enter key behave contextually (send vs. newline)?
• Are CJK input methods handled correctly?

Design Tokens & Consistency

• Are colors, spacing, and typography sourced from a single token set (CSS custom properties, theme object, or design system)?
• Are magic numbers absent — no ad-hoc #3b82f6 or padding: 13px outside the token system?
• Is the token set used consistently across components (no component-local overrides that drift)?

Typography & Visual

• Is text-box-trim used for precise text alignment?
• Is text truncation handled elegantly (gradient fade + ellipsis)?
• Do nested rounded elements use concentric border-radius values?
• Do fade edges avoid overlapping scrollbars?

Easter Eggs & Delight

• Are error pages (404, 500) designed as experiences, not dead ends?
• Are there hidden details that reward user curiosity?
• Do small interactions (emoji, hover states) add personality?

Category Index

Motion (14 references)

Pattern	Description	Reference
Interruptible Animation	Close events fire immediately without waiting for animation	File
Prevent Layout Shift	Invisible pseudo-elements reserve space for bold text	File
Shake Disabled Button	Disabled button shakes on click to acknowledge the attempt	File
Morphing Button to Input	Button smoothly transforms into an input field	File
Closing Modal Respects Physics	Modal return animation tracks scroll position like a magnet	File
Animated Color Change	Icon color shifts sequentially in color picker	File
Tooltip Transition	Smooth position transition between grouped tooltips	File
Animated Action Button	Action button with purposeful feedback animation	File
Self-Explanatory Load Bar	Load bar animation clarifies the interaction's intent	File
Stagger for Event Order	Sequential delays guide attention through multi-element animations	File
Animated Sidebar Icon	Toggle icon mirrors the sidebar's physical motion	File
Music Player Layout Shift	Controls slide smoothly when album art expands	File
ASCII Loaders	Text-based animated spinners for CLI and terminal tools	File
Colorful Cursor Blink	Cursor cycles through brand colors to signal special modes	File

Design (36 references)

Pattern	Description	Reference
Photo Response to Theme Mode	Images adapt brightness/source for dark mode	File
Search by Context	Search understands intent, not just keyword matches	File
Outer and Inner Border Radius	Nested elements use concentric radius (outer - padding)	File
Dynamic Visual Guideline	Table guidelines fade on hover to reduce clutter	File
Keep Entry of Active View	Active list item always remains visible	File
Respect Brand Name	Correct capitalization: GitHub, macOS, iOS	File
Bring Life to AI Features	Personality and animation for AI interactions	File
Searchable Collapsed Content	hidden="until-found" makes collapsed content searchable	File
Themed Favicon	Favicon adapts to light/dark color scheme	File
Scroll Landmark	Scroll-to-top with position memory for return	File
Immersive Browser Tab Icon	Tab border matches favicon's dominant color	File
Collapse Instead of Close	Hide content rather than destroy it	File
Paperclip Pin Hover	Paperclip icon opens on hover to signal unpin action	File
Dynamic Role of Enter Key	Enter behaves contextually (send vs. newline)	File
No Pointer Cursor	Pointer cursor only for navigation, default for actions	File
Paste with Intent	Pasting a URL creates a rich embed, not plain text	File
Dynamic Favicon	Favicon updates to reflect page state (loading, success)	File
Anchored Scrolling	Command palette locks highlight and scrolls list beneath	File
Sync Editing Content to Title	Browser tab title updates in real-time during editing	File
Check Potential Problem	Proactive validation blocks actions until requirements met	File
Pre-Filled Example Content	Forms populated with realistic examples, not empty	File
Dynamic Theme Color	<meta theme-color> updates on scroll and navigation	File
Keep State in URL	Filters, sort, and view mode persisted in URL	File
Smart Time Decide	Time interpretation based on human mental models	File
Convert URLs to Rich Previews	Internal links rendered as preview cards	File
Detect Address in PDF	Recognize addresses in documents for quick actions	File
Special Icon Based on Folder Name	Auto-assign distinctive icons by folder name	File
Follow Us Text Trick	Social handles replace generic "Follow us" text	File
No CMD/Ctrl for Shortcuts	Single-key shortcuts for power user flows	File
Delay Close Promotional Info	Brief delay before enabling close on announcements	File
Poll Item Word Counter	Checkbox morphs into circular character counter	File
Auto Naming Screenshot	Context-based filenames for screenshots and exports	File
Active State in Footer	Footer nav shows active state like header nav	File
Handle CJK Input Method	Special handling for Chinese/Japanese/Korean input	File
Special Cursor on People	Help cursor on author sections signals more info	File
Currency Detection in Photos	Tap amounts in photos for instant conversion	File

Accessibility (5 references)

Pattern	Description	Reference
Larger Hit Area	Invisible padding extends touch targets beyond visual boundary	File
Describe Link Action	Descriptive link text for screen readers	File
Form Respects Keyboard	Full keyboard navigability for all forms	File
File Path Truncating	Root + filename preserved, middle truncated	File
Reduced Animation for Frequent Features	Minimize animation for productivity interactions	File

Easter Egg (7 references)

Pattern	Description	Reference
Cast Ending	Final polish details that reach 100% perfection	File
Show Visited Workspace Map	Hidden map visualization of visited workspaces	File
Inspect Tool Golden Thumb	Hidden easter egg in developer inspect tools	File
Address on Mail App Icon	Hidden meaningful text in app icon details	File
Interactive Error Page	Engaging interaction on error pages	File
Interactive 404 Page	404 as a hidden world, not a dead end	File
Shifting Emoji	Random emoji cycling on hover for playfulness	File

Interactivity (3 references)

Pattern	Description	Reference
Auto Segment Video	Automatic chapter detection for long videos	File
Auto Snap Screenshot	Crop handles snap to UI component edges	File
Chat Minimap	Floating minimap for long conversation navigation	File

Optimization (3 references)

Pattern	Description	Reference
Avoid WebP for OG Image	Use PNG/JPG for Open Graph images, not WebP	File
Overscroll Nested Scrollers	overscroll-behavior: contain prevents scroll chaining	File
Themed Icon for PWA on Android	Monochrome icon for Material You theming	File

Other (5 references)

Pattern	Description	Reference
CSS Text-Box Trim	Remove extra text spacing for pixel-perfect alignment	File
Text Overflow Cutoff	Gradient fade + ellipsis for elegant truncation	File
Fade Edge No Override Scrollbar	Gradient edges stop before the scrollbar area	File
Glassy Button	Frosted glass effect with four layered CSS properties	File
Easy to Reference ID	Prefix-number ID schema for human-friendly references	File

How to Apply

When auditing or building UI, follow this workflow:

1. Run the Quick Audit Checklist

Start with the checklist above to identify gaps by category. Score each area (Motion, Accessibility, Design, Typography, Easter Egg) as pass/partial/fail.

2. Identify Gaps and Prioritize

Prioritize findings by impact:

• P1 (Critical) -- Accessibility: Keyboard navigation, touch targets, reduced motion, link descriptions. These affect usability for all users and may have legal compliance implications.
• P2 (High) -- Design and Motion: Layout shifts, animation quality, URL state, theme support, CJK handling. These define perceived quality and affect daily user experience.
• P3 (Enhancement) -- Easter Eggs and Delight: 404 pages, hidden features, playful interactions. These differentiate but should only be pursued after P1 and P2 are solid.

3. Read Relevant Reference Files

For each identified gap, read the corresponding reference file for:

• Why the pattern matters (motivation)
• How to implement it (actionable guidance and code)
• What to check (audit checklist items)

4. Implement and Verify

Apply patterns starting with P1, verify each against its audit checklist, and move to the next priority level.

Commands

• /workflow:audit — Frontend domain references visual-design patterns for design polish assessment

Related Skills

• code-patterns: TypeScript/React component patterns complement visual design patterns
• audit: Frontend audit domain (@workflow audit/domains/frontend.md) checks accessibility and UX completeness

Attribution

All patterns curated from detail.design by Rene Wang (@renedotwang). Individual reference files include source credits for the original designers, developers, and products that inspired each pattern.

Resources referenced include patterns from: Linear, Vercel, Apple, Notion, GitHub, Discord, Obsidian, Figma, Raycast, Google, and LobeHub.