flâneur

vercel-labs/web-interface-guidelines: Guidelines for building interfaces on the Web. ·

github.com · 2,187 words · saved by 1 readers

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. Feedback is welcome. These preferences reflect Vercel’s brand & product choices. They aren’t universal guidelines. Use these guidelines with AI coding agents. Audit all generated interfaces. Install the web-design-guidelines skill to review UI code: Add AGENTS.md to your project so agents apply these guidelines during generation. We’re hiring people who live for these details. Check out the job postings. Thanks to Adam, Jimmy, Jonnie, Lochie, Paco, Joe, & Austin for feedback. Guidelines for building interfaces on the Web.

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. Feedback is welcome. Interactions Keyboard works everywhere. All flows are keyboard-operable & follow the WAI-ARIA Authoring Patterns. Clear focus. Every focusable element shows a visible, unobscured focus ring. Prefer :focus-visible over :focus to avoid distracting pointer users. Set :focus-within for grouped controls. Sticky headers, footers, banners, & overlays never cover the focused element. Manage focus.…

saved by

related reading