IG

interface.guide

Web Interface Guidelines

Interfaces succeed because of hundreds of choices. This is a living, non-exhaustive list of those decisions. Most guidelines are framework-agnostic, some specific to React/Next.js.

Get StartedSource: Vercel Design Guidelines

8

Categories

50+

Guidelines

15+

Demos

2

Languages

pointer

Interactions

Guidelines for creating accessible, responsive, and intuitive user interactions.

Keyboard works everywhere
All flows are keyboard-operable & follow the WAI-ARIA Authoring Patterns.
Clear focus
Every focusable element shows a visible focus ring. Prefer :focus-visible over :focus to avoid distracting pointer users.
Match visual & hit targets
If the visual target is < 24px, expand its hit target to ≥ 24px. On mobile, the minimum size is 44px.
Loading buttons
Show a loading indicator & keep the original label.
Optimistic updates
Update the UI immediately when success is likely; reconcile on server response.
Confirm destructive actions
Require confirmation or provide Undo with a safe window.
Links are links
Use <a> for navigation so standard browser behaviors work (Cmd/Ctrl+Click, middle-click).
URL as state
Persist state in the URL so share, refresh, Back/Forward navigation work.
motion

Animations

Implementation preferences for smooth, performant animations.

Implementation preference
Prefer CSS > Web Animations API > JavaScript libraries (e.g., motion).
Minimum loading-state duration
Add a short show-delay (~150–300ms) & minimum visible time (~300–500ms) to avoid flicker.
grid

Layout

Guidelines for creating responsive, accessible layouts.

Cross-browser SVG transforms
Apply CSS transforms to <g> wrappers & set transform-box: fill-box; transform-origin: center;
Optical alignment
Adjust ±1px when perception beats geometry.
Deliberate alignment
Every element aligns with something intentionally—whether to a grid, baseline, edge, or optical center.
Responsive coverage
Verify on mobile, laptop, & ultra-wide. For ultra-wide, zoom out to 50% to simulate.
Respect safe areas
Account for notches & insets with safe-area variables.
No excessive scrollbars
Only render useful scrollbars; fix overflow issues to prevent unwanted scrollbars.
text

Content

Guidelines for creating clear, accessible content.

Inline help first
Prefer inline explanations; use tooltips as a last resort.
Stable skeletons
Skeletons mirror final content exactly to avoid layout shift.
No dead ends
Every screen offers a next step or recovery path.
All states designed
Empty, sparse, dense, & error states are all designed.
Typographic quotes
Prefer curly quotes (" ") over straight quotes (" ").
Tabular numbers
Use font-variant-numeric: tabular-nums for number comparisons.

Tabular nums prevent layout shift when numbers change

1,234

Default nums

1,234

Tabular nums

Icons have labels
Convey the same meaning with text for non-sighted users.
input

Forms

Guidelines for creating accessible, user-friendly forms.

Enter submits
When a text input is focused, Enter submits if it's the only control.
Labels everywhere
Every control has a <label> or is associated with a label for assistive tech.
Don't block typing
Allow any input & show validation feedback. Blocking keystrokes is confusing.
Error placement
Show errors next to their fields; on submit, focus the first error.
Placeholders signal emptiness
End placeholders with an ellipsis.
Unsaved changes
Warn before navigation when data could be lost.
speed

Performance

Guidelines for building fast, responsive interfaces.

Track re-renders
Minimize & make re-renders fast. Use React DevTools or React Scan.
Throttle when profiling
Test with CPU & network throttling.
Large lists
Virtualize large lists (e.g., virtua) or use content-visibility: auto.
Preload wisely
Preload only above-the-fold images; lazy-load the rest.
No image-caused CLS
Set explicit image dimensions & reserve space.
Preload fonts
For critical text to avoid flash & layout shift.
palette

Design

Visual design guidelines for polished interfaces.

Layered shadows
Mimic ambient + direct light with at least two layers.
Crisp borders
Combine borders & shadows; semi-transparent borders improve edge clarity.
Nested radii
Child radius ≤ parent radius & concentric so curves align.
Hue consistency
On non-neutral backgrounds, tint borders/shadows/text toward the same hue.
Minimum contrast
Prefer APCA over WCAG 2 for more accurate perceptual contrast.
Interactions increase contrast
:hover, :active, :focus have more contrast than rest state.
pen

Copywriting

Guidelines for clear, actionable copy (Vercel-specific).

Active voice
Instead of "The CLI will be installed," say "Install the CLI."
Action-oriented language
Instead of "You will need the CLI…" say "Install the CLI…".
Use numerals for counts
Instead of "eight deployments" say "8 deployments".
Error messages guide the exit
Don't just state what went wrong—tell the user how to fix it.
Avoid ambiguity
Labels are clear & specific. Instead of "Continue" say "Save API Key".