Model preamble · Markdown source · Spoken script

How to talk about great web design in 2026

A brief for Jeremy. Language that makes frontier models take you seriously, instead of emitting 2023 SaaS slop. Research: 30 August 2026. Quotes are attributed. Synthesized usage is marked [reconstructed].

What changed in 2025-26

AI made a competent, interchangeable interface free. That did not make a considered one free.

Dylan Field, Config 2026 recap, 24 June 2026:

At past Configs, we’ve talked about AI lowering the floor and raising the ceiling. But while AI has lowered the floor, it has not raised the ceiling. Designers, creatives, builders: You will raise the ceiling.

Unconstrained generation draws the middle of the training set. Field in a Config 2026 interview recap (Sourcery; journalism, not a primary transcript): “you’re gonna get the average, and it’s not going to stand out.”

Slop is that average, shipped. Kosta, Spot the Slop, 23 July 2026:

Slop isn’t bad design in the old sense: misaligned buttons, clashing colours, broken layouts. Slop is design with no author. It’s the statistical average of ten thousand interfaces, rendered cleanly and shipped without anyone stopping to ask whether it should look and feel like this.

Karri Saarinen named the antonym on 19 December 2025: not more tools, consideration.

My worry isn’t the code or the tools themselves. It’s a decline in consideration, and with that, a decline in unique, well-designed products.

Taste is not a vibe you ask a model to have. Emil Kowalski, Developing Taste: “Simply shipping a product that works is no longer enough, everyone can do that, especially now with AI. … Taste is what matters.” And: “It’s commonly mistaken as personal preference, but it’s more than that — it’s a trained instinct.” In Agents with Taste (2026): package taste as rules. “Almost every ‘taste’ decision has a logical reason if you look close enough.”

Do not request a look. Specify the problem, the hierarchy, the tokens, the states, and the bans.

How to talk

Four words: considered, optical, subdued, authored.

Considered. Every visible decision serves the problem, not decoration. Saarinen, 19 December 2025: “The feature you design and build today should be a considered step toward that vision.” Gavin Nelson (2025-26): “natural, expected, and intentional.”

Optical. Align to what the eye reads, not the bounding box. [reconstructed] “The play icon is geometrically centered and optically left. Nudge it toward the point.”

Subdued. Recessive on purpose. In systems this is a token (text-subdued), not an adjective. Quiet is the crit cousin: not empty, not timid. Apple HIG, 9 September 2025: Liquid Glass’s primary goal is “to remain visually clear, deferring to the content underneath.”

Authored. Someone made a choice a default would not have made. Kosta: “Does this feel like it came from somewhere? Does it have a voice? Would I notice if it disappeared?” Type is the fastest signal. You do not need a custom font. You need a decision.

Three registers

Hierarchy is who speaks first, second, and not at all. Kosta: when everything gets the same radius and padding, “the page goes flat.” Hon Tran (Awwwards juror, 2026): “Motion with no hierarchy: everything floats, parallaxes, and reveals, so nothing matters.”

A PM: “Can we make this feel more premium and add some delight?” A senior designer [reconstructed]: “The populated state is unresolved. Recede secondary metrics to text-subdued, give the at-risk number optical size and tabular-nums, drop the indigo bars. Empty, loading, and error are where this will feel cheap. Motion: 120ms ease-out on the row update, nothing on a control they hit all day. Reference: Linear’s density, not a Dribbble analytics kit. Attach the tokens. Ban Inter-only and bg-indigo-500.”

False friends

Do not say “modern and clean.” That is Inter, indigo, three cards.

Twelve terms that distinguish 2026 from 2023

Cut 6 and 12 if you need ten.

