A field guide for people who build with AI agents
133 design terms in plain English — each with a prompt you can hand straight to your agent. Because “make it pop” isn’t a spec.
“Tighten the leading, mute the neutrals, soften the shadows” lands on the first try. “Make it cleaner” gets you five rounds of almost. Naming the thing is the skill.
Models have read decades of design writing. Use the exact term and you summon all of it — the conventions, the ratios, the edge cases — without explaining a thing.
Once you can name what you’re looking at, you can’t unsee it. Vocabulary is how “something feels off” becomes “the vertical rhythm is broken” — and then a fix.
No matches. Fittingly, this is an empty state — a screen’s chance to explain itself instead of going blank.
How a screen is carved up before a single pixel gets styled.
An invisible system of columns and rows that everything on the page snaps to. Grids are why good layouts feel calm even when they're busy.
Lay the features out on a 12-column grid — cards span 4 columns each on desktop.
The gap between grid columns. Wider gutters feel airy and editorial; tight gutters feel dense and data-heavy.
Widen the gutters to 32px — the columns are bleeding into each other.
A viewport width where the layout changes — columns collapse, nav becomes a menu, type scales down. Design the content, then let breakpoints follow.
Add a breakpoint around 768px where the sidebar collapses into a top bar.
The visible area of the browser window. Units like vw and vh size things relative to it — useful for heroes, dangerous for text.
Make the hero fill the viewport height, but cap it so it doesn't stretch on huge monitors.
What's visible before any scrolling, borrowed from newspaper layouts. Your value proposition and primary action belong here.
The signup CTA is below the fold on a laptop — pull it up into the hero.
Empty space used on purpose — also called negative space. It isn't wasted room; it's what gives elements breathing space and importance.
Don't add more content — add whitespace. Double the space around the pricing table.
Elements sharing an invisible edge or axis. Even a few pixels of misalignment reads as sloppy long before anyone can say why.
Left-align the icon, heading, and body text in each card — they're all off by a few pixels.
The proportional relationship of width to height, like 16:9 or 1:1. Locking it stops images and video from stretching or jumping as they load.
Force the thumbnails to a 4:3 aspect ratio and crop with object-fit: cover.
Content that runs edge-to-edge, ignoring the page's side margins. Great for hero images and section backgrounds that need drama.
Make the testimonial band full-bleed while keeping its text inside the content column.
An element that scrolls with the page until it hits an edge, then pins there. Used for navs, table headers, and section labels.
Make the table header sticky so the column labels stay visible while scrolling rows.
Which elements sit on top of which — controlled by z-index. Dropdowns behind modals and tooltips under headers are stacking bugs.
The dropdown is rendering underneath the sticky header — fix the stacking order.
A grid where items of varying heights pack tightly like brickwork, Pinterest-style. Good for image feeds, chaotic for scannable content.
Switch the gallery to a masonry layout so tall and short images pack together without gaps.
How much information fits in a given area. Dashboards want compact density; marketing pages want comfortable. Pick one per surface, deliberately.
This table is for power users — increase the density: tighter row height, smaller padding.
The screen divided into two persistent panes — often a list on the left, detail on the right. The backbone of mail clients and settings pages.
Use a split layout: conversation list at 320px on the left, the thread fills the rest.
Ninety percent of interface design is text. Here's how to talk about it.
The typeface is the design (Inter); a font is one specific cut of it (Inter Semibold 16px). Saying either is fine — knowing the difference is the flex.
Keep the typeface, but swap the heading font to the semibold cut.
Letterforms with small strokes at the ends — bookish, editorial, trustworthy. Pairs beautifully with a clean sans for UI chrome.
Set the article body in a serif for warmth, but keep buttons and labels in the sans.
Letterforms without the end strokes — clean, neutral, modern. The default voice of almost every interface you've ever used.
Use a geometric sans-serif for the whole app — something in the vein of Inter or Geist.
Every character occupies the same width. The voice of code, terminals, and anything technical — instant developer credibility.
Render the API keys and code snippets in monospace with a subtle background tint.
The thickness of strokes, from thin (100) to black (900). Weight contrast — bold heading, regular body — is the cheapest hierarchy you can buy.
Drop the headings from bold to semibold — 700 feels shouty at this size.
Vertical space each line of text occupies, classically called leading. Body text wants roughly 1.5; big headings tighten to 1.1 or so.
The paragraph feels cramped — bump line height to 1.6. Tighten the h1 to 1.1.
Horizontal space between all letters, a.k.a. tracking. Big display text usually tightens; ALL-CAPS labels need extra to stay legible.
Add letter spacing to the uppercase section labels — about 0.08em — and tighten the hero headline slightly.
Spacing between one specific pair of letters, like the awkward gap in 'AV'. Mostly the typeface's job, but worth naming when a logo looks off.
The 'To' pair in the logo wordmark has a gap — fix the kerning there specifically.
The length of a line of text. Around 45–75 characters is comfortable; full-width paragraphs on desktop are a readability crime.
Cap the article measure at 65 characters — max-width around 65ch on the prose container.
A fixed ramp of font sizes (12, 14, 16, 20, 25, 31…) generated from a ratio. Picking from a scale beats inventing sizes ad hoc every time.
Define a type scale with a 1.25 ratio from a 16px base and use only those steps.
The invisible line letters sit on. Aligning text to a shared baseline — not vertically centering boxes — is what makes mixed sizes look intentional.
The price and the '/month' label should share a baseline, not be center-aligned.
Digits that all share the same width, so numbers align in columns and don't jitter when they update. Essential for tables, timers, and prices.
Use tabular figures in the stats column — font-variant-numeric: tabular-nums — so the digits stop dancing.
Cutting text off with an ellipsis when it can't fit. Fine for titles in tight lists; hostile when it hides the only distinguishing words.
Truncate file names to one line with an ellipsis, and show the full name in a tooltip.
A lone word stranded on its own line (widow) or a lone line stranded at a break (orphan). One word dangling under a headline reads as unfinished.
The headline leaves the word 'faster' widowed on its own line — use text-wrap: balance.
Stop saying "make it pop." Start saying exactly what you mean.
The pure color identity — red, teal, violet — independent of how light or intense it is. 'Shift the hue' means move around the color wheel.
Keep the same saturation but shift the hue from blue toward teal.
How intense or muted a color is. Fully saturated screams; desaturated whispers. Most 'this looks cheap' feedback is really 'too saturated.'
The background feels neon — desaturate it 30% so the CTA is the only vivid thing.
How close a color sits to white or black. A palette usually keeps one hue and steps lightness: 50 for backgrounds down to 900 for text.
Generate a 10-step lightness ramp of the brand blue, from a near-white 50 to a near-black 950.
A tint is a color mixed with white; a shade is mixed with black. 'A tint of the brand color' is the polite version of a pastel.
Use a light tint of the brand purple for the selected row, not full-strength purple.
The grays doing 90% of the work — text, borders, backgrounds. Slightly warm or cool neutrals give a product its temperature; pure #808080 gray feels dead.
Warm up the neutrals — shift the grays slightly toward beige instead of pure gray.
The one vivid color reserved for what matters: primary actions, active states, links. If everything is accented, nothing is.
Coral is the accent — use it only for primary buttons and active states, nowhere else.
Colors with assigned meaning: green success, red danger, amber warning, blue info. Never repurpose them — a green delete button breaks trust.
Add semantic tokens — success, warning, danger, info — and use them for toasts and form states.
The measured luminance difference between text and its background. WCAG asks for 4.5:1 on body text, 3:1 on large text. Not negotiable, and agents can check it.
Check every text/background pair against WCAG AA — flag anything under 4.5:1 and fix it.
A smooth blend between colors. Neighboring hues blend cleanly; distant hues can smear through gray in the middle unless you route around it.
Give the hero a subtle gradient from violet to blue — nearby hues so it doesn't go muddy.
How see-through something is, from 0 (invisible) to 1 (solid). Overlays, disabled states, and glass effects all live on translucency.
Dim the modal backdrop with black at 40% opacity instead of solid gray.
A modern color space where lightness actually matches human perception — equal lightness values genuinely look equally light. The right basis for generated palettes.
Rebuild the palette in OKLCH so every hue at step 500 has identical perceived lightness.
Schemes built from wheel relationships: analogous (neighbors, calm), complementary (opposites, tension), monochromatic (one hue, safe). Names for vibes.
Use an analogous scheme — blues through teals — instead of the current clashing complementary pair.
The difference between polished and cluttered is usually measured in pixels of air.
Space inside an element, between its edge and its content. Cramped buttons and suffocating cards are padding problems.
The cards feel airless — increase padding to 24px on all sides.
Space outside an element, pushing neighbors away. Padding is personal space inside the jacket; margin is distance from the next person.
Add more margin below each section — they're visually merging into one another.
Uniform spacing between siblings in a flex or grid container. One gap value beats a margin on every child — cleaner and no leftover edge spacing.
Drop the per-item margins and use gap: 16px on the grid instead.
Shorthand for an element's distance from its container's edges, most often with absolute positioning. 'Inset by 16px' pins it 16px from every side.
Position the close button inset 12px from the card's top-right corner.
A fixed menu of spacing values — 4, 8, 12, 16, 24, 32, 48, 64 — used everywhere. Arbitrary values like 13px and 27px are how inconsistency creeps in.
Snap all margins and padding to the 4px-based spacing scale — no arbitrary values.
A convention where sizes and spaces are multiples of 8 (with 4 for fine detail). It makes independent screens feel like one product.
Audit the settings page against the 8-point grid and round any stray values to it.
Consistent, proportional spacing down the page — headings, paragraphs, and sections stepping in a predictable beat. When it's off, pages feel randomly assembled.
The vertical rhythm is off — make space above each h2 double the space below it, consistently.
Nudging things until they look aligned rather than trusting the math. Play icons in circular buttons and quote marks in headings always need it.
The play icon looks off-center in the circle — optically align it by nudging it 1–2px right.
The tappable area around a control — at least 44×44px, whatever the icon's visual size. Tiny close buttons with tiny hitboxes are rage-inducing.
The icon can stay 16px, but expand its touch target to 44px with padding.
Figma-born sizing vocabulary: an element either hugs its content's size or fills the space its parent offers. Perfect shorthand for describing intent.
Buttons should hug their label text; the search input should fill the remaining row width.
Values that scale smoothly with the viewport between a floor and a ceiling — usually via clamp(). Type that resizes gracefully instead of jumping at breakpoints.
Make the hero heading fluid — clamp between 36px on mobile and 72px on desktop.
Name the part and the agent builds the right thing on the first try.
Primary (solid, one per view), secondary (outlined or tinted), and tertiary/ghost (text only). The ranking tells users what you want them to do.
Make 'Save' the solid primary, 'Preview' a secondary outline, and 'Cancel' a ghost button.
An action that deletes or irreversibly changes something — styled in the danger color and never placed where muscle memory expects 'confirm.'
Style 'Delete workspace' as destructive — red, separated from the other actions, with a confirm step.
A tiny status label — a count on an icon, 'New' on a menu item, 'Beta' on a feature. Chips and pills are its interactive, often dismissible cousins.
Add a small 'Beta' badge next to the Insights nav item — subtle, not screaming.
A contained surface grouping related content — image, title, meta, action — that reads as one unit. The workhorse of every dashboard and feed.
Show each project as a card: thumbnail on top, name, last-edited, and a kebab menu.
A dialog that blocks the page until dismissed. Reserve it for focused decisions; if the user might need the page behind it, use something non-blocking.
Open the export options in a modal with a clear primary action and an escape hatch.
A panel that slides in from an edge — 'sheet' on mobile. Keeps page context visible, so it beats a modal for details, filters, and settings.
Show task details in a right-side drawer instead of navigating away from the board.
A small floating panel anchored to the element that opened it, dismissed by clicking elsewhere. Richer than a tooltip, lighter than a modal.
Put the date-range picker in a popover anchored to the filter button.
A short text hint on hover or focus. For labels and clarifications only — never for content someone can't get on a touchscreen.
Add tooltips to the icon-only toolbar buttons, delayed about 500ms so they don't flicker.
A brief, self-dismissing notification sliding in from a screen edge — also called a snackbar. Confirmation, not conversation; add an undo when possible.
On archive, fire a toast: 'Conversation archived' with an Undo action, auto-dismiss in 5s.
A dropdown for choosing one option from a closed list. Under ~5 options, radio buttons or a segmented control show everything at once and beat it.
Replace the select with a segmented control — there are only three options.
A text input fused with a filtered dropdown — type to narrow, then pick. The right call whenever the list is long: countries, users, tags.
The assignee list has 200 people — make it a combobox with type-ahead filtering.
A keyboard-summoned search over every action in the app (⌘K). The power-user layer that makes a product feel fast and serious.
Add a ⌘K command palette with fuzzy search over navigation and common actions.
Stacked headers that expand one section at a time. Great for FAQs and dense settings; wrong for content everyone needs to read.
Collapse the FAQ into an accordion, first question expanded by default.
Peer views sharing one region, one visible at a time. Tabs switch content in place — if the URL should change, you want navigation, not tabs.
Split the profile page into tabs: Overview, Activity, Settings — Overview active by default.
A connected row of mutually exclusive buttons — an inline radio group that shows every option. Perfect for view toggles like list/grid or month/week.
Use a segmented control for the chart range: 1D · 1W · 1M · 1Y.
The 'you are here' trail — Home / Projects / Rebrand — with each ancestor clickable. Essential in anything hierarchical, noise in flat apps.
Add breadcrumbs above the file view showing the folder path, each segment clickable.
Splitting long lists into numbered pages. Its rivals: 'load more' buttons and infinite scroll. Data tables want pagination; feeds want scroll.
Paginate the results table at 25 rows per page, with the row-count summary on the left.
Gray placeholder shapes mimicking the layout while content loads, usually with a shimmer. Feels faster than a spinner because the page's structure arrives instantly.
Replace the loading spinner with skeleton rows matching the table's real column layout.
A user's visual identity — photo, initials on a colored background, or fallback icon, in that order. Stacked overlapping avatars imply a team.
Show assignee avatars, falling back to initials on a color derived from the user's name.
A full-width persistent message at the top of a page or section — 'Your trial ends in 3 days.' A callout is its inline cousin embedded in content.
Add a dismissible warning banner above the editor when the user is offline.
A switch for on/off settings that take effect immediately. If the choice needs a Save button, use a checkbox — a toggle promises instant effect.
Make 'Email notifications' a toggle that saves instantly, with a toast confirming the change.
The big opening section of a landing page: headline, supporting line, primary CTA, and usually a visual. It has one job — make the value obvious in five seconds.
Build a hero with a punchy headline, one-sentence subhead, single CTA, and a product screenshot.
Floating action button — a round button hovering above the content for the single most important action. One per screen, or it stops meaning anything.
On mobile, replace the toolbar's New button with a FAB in the bottom-right.
An interface is never one picture — it's every state it can be in.
How an element responds to a pointer resting on it — a lift, a tint, a cursor change. It whispers 'I'm interactive.' Touchscreens never see it, so it can't carry meaning alone.
On hover, lift each card 2px with a soft shadow and ease it over 150ms.
The visible outline on the element that keyboard focus is on. Removing it because it 'looks ugly' strands keyboard users — restyle it instead, ideally with :focus-visible.
Style the focus ring as a 2px brand-colored outline with 2px offset — visible on every interactive element.
The pressed moment — the instant a control is being clicked or tapped. A slight darken or scale-down makes the interface feel physical rather than filmed.
Add an active state to buttons: scale to 0.98 and darken slightly while pressed.
A control that's visible but inert — dimmed, unclickable, and honest about it. If users won't understand why it's disabled, hide it or explain it in a tooltip.
Disable Submit until the form validates, with a tooltip explaining what's missing.
What a screen shows with no data yet — first run, empty search, cleared inbox. The lazy version is a blank void; the good version explains and offers the first action.
Design the empty state for Projects: short encouraging line, small illustration, 'Create your first project' button.
How the UI behaves when things fail — inline field errors, dead-end pages, failed loads. Say what happened, keep the user's data, and offer a way forward.
On failed save, keep the form filled, show an inline error above the actions, and offer Retry.
Everything between action and result: spinners, skeletons, progress bars, disabled-with-spinner buttons. Under ~300ms, show nothing — a flash of spinner reads slower than silence.
Show the button's loading spinner only if the request exceeds 300ms, and keep the label visible.
Checking form fields as the user works instead of ambushing them at submit. Validate on blur, re-validate on change — never scream mid-keystroke.
Validate email on blur, show the error under the field, and clear it as soon as it's fixed.
Showing the result immediately and syncing in the background — the like turns red before the server agrees. Instant feel, with a rollback if the request fails.
Make favoriting optimistic: update the star instantly, revert with a toast if the request fails.
The visual cues telling you what something does — buttons look pressable, handles look draggable, links look clickable. 'Weak affordance' = 'nobody knows it's a button.'
The cards are clickable but don't look it — add affordance: hover lift, cursor pointer, a chevron.
A tiny contained moment of feedback — the heart pop, the checkmark drawing itself, the toggle's satisfying slide. Small enough to miss, big enough to make software feel alive.
Add a microinteraction to the checkbox: the check draws in over ~200ms with a slight bounce.
Waiting for a pause in input before reacting — search that fires 300ms after the last keystroke instead of on every one. Its sibling throttle limits to a steady maximum rate.
Debounce the search input by 300ms so we're not firing a request per keystroke.
Animation is seasoning: measured in milliseconds, ruined by excess.
How long an animation runs. UI motion lives between 100–400ms — hovers near 150ms, panels near 300ms. Anything approaching a second better be a showpiece.
The drawer feels sluggish — cut the open animation from 500ms to 250ms.
The acceleration curve of motion. Linear reads robotic; real objects speed up and slow down. Easing is the single biggest 'this feels cheap vs. premium' lever.
Nothing should animate linearly — apply an ease-out curve like cubic-bezier(0.16, 1, 0.3, 1) across the board.
Ease-out starts fast and settles — right for things entering, since the UI responds instantly. Ease-in starts slow and accelerates — occasionally right for exits, mostly just laggy-feeling.
Menus should ease-out on open so they feel snappy, and can ease-in slightly on close.
Physics-based motion defined by stiffness and damping instead of duration. A touch of springiness feels alive; too little damping turns your UI into a bobblehead.
Animate the modal in with a spring — noticeably bouncy is too much, just a hint of overshoot.
Animating a property between two states — background on hover, height on expand. The declarative workhorse: define what animates, how long, and with which curve.
Add a 200ms ease-out transition on background and border-color for all interactive elements.
Named waypoints an animation passes through, for motion more choreographed than A-to-B — pulses, shakes, orbits. The head-shake 'no' on a wrong password is keyframes.
On failed login, shake the form with keyframes — three quick 4px oscillations, then settle.
Starting siblings' animations a few dozen milliseconds apart so a list cascades in instead of thudding in as a block. Cheap choreography, expensive feel.
Stagger the cards' entrance by 50ms each so the grid cascades in from the top.
The paired animations for things appearing and disappearing. Exits should be faster than entrances — users are done with it; get it out of the way.
Toast enters over 250ms with ease-out, exits in 150ms. Never let it just pop out of existence.
Layers scrolling at different speeds to fake depth. A few percent of drift adds dimension; aggressive parallax is a 2013 time capsule and a motion-sickness trigger.
Give the hero illustration a subtle parallax — background drifts at 20% of scroll speed, no more.
The light sweep across skeleton placeholders that says 'still loading, not frozen.' One slow, subtle pass — a strobing shimmer is worse than none.
Add a shimmer to the skeletons: a soft highlight sweeping left to right every 1.5s.
An OS-level accessibility setting requesting minimal animation. Respect it via prefers-reduced-motion: swap movement for opacity fades. Non-optional in polished work.
Wrap all motion in a prefers-reduced-motion check — fall back to simple fades.
The aesthetic layer — and the names of the looks you're borrowing from.
How rounded corners are. Sharp reads serious and editorial; mid (8–16px) reads friendly SaaS; full-round pills read playful. Pick a radius scale and stay loyal to it.
Standardize radii: 8px inputs, 12px cards, fully rounded pill buttons — nothing in between.
Simulated height above the page, expressed with shadows: cards low, dropdowns middle, modals top. A consistent elevation ramp keeps depth believable.
Define three elevation levels — card, dropdown, modal — and stop hand-rolling shadows per component.
The shadow itself. Good ones are soft, layered, and barely-there — often two stacked shadows. Harsh dark offsets are the fastest way to look dated (unless you're doing neubrutalism on purpose).
Soften the card shadow — layer two: 0 1px 2px at 6% black and 0 8px 24px at 8%.
Designer-speak for a border or outline. Hairline strokes separate without weight; 'stroke instead of shadow' is a common flat-design trade.
Drop the card shadows and use a 1px hairline stroke in the border neutral instead.
Frosted-glass surfaces: translucent fill, backdrop blur, a light edge stroke. Gorgeous over colorful backgrounds, invisible over white, and a contrast hazard over busy ones.
Make the sticky nav glassmorphic — semi-transparent white with backdrop-filter: blur(12px).
Loud, raw, and proud: thick black strokes, hard offset shadows, unapologetic saturated fills, visible structure. A deliberate rejection of soft-and-safe SaaS polish.
Style the CTA neubrutalist: 3px black border, hard 4px offset shadow, flat yellow fill.
Digital things imitating physical ones — leather calendars, realistic knobs. Mostly historical, but its ghost lives on in every 'pressed' button and raised card.
Give the audio controls a lightly skeuomorphic feel — subtle knob shading, not full 2010 leather.
The reaction to skeuomorphism: no gradients, no shadows, pure color and typography. Clean but affordance-poor — 'flat 2.0' quietly re-added soft shadows so buttons look pressable again.
Keep the illustration style flat, but allow soft shadows on interactive elements for affordance.
Subtle noise texture over flat colors and gradients. Kills the sterile 'default CSS' smoothness, adds a tactile, printed feel — and hides gradient banding for free.
Overlay a fine grain at ~3% opacity on the hero gradient to keep it from feeling plasticky.
A dashboard-style mosaic of rounded tiles in mixed sizes, like a bento box — the dominant 2020s pattern for feature sections and portfolio highlights.
Lay out the features as a bento grid: one 2×2 hero tile, the rest filling 1×1 around it.
Icons come in families — outline, filled, duotone — with a shared stroke width and grid. Mixing families is the visual equivalent of mixing fonts mid-sentence.
Use one icon family throughout — outline style, 1.5px stroke, 24px grid. Replace the strays.
How strongly an element pulls the eye — a product of size, color, contrast, and density. Balancing weight across a layout is what 'it feels lopsided' is actually about.
The left column feels heavier — the dark image outweighs the text. Rebalance or crop it lighter.
The psychology underneath — why some interfaces just work.
The order the eye visits things, engineered with size, weight, color, and position. If everything is emphasized, the hierarchy is flat and nothing is.
Establish hierarchy: headline dominant, price second, metadata clearly third. Right now they all shout equally.
Gestalt principle: things placed close together are perceived as related. Group with space before you reach for borders and boxes.
Use proximity instead of dividers — tighten spacing within each field group, widen it between groups.
Gestalt principle: things that look alike are perceived as belonging together. It's also why all links must look the same — one styled differently reads as a different kind of thing.
All secondary actions should share one style — right now three different treatments imply three different meanings.
Same pattern, same look, same behavior, everywhere. Every inconsistency is a tiny tax on the user's attention — and the main thing design review exists to catch.
Audit the app for consistency: one date format, one save pattern, one confirmation style throughout.
Show the essentials, put the rest behind 'Advanced.' Complexity should be available, not ambient.
Show only name and visibility by default — move the other eight fields behind an 'Advanced settings' disclosure.
Bigger and closer targets are faster to hit. It's why primary buttons are large, why context menus appear at the cursor, and why screen corners and edges are prime real estate.
Per Fitts's law, make the primary CTA bigger and move it adjacent to the input, not across the layout.
More choices, slower decisions. Every option you add taxes every user who didn't need it. The justification behind short menus, defaults, and progressive disclosure.
Twelve plans is a Hick's law violation — show three tiers and link to a full comparison.
Users spend most of their time on other sites, so they expect yours to work the same way. Logo top-left goes home, cart top-right. Spend novelty on your product, not your navigation.
Keep the checkout flow conventional per Jakob's law — this is not the place to innovate.
The mental effort a screen demands — parsing, remembering, deciding. Every element, option, and inconsistency adds load. Simplicity is measured here, not in element count.
Reduce cognitive load on this form: group related fields, add sensible defaults, cut the two optional questions.
Eyes sweep text-heavy pages in an F (down the left edge) and simpler layouts in a Z. Put what matters along the path — the top-left is gold, the mid-right is Siberia.
Restructure for F-pattern scanning: front-load keywords into headings and lead sentences down the left edge.
The action you most want taken — 'Start free trial,' not 'Submit.' One primary CTA per view, phrased as the value, visually unmissable.
There are three competing CTAs above the fold — keep 'Start building,' demote the rest to links.
Designing so people with different vision, motor ability, and cognition can actually use the thing — contrast, keyboard support, screen-reader semantics, motion respect. Abbreviated a11y. Not a feature; a floor.
Run an accessibility pass: contrast to WCAG AA, full keyboard operability, alt text, visible focus states.
The vocabulary of how design work is actually organized and shipped.
The complete kit a product is built from: components, tokens, patterns, and the rules for using them. Material and Apple's HIG are famous ones; serious products grow their own.
Follow the existing design system — reuse its components and tokens; don't invent new variants.
Design decisions stored as named variables — color-accent, space-4, radius-card — instead of hardcoded values. Change the token, change the product. The API between design and code.
Extract the hardcoded colors and spacing into design tokens as CSS custom properties, then reference only tokens.
The implemented, reusable building blocks — the code half of a design system. Radix, shadcn/ui, and Material UI are the ones your agent already knows by heart.
Build the form from our component library — no one-off inputs or buttons.
The documented rules of a brand's look and voice: logo usage, palette, type, tone. Narrower than a design system — rules on paper rather than parts in code.
Write a one-page style guide: palette with hex values, type scale, radius and shadow rules, voice notes.
A deliberately unstyled sketch of structure — boxes and labels, no colors, no fonts. Low fidelity is the point: nobody debates button shades while the layout is still in question.
Before styling anything, wireframe the dashboard — grayscale boxes showing placement and hierarchy only.
A static, high-fidelity picture of the final design — real colors, type, and content, but nothing clickable. The step between wireframe and prototype.
Turn the approved wireframe into a full mockup with the brand palette and real copy.
A clickable simulation of the flow, wired together before the real build. With agents, working HTML prototypes are often cheaper than fake ones — prototype in code.
Make a clickable prototype of onboarding — three linked screens, fake data is fine.
How content is named, grouped, and nested — the sitemap and the navigation's logical skeleton. When users say 'I can't find anything,' this is what's broken.
Rework the IA: flatten settings from four levels to two and group by user goal, not by internal team.
The step-by-step path through a task — every screen, decision, and dead end from entry to done. Map it before building it; every extra step sheds users.
Map the checkout flow end to end, count the steps, and cut it from six to four.
Brad Frost's hierarchy for composing interfaces: atoms (button) → molecules (search bar) → organisms (header) → templates → pages. A shared language for component granularity.
Structure the components atomically — build the button and input atoms first, then compose the search molecule.
Using elements for their meaning — nav, main, button, h1 — not divs styled to fake it. Free accessibility, free SEO, and the difference between markup and div soup.
Replace the div soup with semantic HTML — real buttons, nav/main/footer landmarks, one h1, ordered heading levels.
Attributes that tell assistive tech what custom widgets are and are doing — roles, labels, live regions. Rule one: prefer native elements; no ARIA beats bad ARIA.
Make the custom dropdown screen-reader friendly: proper ARIA roles, aria-expanded, and keyboard navigation.