Skip to main content
A Singapore Government Agency Website
dx

Web interface

The craft floor for anything you ship in a browser: the polish that separates merely working from genuinely feeling right.

View as Markdown
In the catalogue · 11 standards

Source: Vercel Web Interface Guidelines, curated to what matters most for daily-use work tools. Add their AGENTS.md version to your product repo so agents apply these during generation, not as cleanup.

Interactions

  • Keyboard works everywhere; follow WAI-ARIA patterns. Visible focus via :focus-visible (A11Y-2).
  • Hit targets ≥ 24px desktop, 44px mobile; expand the hit area if the visual is smaller (A11Y-4).
  • Input font size ≥ 16px on mobile (prevents iOS zoom). Never disable browser zoom or paste.
  • URL as state: filters, tabs, pagination, expanded panels are deep-linkable; Back/Forward restores scroll.
  • Optimistic updates where success is likely; on failure, explain and roll back or offer Undo.
  • Links are links: <a>/<Link> for navigation, never <button> or <div>, so Cmd-click works.
  • Buttons show loading state and keep their label; add show-delay (~200ms) and minimum visible time (~400ms) to avoid flicker.

Forms

  • Every control has a label; activating the label focuses the control (A11Y-3).
  • Enter submits. Don't block typing, don't block paste, don't pre-disable submit; let validation explain.
  • Errors appear next to their fields; on submit, focus the first error (CNT-1 anatomy).
  • Set autocomplete, correct type/inputmode; placeholders show example values and end with an ellipsis.

Performance

  • Mutations complete in < 500ms perceived; show progress beyond that.
  • No image-caused layout shift: explicit dimensions, reserved space. Preload critical fonts.
  • Virtualise large lists; data tables and member lists get long.
  • Tabular numbers (font-variant-numeric: tabular-nums) wherever values are compared in columns.

Craft details

  • Optical alignment over geometric when perception beats geometry; everything aligns with something.
  • Nested radii: child ≤ parent, concentric. Interactions increase contrast (hover/active/focus above rest).
  • Honour prefers-reduced-motion (A11Y-5); animate transform/opacity only; never transition: all (MOT-1, SLP-8).
  • Curly quotes, real ellipsis character, non-breaking spaces in glued terms ("Q3 report").