1. text-box-trim (people still say leading-trim). CSS trims extra half-leading so padding is optical space, not the em-box. Brief: use it on buttons and stacked headlines; keep tap targets at WCAG 2.2 size.
2. OKLCH plus relative color plus light-dark(). Palettes in a perceptual space; tints from one origin; light and dark as first-class values. Brief: tokens in oklch(); not an invert.
3. Container queries and subgrid. A component restyles to its slot, not the viewport; nested grids inherit parent tracks. Brief: @container, not @media; internals on subgrid.
4. View Transitions, including multi-page. The browser snapshots old and new UI and interpolates, so a document site can morph without becoming an SPA. Brief: MPA plus View Transitions.
5. Scroll-driven CSS versus scroll-jacking. Animation is a function of scroll. The document remains a document. Hijacking means you stole the wheel. Brief: animation-timeline: view(); reduced motion still yields a real page.
6. display: grid-lanes plus reading-flow. Native masonry with an accessibility debt: default lanes often scramble focus order (WCAG 2.4.3). Not Baseline. Brief: design reading order with the layout; grid fallback.
7. Code Connect / code as material. Dylan Field, Config 2026: “Design is a process. Code is material, just like images, vectors and design layers.” The repo is implementation truth. Brief: import the production Button.
8. Canvas plus chat / controlled generative UI. Chat is the intent channel; a canvas or component registry is the work. Runtime UI from allowed parts, not raw HTML. Brief: chat left, work object right; low confidence stays in prose.
9. Anti-slop / quiet luxury of software. Generation made “clean SaaS” free, so taste is the differentiator: restraint, a type decision, no purple glow, no three identical cards. Brief: authored, not average; ban the fingerprint list.
10. WCAG 2.2 as craft. Target size, focus not obscured, reduced motion as a design constraint. 2.2 AA is the live bar. WCAG 3 is a Working Draft, not a contract. Brief: 2.2 AA; 24px targets; reduced motion leaves a document.
11. INP as a taste constraint. Interaction to Next Paint replaced FID on 12 March 2024. Good is p75 INP at or under 200ms. Brief: pressed states inside the INP window; animate transform and opacity only.
12. Liquid Glass versus glassmorphism. Materials are back at OS scale (Apple, WWDC 2025): a control layer that defers to content. Glassmorphism is the 2021 tutorial look. Brief: no glass on content cards; no glass-on-glass.

Working lexicon, by layer

Not all 119 terms. Meaning, then the confusion to avoid.

Layout. CSS Grid: two-dimensional tracks. Not Flexbox. Subgrid: child reuses the parent’s tracks. Not a nested grid with its own. Container queries: restyle to the slot. Not @media on the window. Intrinsic layout: clamp / minmax. Not 375 / 768 / 1440 artboards. Bento: authored unequal spans. Not masonry. Fluid type and space (Utopia): min/max at min/max viewports. Not raw vw. Optical alignment: the eye, not the box. Not text-box-trim (text box, not glyph overhang).

Type. Variable fonts: one file interpolates wght / opsz / wdth. Not separate static cuts. Optical sizing (opsz): letterforms change with size. Not just bumping weight. OpenType features: UI tables want tnum; running text wants ligatures and oldstyle figures. Grotesque plus serif: a low-contrast sans for UI with a real serif for display or body. Not Inter-everywhere, and not blindly copying Anthropic. text-wrap: balance / pretty: balance for headlines; pretty for rag. Not each other. text-box-trim: optical vertical rhythm in CSS. Watch tap-target shrinkage.

Color and materials. OKLCH: perceptual lightness. Not HSL; hex is a serialization, not a space. Relative color / color-mix(): derive from one origin, or mix two colors. Not Sass lighten(). light-dark(): both appearances in one value. Not invert-plus-glow. Display P3: colors outside sRGB. Not HDR. Materials vs glassmorphism: a control layer versus blur-on-every-card. Liquid Glass is a native system material, not a CSS meme. Contrast as a decision: Linear / Stripe / Vercel taste is high contrast plus one accent.

Motion. Scroll-driven CSS: progress tied to scroll, compositor-side. Not once-on-intersection, and not scroll-jacking. Firefox is not a safe “all engines” story as of mid-2026; prefer MDN. View Transitions: browser-interpolated navigation. Not Framer Motion (still wins for interruptible in-app physics). Spring physics: mass, stiffness, damping. Not a cubic-bezier “bounce.” Reduced motion: often off, not shorter. Choreography vs decoration: sequence that explains state change. Staggered whileInView fade-up is the 2024 AI-site tell. Film vs document: film-quality moments on a document skeleton.

Interaction. Command palette: keyboard-first index of actions. Not a search box. Progressive disclosure: show the minimum; reveal on intent. Not progressive enhancement (architecture). Optimistic UI: assume the write succeeded; roll back on failure. Not a skeleton. Modality-agnostic: keyboard, pointer, and touch as equals. Selection: the set of objects being operated on. Not a text caret. Presence: named cursors on a canvas, including agents.

AI-era UI. Generative UI: runtime composition from allowed components. Not “AI designed my Figma file.” Vercel’s production path is streaming data parts; streamUI / RSC was paused as experimental. Canvas plus chat: chat is intent; the canvas is the work. Agentic UI: plan, interrupt, diffs, permissions. Not a chatbot with plugins. Inline citations: markers on claims, mapped to sources as they stream. Streaming as language: a spinner says unknown; a stream says work is happening here. Human-in-the-loop: approve / edit / reject as a designed step. Not a disclaimer footer. Ambient vs explicit AI: ambient still needs an indicator and an off switch.

