Field note 001Working draft

How to build a great screen

Ideas to help you improve yours.

September 2026 — words Draft lives in this browser

01 Get the weight right

The most important thing on the screen should look the most important. Blur it and check.

Blurred, you only see weight.Blur your eyes to check weight →

02 Pick your details and repeat them

One radius, one spacing scale, one type scale.

If you copy from another product, copy why it works.

03 Respond to every press

.

Keep animations short.

Moving the mouse in diagonal to a submenu crosses other items. Without a safety triangle, the submenu closes.

Top: my PostHog fix, before and after. Bottom: try it.Aim through the triangle →

05 Answer in 0.1 seconds

. Every round trip to the server eats into that:

0.1s instant1s flow

200ms Noticeable

50ms is the coast-to-coast minimum. 85ms was measured from Boston to Stanford. Both from Stuart Cheshire, It's the Latency, Stupid.

Being on mobile = 8.4% more retail conversions.

06 Show content, not spinners

Render what you already have and stream the rest. . If you need one, .

07 Use real HTML

In 2024 bots were . Agents read the accessibility tree, not pixels:

Order #4812

Aeron Chair

$1,395.00 · Delivered Sep 12

RefundTrack package
  1. article "Order #4812"
  2. heading "Aeron Chair" level 3
  3. text "$1,395.00 · Delivered Sep 12"
  4. button "Refund" focusable
  5. link "Track package" /orders/4812/track
  1. generic
  2. generic "Aeron Chair"
  3. generic "$1,395.00 · Delivered Sep 12"
  4. generic "Refund" not focusable
  5. generic "Track package" no href
Same pixels, two readers. Turn off semantic HTML: the person sees no change, the agent loses every button.

fail basic accessibility. Use buttons, links and labels.

08 Make it cheap to change

Build in the browser with utilities, and .

09 Check it yourself

Agents build fast. . Someone still has to open the screen and use it.

Everything I pulled from

489 interactive principles.

Motion

Emil Kowalski

Design engineering and motion: easing, springs, press states and gestures.

33 principles

Animation audit

What to animate, what to reject, and how to audit motion in an app.

19 principles

Rauno Freiberg

Interaction craft from his posts and essays: choreography, gestures, novelty, small details.

9 principles

Apple design

Apple's motion, gestures, materials and type, on the web.

20 principles

Motion principles

Jakub Krehel and Jhey Tompkins on motion, plus a motion cookbook and anti-patterns.

22 principles

Josh W. Comeau

CSS mental models from his posts and blog: shadows, glass, stacking, units, whimsy.

9 principles

Paco Coursey

Small, invisible details from his posts and writing: themes, tabs, borders, type.

8 principles

Sam Selikoff

Interaction recipes from his posts and Build UI: loading, press, lists, streaming.

9 principles

Visual design

Refactoring UI

Visual hierarchy, spacing, color, depth, dark mode and data viz.

30 principles

Adam Wathan

Utility-first CSS and design in the browser: name what it looks like, repeat in the template, extract after repeating.

18 principles

Frontend design

Typography, color, layout and motion for a chosen visual direction.

15 principles

Component craft

shadcn/ui composition, variants, theming tokens and primitives.

16 principles

Paul Graham

Product lessons from the essays: the problem, the core, users and redesign.

10 principles

Brian Lovin

Visual craft from his posts: hierarchy credits, weight, radius, restraint in motion.

9 principles

Web platform

Guillermo Rauch

Perceived speed and web UX: act before the network, stream instead of spin, no layout shift, history intact.

20 principles

Web Interface Guidelines

Interaction, forms, accessibility, content and performance rules for web interfaces.

26 principles

Web standards

Semantic HTML, SEO and security headers.

21 principles

Web performance

Core Web Vitals: LCP, INP, CLS, and what moves them.

16 principles

React & Next.js

Next.js

App Router, Server Components, streaming, caching and Cache Components.

28 principles

React performance

Vercel's React and Next.js performance rules: waterfalls, bundles, re-renders.

33 principles

Composition patterns

React component APIs: variants over flags, compound parts, providers, React 19.

8 principles

React view transitions

Animate React state, lists, Suspense and routes with the browser's own View Transitions.

14 principles

Frontend patterns

State, data fetching, forms, lists and error handling patterns.

15 principles

AI & shipping

AI SDK

Build AI features with the AI SDK 7: streaming, message parts, tools, agents, typed output.

14 principles

Agentic web

How agents read, act on and recover in websites and product workflows.

10 principles

Turborepo

Monorepo task graphs, caching, env hashing, filters and CI, run in a simulated turbo.

15 principles

Deploy to Vercel

How an agent should ship to Vercel: preview first, read state, ask before pushing, guard secrets.

9 principles

Brands

Vercel

From Vercel's own design.md: default to stillness, move only to explain.

4 principles

Linear

Fast, precise, dark-first: one accent, 100ms color, one long curve for big surfaces.

4 principles

Shopify

Polaris motion tokens: a duration scale, four named easings and small keyframes.

4 principles

Ramp

Measured on ramp.com: unhurried color, cards that lift, motion that stays practical.

3 principles