Tools
Design Intelligence
UX rules
Do/don’t guidelines for accessibility, touch, forms, motion, navigation, and more. Complements Foundry’s built-in accessibility and principles pages.
Also see Foundry a11y
Showing 99 of 99 items
Smooth Scroll
Anchor links should scroll smoothly to target section
Do
Use scroll-behavior: smooth on html element
html { scroll-behavior: smooth; }Don't
Jump directly without transition
<a href='#section'> without CSSSticky Navigation
Fixed nav should not obscure content
Do
Add padding-top to body equal to nav height
pt-20 (if nav is h-20)Don't
Let nav overlap first section content
No padding compensationActive State
Current page/section should be visually indicated
Do
Highlight active nav item with color/underline
text-primary border-b-2Don't
No visual feedback on current location
All links same styleBack Button
Users expect back to work predictably
Do
Preserve navigation history properly
history.pushState()Don't
Break browser/app back button behavior
location.replace()Deep Linking
URLs should reflect current state for sharing
Do
Update URL on state/view changes
Use query params or hashDon't
Static URLs for dynamic content
Single URL for all statesBreadcrumbs
Show user location in site hierarchy
Do
Use for sites with 3+ levels of depth
Home > Category > ProductDon't
Use for flat single-level sites
Only on deep nested pagesExcessive Motion
Too many animations cause distraction and motion sickness
Do
Animate 1-2 key elements per view maximum
Single hero animationDon't
Animate everything that moves
animate-bounce on 5+ elementsDuration Timing
Animations should feel responsive not sluggish
Do
Use 150-300ms for micro-interactions
transition-all duration-200Don't
Use animations longer than 500ms for UI
duration-1000Reduced Motion
Respect user's motion preferences
Do
Check prefers-reduced-motion media query
@media (prefers-reduced-motion: reduce)Don't
Ignore accessibility motion settings
No motion query checkLoading States
Show feedback during async operations
Do
Use skeleton screens or spinners
animate-pulse skeletonDon't
Leave UI frozen with no feedback
Blank screen while loadingHover vs Tap
Hover effects don't work on touch devices
Do
Use click/tap for primary interactions
onClick handlerDon't
Rely only on hover for important actions
onMouseEnter onlyContinuous Animation
Infinite animations are distracting
Do
Use for loading indicators only
animate-spin on loaderDon't
Use for decorative elements
animate-bounce on iconsTransform Performance
Some CSS properties trigger expensive repaints
Do
Use transform and opacity for animations
transform: translateY()Don't
Animate width/height/top/left properties
top: 10px animationEasing Functions
Linear motion feels robotic
Do
Use ease-out for entering ease-in for exiting
ease-outDon't
Use linear for UI transitions
linearZ-Index Management
Stacking context conflicts cause hidden elements
Do
Define z-index scale system (10 20 30 50)
z-10 z-20 z-50Don't
Use arbitrary large z-index values
z-[9999]Overflow Hidden
Hidden overflow can clip important content
Do
Test all content fits within containers
overflow-auto with scrollDon't
Blindly apply overflow-hidden
overflow-hidden truncating contentFixed Positioning
Fixed elements can overlap or be inaccessible
Do
Account for safe areas and other fixed elements
Fixed nav + fixed bottom with gapDon't
Stack multiple fixed elements carelessly
Multiple overlapping fixed elementsStacking Context
New stacking contexts reset z-index
Do
Understand what creates new stacking context
Parent with z-index isolates childrenDon't
Expect z-index to work across contexts
z-index: 9999 not workingContent Jumping
Layout shift when content loads is jarring
Do
Reserve space for async content
aspect-ratio or fixed heightDon't
Let images/content push layout around
No dimensions on imagesViewport Units
100vh can be problematic on mobile browsers
Do
Use dvh or account for mobile browser chrome
min-h-dvh or min-h-screenDon't
Use 100vh for full-screen mobile layouts
h-screen on mobileContainer Width
Content too wide is hard to read
Do
Limit max-width for text content (65-75ch)
max-w-prose or max-w-3xlDon't
Let text span full viewport width
Full width paragraphsTouch Target Size
Small buttons are hard to tap accurately
Do
Minimum 44x44px touch targets
min-h-[44px] min-w-[44px]Don't
Tiny clickable areas
w-6 h-6 buttonsTouch Spacing
Adjacent touch targets need adequate spacing
Do
Minimum 8px gap between touch targets
gap-2 between buttonsDon't
Tightly packed clickable elements
gap-0 or gap-1Gesture Conflicts
Custom gestures can conflict with system
Do
Avoid horizontal swipe on main content
Vertical scroll primaryDon't
Override system gestures
Horizontal swipe carousel onlyTap Delay
300ms tap delay feels laggy
Do
Use touch-action CSS or fastclick
touch-action: manipulationDon't
Default mobile tap handling
No touch optimizationPull to Refresh
Accidental refresh is frustrating
Do
Disable where not needed
overscroll-behavior: containDon't
Enable by default everywhere
Default overscrollHaptic Feedback
Tactile feedback improves interaction feel
Do
Use for confirmations and important actions
navigator.vibrate(10)Don't
Overuse vibration feedback
Vibrate on every tapFocus States
Keyboard users need visible focus indicators
Do
Use visible focus rings on interactive elements
focus:ring-2 focus:ring-blue-500Don't
Remove focus outline without replacement
outline-none without alternativeHover States
Visual feedback on interactive elements
Do
Change cursor and add subtle visual change
hover:bg-gray-100 cursor-pointerDon't
No hover feedback on clickable elements
No hover styleActive States
Show immediate feedback on press/click
Do
Add pressed/active state visual change
active:scale-95Don't
No feedback during interaction
No active stateDisabled States
Clearly indicate non-interactive elements
Do
Reduce opacity and change cursor
opacity-50 cursor-not-allowedDon't
Confuse disabled with normal state
Same style as enabledLoading Buttons
Prevent double submission during async actions
Do
Disable button and show loading state
disabled={loading} spinnerDon't
Allow multiple clicks during processing
Button clickable while loadingError Feedback
Users need to know when something fails
Do
Show clear error messages near problem
Red border + error messageDon't
Silent failures with no feedback
No indication of errorSuccess Feedback
Confirm successful actions to users
Do
Show success message or visual change
Toast notification or checkmarkDon't
No confirmation of completed action
Action completes silentlyConfirmation Dialogs
Prevent accidental destructive actions
Do
Confirm before delete/irreversible actions
Are you sure modalDon't
Delete without confirmation
Direct delete on clickColor Contrast
Text must be readable against background
Do
Minimum 4.5:1 ratio for normal text
#333 on white (7:1)Don't
Low contrast text
#999 on white (2.8:1)Color Only
Don't convey information by color alone
Do
Use icons/text in addition to color
Red text + error iconDon't
Red/green only for error/success
Red border only for errorAlt Text
Images need text alternatives
Do
Descriptive alt text for meaningful images
alt='Dog playing in park'Don't
Empty or missing alt attributes
alt='' for content imagesHeading Hierarchy
Screen readers use headings for navigation
Do
Use sequential heading levels h1-h6
h1 then h2 then h3Don't
Skip heading levels or misuse for styling
h1 then h4ARIA Labels
Interactive elements need accessible names
Do
Add aria-label for icon-only buttons
aria-label='Close menu'Don't
Icon buttons without labels
<button><Icon/></button>Keyboard Navigation
All functionality accessible via keyboard
Do
Tab order matches visual order
tabIndex for custom orderDon't
Keyboard traps or illogical tab order
Unreachable elementsScreen Reader
Content should make sense when read aloud
Do
Use semantic HTML and ARIA properly
<nav> <main> <article>Don't
Div soup with no semantics
<div> for everythingForm Labels
Inputs must have associated labels
Do
Use label with for attribute or wrap input
<label for='email'>Don't
Placeholder-only inputs
placeholder='Email' onlyError Messages
Error messages must be announced
Do
Use aria-live or role=alert for errors
role='alert'Don't
Visual-only error indication
Red border onlySkip Links
Allow keyboard users to skip navigation
Do
Provide skip to main content link
Skip to main content linkDon't
No skip link on nav-heavy pages
100 tabs to reach contentImage Optimization
Large images slow page load
Do
Use appropriate size and format (WebP)
srcset with multiple sizesDon't
Unoptimized full-size images
4000px image for 400px displayLazy Loading
Load content as needed
Do
Lazy load below-fold images and content
loading='lazy'Don't
Load everything upfront
All images eager loadCode Splitting
Large bundles slow initial load
Do
Split code by route/feature
dynamic import()Don't
Single large bundle
All code in main bundleCaching
Repeat visits should be fast
Do
Set appropriate cache headers
Cache-Control headersDon't
No caching strategy
Every request hits serverFont Loading
Web fonts can block rendering
Do
Use font-display swap or optional
font-display: swapDon't
Invisible text during font load
FOIT (Flash of Invisible Text)Third Party Scripts
External scripts can block rendering
Do
Load non-critical scripts async/defer
async or defer attributeDon't
Synchronous third-party scripts
<script src='...'> in headBundle Size
Large JavaScript slows interaction
Do
Monitor and minimize bundle size
Bundle analyzerDon't
Ignore bundle size growth
No size monitoringRender Blocking
CSS/JS can block first paint
Do
Inline critical CSS defer non-critical
Critical CSS inlineDon't
Large blocking CSS files
All CSS in headInput Labels
Every input needs a visible label
Do
Always show label above or beside input
<label>Email</label><input>Don't
Placeholder as only label
placeholder='Email' onlyError Placement
Errors should appear near the problem
Do
Show error below related input
Error under each fieldDon't
Single error message at top of form
All errors at form topInline Validation
Validate as user types or on blur
Do
Validate on blur for most fields
onBlur validationDon't
Validate only on submit
Submit-only validationInput Types
Use appropriate input types
Do
Use email tel number url etc
type='email'Don't
Text input for everything
type='text' for emailAutofill Support
Help browsers autofill correctly
Do
Use autocomplete attribute properly
autocomplete='email'Don't
Block or ignore autofill
autocomplete='off' everywhereRequired Indicators
Mark required fields clearly
Do
Use asterisk or (required) text
* required indicatorDon't
No indication of required fields
Guess which are requiredPassword Visibility
Let users see password while typing
Do
Toggle to show/hide password
Show/hide password buttonDon't
No visibility toggle
Password always hiddenSubmit Feedback
Confirm form submission status
Do
Show loading then success/error state
Loading -> Success messageDon't
No feedback after submit
Button click with no responseInput Affordance
Inputs should look interactive
Do
Use distinct input styling
Border/background on inputsDon't
Inputs that look like plain text
Borderless inputsMobile Keyboards
Show appropriate keyboard for input type
Do
Use inputmode attribute
inputmode='numeric'Don't
Default keyboard for all inputs
Text keyboard for numbersMobile First
Design for mobile then enhance for larger
Do
Start with mobile styles then add breakpoints
Default mobile + md: lg: xl:Don't
Desktop-first causing mobile issues
Desktop default + max-width queriesBreakpoint Testing
Test at all common screen sizes
Do
Test at 320 375 414 768 1024 1440
Multiple device testingDon't
Only test on your device
Single device developmentTouch Friendly
Mobile layouts need touch-sized targets
Do
Increase touch targets on mobile
Larger buttons on mobileDon't
Same tiny buttons on mobile
Desktop-sized targets on mobileReadable Font Size
Text must be readable on all devices
Do
Minimum 16px body text on mobile
text-base or largerDon't
Tiny text on mobile
text-xs for body textViewport Meta
Set viewport for mobile devices
Do
Use width=device-width initial-scale=1
<meta name='viewport'...>Don't
Missing or incorrect viewport
No viewport meta tagHorizontal Scroll
Avoid horizontal scrolling
Do
Ensure content fits viewport width
max-w-full overflow-x-hiddenDon't
Content wider than viewport
Horizontal scrollbar on mobileImage Scaling
Images should scale with container
Do
Use max-width: 100% on images
max-w-full h-autoDon't
Fixed width images overflow
width='800' fixedTable Handling
Tables can overflow on mobile
Do
Use horizontal scroll or card layout
overflow-x-auto wrapperDon't
Wide tables breaking layout
Table overflows viewportLine Height
Adequate line height improves readability
Do
Use 1.5-1.75 for body text
leading-relaxed (1.625)Don't
Cramped or excessive line height
leading-none (1)Line Length
Long lines are hard to read
Do
Limit to 65-75 characters per line
max-w-proseDon't
Full-width text on large screens
Full viewport width textFont Size Scale
Consistent type hierarchy aids scanning
Do
Use consistent modular scale
Type scale (12 14 16 18 24 32)Don't
Random font sizes
Arbitrary sizesFont Loading
Fonts should load without layout shift
Do
Reserve space with fallback font
font-display: swap + similar fallbackDon't
Layout shift when fonts load
No fallback fontContrast Readability
Body text needs good contrast
Do
Use darker text on light backgrounds
text-gray-900 on whiteDon't
Gray text on gray background
text-gray-400 on gray-100Heading Clarity
Headings should stand out from body
Do
Clear size/weight difference
Bold + larger sizeDon't
Headings similar to body text
Same size as bodyLoading Indicators
Show system status during waits
Do
Show spinner/skeleton for operations > 300ms
Skeleton or spinnerDon't
No feedback during loading
Frozen UIEmpty States
Guide users when no content exists
Do
Show helpful message and action
No items yet. Create one!Don't
Blank empty screens
Empty white spaceError Recovery
Help users recover from errors
Do
Provide clear next steps
Try again button + help linkDon't
Error without recovery path
Error message onlyProgress Indicators
Show progress for multi-step processes
Do
Step indicators or progress bar
Step 2 of 4 indicatorDon't
No indication of progress
No step informationToast Notifications
Transient messages for non-critical info
Do
Auto-dismiss after 3-5 seconds
Auto-dismiss toastDon't
Toasts that never disappear
Persistent toastConfirmation Messages
Confirm successful actions
Do
Brief success message
Saved successfully toastDon't
Silent success
No confirmationTruncation
Handle long content gracefully
Do
Truncate with ellipsis and expand option
line-clamp-2 with expandDon't
Overflow or broken layout
Overflow or cut offDate Formatting
Use locale-appropriate date formats
Do
Use relative or locale-aware dates
2 hours ago or locale formatDon't
Ambiguous date formats
01/02/03Number Formatting
Format large numbers for readability
Do
Use thousand separators or abbreviations
1.2K or 1,234Don't
Long unformatted numbers
1234567Placeholder Content
Show realistic placeholders during dev
Do
Use realistic sample data
Real sample contentDon't
Lorem ipsum everywhere
Lorem ipsumUser Freedom
Users should be able to skip tutorials
Do
Provide Skip and Back buttons
Skip Tutorial buttonDon't
Force linear unskippable tour
Locked overlay until finishedAutocomplete
Help users find results faster
Do
Show predictions as user types
Debounced fetch + dropdownDon't
Require full type and enter
No suggestionsNo Results
Dead ends frustrate users
Do
Show 'No results' with suggestions
Try searching for X insteadDon't
Blank screen or '0 results'
No results found.Bulk Actions
Editing one by one is tedious
Do
Allow multi-select and bulk edit
Checkbox column + Action barDon't
Single row actions only
Repeated actions per rowDisclaimer
Users need to know they talk to AI
Do
Clearly label AI generated content
AI Assistant labelDon't
Present AI as human
Fake human name without labelStreaming
Waiting for full text is slow
Do
Stream text response token by token
Typewriter effectDon't
Show loading spinner for 10s+
Spinner until 100% completeGaze Hover
Elements should respond to eye tracking before pinch
Do
Scale/highlight element on look
hoverEffect()Don't
Static element until pinch
onTap onlyDepth Layering
UI needs Z-depth to separate content from environment
Do
Use glass material and z-offset
.glassBackgroundEffect()Don't
Flat opaque panels blocking view
bg-whiteAuto-Play Video
Video consumes massive data and energy
Do
Click-to-play or pause when off-screen
playsInline muted preload='none'Don't
Auto-play high-res video loops
autoplay loopAsset Weight
Heavy 3D/Image assets increase carbon footprint
Do
Compress and lazy load 3D models
Draco compressionDon't
Load 50MB textures
Raw .obj filesFeedback Loop
AI needs user feedback to improve
Do
Thumps up/down or 'Regenerate'
Feedback componentDon't
Static output only
Read-only textMotion Sensitivity
Parallax/Scroll-jacking causes nausea
Do
Respect prefers-reduced-motion
@media (prefers-reduced-motion)Don't
Force scroll effects
ScrollTrigger.create()