Craft. Restraint: quality via what you refuse. Saarinen: reduce scope; the spec is the baseline, not the goal. Not minimalism-as-style. Opinionated: design for someone in particular. Handmade signals: evidence of a person. Not an AI watercolor overlay. Editorial web: spreads and lockups, not cards-in-a-grid. Strategic friction (van Schneider): opt-in depth. Not dark patterns. Directed motion (Hon Tran): a two-second branded reveal can be craft; a six-second loader is a penalty.

Performance. Perceived performance: how fast it felt. INP / LCP / CLS: field bar is LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 (p75, mobile). Lab is not field. FID is dead. Skeleton vs nothing: must match the final layout and must end. Progressive enhancement, 2026: a real document, then gifts behind @supports. MPA plus Speculation Rules plus View Transitions: you may not need an SPA for a site. AVIF is the production default. JPEG XL is not yet default-on everywhere as of 30 August 2026.

Accessibility. WCAG 2.2 AA is the live bar. Not WCAG 3 (Working Draft, 3 March 2026). Focus: 2.4.7 visible (AA); 2.4.11 not buried by sticky chrome (AA). Never global outline: none. Target size: 24x24 CSS px is AA; 44x44 is AAA and platform comfort. Name, role, value: HTML first. Not ARIA-first. reading-flow: reconcile visual order with focus order when grid or lanes permute items.

Design systems. Tokens (DTCG): named decisions. Primitives vs semantic vs component. Not a Figma swatch. Semantic color: named by role (text.muted), not blue-500. Modes: light/dark, brand, compact/comfortable. Density is its own axis, not a breakpoint. Slot / compound components: Trigger plus Content via context; asChild so you do not wrap a button in a button. Headless vs owned: Radix / Base UI give behavior and accessibility; owned source (shadcn-class) lives in your repo. Code Connect / MCP: map the Figma component to the production import. Not Zeplin.

Taste references

Cite a quality, not a screenshot: the [quality] of [named work], not the [failure mode] of [anti-reference]. Quality is density, editorial scale, quiet chrome, directed motion, type pairing. Almost never “look.”

[reconstructed]: “The density of Linear, the editorial scale of Stripe Press, not the chrome of Dribbble dashboards.” “Geist is fine as a decision; Geist-as-default is already a tell.” “Liquid Glass on the navigation layer only. Do not glass the content.”

Kosta, 23 July 2026: “Stripe’s animations feel precise and mathematical; Duolingo’s feel bouncy. The motion matches the thing.”

People. Karri Saarinen: Linear craft doctrine. Dylan Field: floor/ceiling; code as material. Emil Kowalski: taste as trained instinct; motion budgets. Rauno Freiberg: invisible details; frequency versus novelty. Alan Dye: Liquid Glass (literacy, not imitation). Andy Clarke / Adam Argyle / Miriam Suzanne: CSS craft, OKLCH, container queries. Heydon Pickering: Inclusive Components. Manuel Matuzovic: grid-lanes versus 2.4.3. Jake Archibald: linear() springs; JPEG XL, 24 August 2026. Hon Tran: directed motion; floor before ceiling. Kosta: slop diagnosis. Maggie Appleton: squish versus structure. Frank Chimero: light touch. Tobias van Schneider: strategic friction. Trys Mudford and James Gilyead: Utopia. Gavin Nelson: citing behaviors, not aesthetics. Skip unverified 2025-26 mouths: Cassidy Williams, Maxime Heckel, Steve Schoger-from-video, Inga Hampton (recaps only), official Awwwards jury comments (not published).

Studios. OFF+BRAND.: Awwwards 2025 Site of the Year, landonorris.com. Immersive Garden: 2025 Agency of the Year. Studio Freight: the 2026 studio that published a mouth (brutal elegance); Lenis must yield to reduced motion. Active Theory: when the product is an experience. Hello Monday: type as the site. Pentagram: identity and editorial, not shaders. Do not cite Locomotive as if 2018 were now. Ueno is gone unless you mean a person. Playground and Sequoia are ambiguous. Picnic CSS is not a 2026 taste-maker.

Products. Open them; do not moodboard them. Linear: keyboard-first, optimistic, density; product-UI north star. Stripe Dashboard plus Docs: documentation as product. Vercel: judge the dashboard and AI SDK. Raycast: OS-level command palette (do not quote the 50ms lore unless you measure it). Figma: presence; 2026 code layers, Motion, MCP. Apple iOS/macOS 26: Liquid Glass as literacy, not a web costume. Material 3 Expressive: the other OS pole; “expressive” without an axis becomes loud. Claude Design: canvas plus chat. Perplexity: inline citations as product UI. Arc: verify the product still exists in the form you are citing. ChatGPT Canvas packaging has moved; do not freeze a 2024 screenshot as 2026 UI.

Anti-references: Dribbble dashboards; shadcn-default; Awwwards-without-a-concept; “Build the future of work” landings; glass-on-glass; Tailwind indigo-500 (Adam Wathan, 7 August 2025).

Dated tells to ban in prompts

Using these as a default reads as unconsidered. The sin is defaulting. Still fine if earned: bento when spans mean something, grain when quiet, dark mode when designed, 3D when it is the medium, even glass as one toolbar with contrast solved.

Glassmorphism everywhere; blob / mesh / aurora heroes; purple-glow / indigo-pink gradient; three equal rounded-2xl feature cards; Lottie-everywhere; scroll-jacking as the site; 3D for 3D’s sake on a CRUD app; AOS / whileInView fade-up on every section; Inter for everything; dark mode as invert plus glow; custom fun cursors; parallax as personality; hamburger on desktop as hidden IA; cookie-wall first paint; stock 3D clay people / generic AI hero illustration; AI as a gradient badge.

Canonical briefing outline

Paste and fill. Merged from Figma Make, v0 (Esteban Suarez, 15 December 2025), and Saarinen. v0: “v0’s defaults are good. Specific constraints make them great.” Kosta: “AI nails the happy path every time. What it skips is everything around it.”

0. PROBLEM / INTENT
   - The job of this page in one sentence.
   - What happens if we don't ship it.
   - The decision the user is here to make.
   - Success: what "resolved" looks like (not what "pretty" looks like).

1. USER + MOMENT (context of use)
   - Who, on what device, under what time pressure, in what environment.
   - Frequency: once a month vs two hundred times a day (this decides motion).
   - Novelty: first-run vs muscle-memory (this decides flourish).

2. HIERARCHY (what speaks)
   - Primary: the one thing the eye must hit.
   - Secondary: supporting evidence.
   - Tertiary / recessive: metadata, chrome, legal.
   - Explicit: what is NOT on this page (progressive disclosure).

3. PRODUCT SURFACE (inventory)
   - Sections in order. Data each section shows. Actions the user can take.
   - Not "a dashboard": the actual widgets.

4. REFERENCES (register, not remix)
   - "The density of X, the editorial scale of Y, the motion restraint of Z."
   - One sentence each on what you are borrowing.

5. ANTI-REFERENCES (what this is not)
   - "Not the chrome of Dribbble dashboards."
   - "Not Inter + indigo + three feature cards."
   - "Not a WebGL hero on a settings page."

6. VISUAL SYSTEM (tokens, not vibes)
   - Type: one display face + one body face, with a ramp (e.g. 12 / 14 / 16 / 20 / 28 / 40).
   - Color: semantic roles (text, text-subdued, bg, bg-surface, border, danger, success, warning).
   - Space: a scale (4 / 8 / 12 / 16 / 24 / 32 / 48). No arbitrary values.
   - Radius: one default, one exception (and why). Elevation: one shadow language, or none.
   - Dark / light: both, via tokens, not hardcoded.

7. MOTION
   - Purpose of each animation (state change / attention / character) or none.
   - Duration budget (Emil: UI under 300ms; micro 100-150; standard 150-250; modal 200-300).
   - Frequency rule (Rauno: high-frequency keyboard UI gets no entrance flourish).
   - Reduced-motion path (Awwwards jurors read its absence as carelessness).

8. STATES (the thing models skip)
   - Default / populated.
   - Empty: write the copy; it must make someone want to fill it.
   - Loading: skeleton or inline, not a centered spinner unless the whole page is blocked.
   - Error: human language, recoverable.
   - Partial / stale / offline / permission-denied. First-run vs nth-run.

9. INTERACTION NOTES
   - What is clickable, what expands, what navigates.
   - Keyboard: command palette? enter-to-submit? escape-to-dismiss?
   - Touch: 44px hit areas; optical alignment on asymmetric icons.
   - Interruptible transitions vs cutscenes.

10. CONSTRAINTS + ANTI-PATTERNS
    - Device / breakpoint behavior.
    - A11y: contrast, focus, reduced motion, no custom cursor that hides the system one.
    - Forbidden: hardcoded hex, detached components, Inter-only, indigo-500, glass-on-glass, decorative parallax.

11. FIRST STEP (for models)
    - "Do not code until the ambiguities are resolved."
    - Or: "First step: build X with placeholder states." Then iterate in small scopes.

Model preamble

Paste at the top of a ChatGPT, Claude, v0, or Figma Make conversation. Also at 2026-model-preamble.txt.

You are designing to a 2026 craft baseline, not 2023 SaaS defaults.
Taste is rules, not vibes. If the problem, surface, or tokens are ambiguous, ask first.
Restate the problem, the hierarchy, and the bans before you draw or code.
Resolved: an author made choices. Hierarchy does work. Type was chosen. Empty, loading, and error exist. Motion has a job. Optical alignment beats bounding-box math.
Cite by register: "the density of Linear, the editorial scale of Stripe Press." Not "make it like Linear."
Never say modern, clean, premium, or wow.
Type: one display face plus one UI face, with a ramp. Tabular lining figures on numbers. text-wrap: balance on headlines, pretty on body. text-box-trim for optical padding.
Do not use Inter as the only face. Geist alone is already a tell.
Color: semantic tokens (text, text-subdued, bg, bg-surface, border, danger, success, warning). oklch() plus relative color plus light-dark(). Light and dark are first-class modes, not an invert.
No purple/indigo glow, mesh blobs, aurora heroes, or glassmorphism on content cards. Liquid Glass is OS navigation chrome; do not copy it in CSS. No glass-on-glass.
Layout: container queries (slot, not viewport). Subgrid for card internals. Bento spans are authored hierarchy, not three equal cards. Fluid type/space via clamp, not 375/768/1440 artboards.
Motion: under 300ms, interruptible, none on high-frequency keyboard UI. prefers-reduced-motion means the page remains a document.
Choreograph state change. Do not stagger fade-up on every section. Prefer View Transitions and scroll-driven CSS. Do not scroll-jack, Lottie-everywhere, or decorative parallax.
Interaction: keyboard, pointer, and touch as equals. A command palette executes actions; it is not a search box. Optimistic writes. Progressive disclosure. 24px minimum targets, 44px when you can.
AI-era: chat is intent; the canvas or document is the work. Controlled generative UI from a component registry, not raw HTML. Streaming is the in-progress interface, not a spinner. Inline citations on claims. Human-in-the-loop for high-stakes actions. Low confidence: stay in prose. No AI gradient badge.
Performance and accessibility are taste. INP jank is as embarrassing as a slow LCP. Non-Baseline features need an @supports gift path. WCAG 2.2 AA is the floor. WCAG 3 is not an audit target.
System: tokens only, no hardcoded hex. One default radius and one named exception. Density is a mode (compact / comfortable), not tighter padding.
Bans: Inter-only; bg-indigo-500; three equal rounded-2xl cards; whileInView stagger; custom cursor trails; dark-mode glow orbs; stock 3D clay people; hamburger-on-desktop as IA; cookie-wall first paint; generic headlines ("transform how you work"); emoji feature icons; happy path only.
First step: do not code until ambiguities are resolved, or build one surface with placeholder states. Smaller scope, more detail.

Uncertainties (do not bluff)

Open as of 30 August 2026:

1. Firefox scroll-driven animations. MDN still lists them experimental. Trust MDN on ship day.
2. display: grid-lanes. Safari-first (reported 26.4, March 2026). Chromium/Firefox timeline unclear. Not Baseline.
3. JPEG XL. Mozilla Intent to Ship 24 August 2026 (Jake Archibald). Chrome stable still widely reported as flag-gated. AVIF remains the responsible primary.
4. WCAG 3.0 date. Draft of 3 March 2026. Recommendation year is not a W3C commitment.
5. OpenAI Canvas chrome. Packaging moved. Do not freeze a 2024 screenshot as 2026 UI.
6. Arc Browser. Confirm the product before citing as a living reference.
7. Linear Agent (reported April 2026) and Notion 3.2 agent views. Secondary roundups only. Confirm on first-party changelogs.
8. Any conversion percent or “67% of SaaS.” Discard.

Keep out of a system default: style queries (incomplete in some engines); contrast-color() (still settling; not a WCAG oracle).

Sources

WCAG 2.2 · Config 2026 recap · Saarinen, Design is more than code · Kowalski, Developing Taste · Agents with Taste · Kosta, Spot the Slop · How to prompt v0 · Apple Liquid Glass · text-box-trim · View Transitions · container queries · INP · OKLCH · Freiberg, Invisible Details · Matuzovic, grid-lanes · Hon Tran · Claude Design · Utopia · JPEG XL intent