A plain-English field guide
Talk Like a
Website Builder.
Most of the distance between "I don't like it" and getting exactly what you pictured is just vocabulary: knowing the real name of the thing on screen. Name the part and the edge, and whoever is building it (a designer, a developer, or an AI) gets it right the first time instead of guessing. Every word below ships with a little working picture of the thing so you learn it on sight.
How to read each tile: the picture on top is a live mini-version of the real thing (it shows its meaningful state by default; hover a tile to see the ones that move). Under it: the name and its one-word builder tag, what it is, and the exact words to say.
01 · Name the part
Call the component by its real name
Point at a thing on screen and the builder's name for it is one word. Use that word and you skip three rounds of "no, the other thing."
Get started
Hero hero
The top full-width band, the first thing seen above the fold. One headline, one action.
say "tighten the hero, one headline, one button"
Carousel carousel
A swipeable horizontal row of cards or images. One peeks at the edge to hint "more".
say "make it a carousel, snap scroll, 3 visible on desktop, 1 on mobile"
⌄
›
Accordion accordion
Stacked rows that expand to reveal content on click. The FAQ pattern. (Hover the tile.)
say "put the FAQ in an accordion, one open at a time"
CancelOK
Modal / Dialog modal
A box floating over a dimmed page that blocks the rest until you close it.
say "open this in a modal, click-outside to close"
Drawer drawer
A panel that slides in from an edge (side or bottom). Mobile menus, filter panels.
say "the filters live in a right-side drawer"
⌄
Dropdown / Select select
A field you click to reveal a list of choices. One sits highlighted.
say "make this a select with a custom chevron, solid background"
Tabs tabs
Switch between panels in the same spot without leaving the page.
say "split this into tabs: Overview, Activity, Settings"
DayWeekMonth
Segmented control segmented
2–4 joined buttons where exactly one is active. Day / Week / Month toggles.
say "use a segmented control, not a dropdown, for the view toggle"
123
Stepper / Wizard stepper
A multi-step flow with progress: Step 2 of 3. Onboarding, checkout.
say "turn signup into a 3-step stepper with a progress bar"
Home›Projects›Overview
Breadcrumb breadcrumb
The trail showing where you are. The last item is where you stand.
say "add a breadcrumb under the page title"
✓ Saved
Toast / Snackbar toast
A small temporary message in a corner: "Saved." Then it fades on its own.
say "show a toast on save, auto-dismiss after 3s"
More info on thisHover target
Tooltip / Popover popover
Tooltip = tiny hover label. Popover = a small clickable panel anchored to a button.
say "tooltip on hover, popover on click"
Skeleton loader skeleton
Grey shimmer blocks shaped like the content while it loads. Replaces spinners.
say "skeleton shimmer while loading, no spinner"
Add item
Empty state empty
What the screen shows when there's no data yet. Without one it looks broken.
say "design the empty state: icon, one line, one action"
Active
Badge / Chip badge
A small pill of status or a tag. "Active", "3 new", a category label.
say "add a status badge, green for active"
Data table table
Rows and columns of records, usually with sort, filter, pagination.
say "data table with sortable columns, 25 per page"
02 · The anatomy of a page
The sections a website is built from
A component is a part; a section is a whole stripe of the page. These are the blocks a website is assembled from, laid out here roughly in the order they stack down a real page, navbar at the top, footer at the bottom. Name the section and whoever's building it knows the exact block you mean.
Sign up
Navbar / Header navbar
The top bar on every page: logo on the left, links in the middle, the main action button on the right.
say "sticky navbar, logo left, one accent button right"
Announcement bar announcement
The thin strip above the navbar for one timely message: a sale, a launch, a notice. Usually dismissible.
say "add a dismissible announcement bar for the promo"
Trusted by
Logo cloud / Social proof logo cloud
A "trusted by" row of client or partner logos, greyed so they read as proof, not decoration.
say "logo cloud under the hero, greyscale, 'trusted by'"
Feature grid feature grid
Three or four cards, each an icon, a short title, a line of copy. The "what you get" block.
say "3-up feature grid, icon + title + one line each"
Learn more
Feature spotlight spotlight
One feature, big: image on one side, text and a button on the other. Alternate sides down the page.
say "feature spotlight, image left, text right, alternate"
1
2
3
How it works / Steps steps
The numbered 1-2-3 of how your thing works. Turns a vague offer into a clear path.
say "a 3-step 'how it works' row, numbered"
12kUSERS
99%UPTIME
4.9RATING
Stats band stats
A row of two to four big numbers with tiny labels. Proof at a glance: users, years, savings.
say "stats band, 3 big numbers with labels"
”
Testimonial testimonial
A customer quote with a face and a name. One strong quote beats five weak ones.
say "testimonial card, big quote, avatar and name"
$9Pick
Popular$29Pick
$79Pick
Pricing table pricing
Two to four plans side by side, one marked "Popular" and lifted to pull the eye.
say "3-tier pricing, highlight the middle as Popular"
⌄
›
FAQ faq
The objection-killer near the bottom: common questions in an accordion, one open at a time.
say "FAQ section in an accordion before the footer"
Start free
CTA band cta
A full-width colored band with one headline and one button. The "ready to start?" push.
say "full-bleed CTA band, one headline, one button"
Subscribe
Newsletter / Email capture newsletter
An email field and a subscribe button to catch visitors who aren't ready to buy yet.
say "newsletter capture, email field + subscribe"
Blog / Card grid card grid
Article or resource cards: a thumbnail, a title, a date. Your content and SEO surface.
say "blog index as a 3-column card grid"
Footer footer
The bottom anchor: brand, link columns, legal, socials. The site's filing cabinet.
say "multi-column footer, links grouped, copyright row"
03 · The words that fix spacing
Layout & spacing language
The vocabulary that ends the spacing fights. The screen is boxes inside boxes. These words say exactly which box and which edge. The split tiles show ✓ right vs ✗ wrong.
Padding inside
Space inside a box, between its edge and its content (the terracotta cushion).
say "more padding inside the card"
Margin outside
Space outside a box, pushing other boxes away (the gap between the two).
say "more margin between the two sections"
✓ left = right
✗ left=30 right=3
Symmetric padding even sides
Left padding must equal right. The right tile is a bug, not a style.
say "make the padding symmetric and measure the box edges"
Container / max-width container
The centered column that holds content so it doesn't stretch edge to edge (shaded = the margins).
say "keep it in a max-width container, centered"
Gutter / Gap gap
The consistent space between columns or stacked items (the striped bands).
say "even 16px gap between every card"
fold
Above the fold fold
What's visible before any scrolling (above the dashed line). The prime real estate.
say "the offer has to land above the fold"
Whitespace negative space
Empty room around things. Not wasted, it's what makes a page feel premium, not cramped.
say "give it more whitespace, it feels cramped"
✓ even
✗ jumpy gaps
Vertical rhythm rhythm
Consistent spacing between stacked elements, top to bottom, so nothing has dead gaps.
say "fix the vertical rhythm, the spacing jumps around"
Grid grid
A layout of rows and columns. "12-column grid", "2-column grid".
say "lay this out on a 2-column grid"
→
Breakpoint breakpoint
The screen width where layout changes (e.g. 768px). Below it, 2 columns become 1.
say "below the 768 breakpoint, collapse to one column"
Tap
Mobile-first 390px
Design the phone view first, then widen. Most traffic is a phone.
say "show me at 390px before you call it done"
Sticky / Fixed sticky
Sticky = stays put as content scrolls past. Fixed = pinned to the screen always.
say "make the nav sticky to the top"
full-bleed band
Full-bleed full-bleed
Stretches edge to edge with no margins, breaking out of the container.
say "make the hero image full-bleed"
A long title cut cleanly…
✓ truncate…tle clipped on the left
✗ side-cutOverflow / Truncate overflow
When content spills its box. Truncate ends it cleanly with "…"; a side-cut is overflow gone wrong.
say "the text overflows on the left, nothing should clip"
16:91:14:5
Aspect ratio ratio
The width-to-height shape of a box. 16:9 video, 1:1 square, 4:5 portrait.
say "lock the thumbnails to a 4:5 ratio"
Alignment align
How things line up: left / center / right (and top / middle / bottom).
say "left-align the labels, they're not on a line"
04 · Finish the look
Type, color & state, on sight
The polish layer. Same idea: see it, name it, ask for it.
AaAaaa
Hierarchy type scale
The size/weight ladder that tells the eye what to read first. Sizes come from a fixed scale.
say "stronger hierarchy, the headline and body look the same size"
AaAaAa
Weight weight
How bold the type is: 300 light → 600 semibold → 800 heavy.
say "make the heading heavier, bump it to 700"
TIGHT TRACKINGWIDE
Tracking letter-spacing
Space between letters. Tight for big headlines, wide for small caps labels.
say "tighten the headline tracking, loosen the label"
Accent & palette one accent
A near-black ink, one signature accent, and its softer tints. One accent per project, not five.
say "one warm accent, terracotta, tints for everything else"
Aa readable
✓ contrastAa too faint
✗ low contrastContrast contrast
The gap between text and background that keeps it readable. Too little and it disappears.
say "the gray text is too faint, raise the contrast"
DefaultHoverDisabledLoading
State default · hover · disabled · loading
Every button and field has many faces. "Looks done" usually means one was built and the rest forgotten.
say "show me all four states: default, hover, disabled, loading"
05 · The bits nobody names
The parts you see everywhere but can't name
You've seen every one of these a thousand times and never had a word for it. Here's the word. These are the small controls, icons and effects that fill the gaps between the big sections, the stuff that makes a site feel finished. Name it and you can ask for it.
Hamburger menu hamburger
The three-line icon that opens the menu on mobile. Tap it and the nav slides in.
say "hamburger menu under 768px, opens a drawer"
kebab
meatball
Kebab / Meatball menu kebab
The "more options" dots. Vertical is a kebab, horizontal is a meatball. Both hide a small menu.
say "put the extra actions behind a kebab menu"
New featureA bigger headline
Eyebrow / Kicker eyebrow
The small label sitting above a headline. Sets context in two words before the big line lands.
say "add an eyebrow label above the hero headline"
PrimarySecondary
Ghost / Outline button ghost
The see-through bordered button next to the solid one. Marks the secondary, lower-priority action.
say "make the secondary a ghost button, outline only"
on
off
Toggle / Switch toggle
The sliding on/off switch. For instant settings, not a checkbox (those wait for a Save).
say "use a toggle for that setting, not a checkbox"
+5
Avatar stack / Facepile facepile
Overlapping profile circles ending in "+5". Shows who, or how many, without a full list.
say "show members as an avatar stack with a +count"
🔔3
Notification badge badge dot
The little red count clinging to an icon. The unread or needs-attention signal.
say "notification badge on the bell, red unread count"
Search bar search
An input with a magnifier icon. Looks different from a plain field so people know to type a query.
say "search bar with a magnifier icon, rounded"
Go to dashboard
New project
Command palette ⌘K
The keyboard-launched search/jump box (hit ⌘K). Power users navigate without touching the mouse.
say "add a ⌘K command palette to jump anywhere"
Bento grid bento
A grid of mixed-size tiles, some big, some small. The "Apple keynote" feature mosaic.
say "lay the features out as a bento grid"
Marquee / Ticker marquee
A strip of logos or text that scrolls on its own, looping forever. Also called a ticker.
say "logo marquee, auto-scroll, pause on hover"
↑
Floating button / Back-to-top fab
The round button pinned bottom-right (a back-to-top, or a "+"). "FAB" = floating action button.
say "a back-to-top FAB appears after scrolling"
Scroll progress bar progress
The thin bar at the very top that fills as you scroll, showing how far down the page you are.
say "add a scroll progress bar pinned to the top"
Cookie / Consent banner consent
The privacy strip that slides up on a first visit asking to accept cookies.
say "cookie consent banner, accept / decline, dismissible"
‹123…9›
Pagination pagination
The numbered 1 2 3 … row that splits a long list into pages. Different from a "load more" button.
say "paginate the list, 25 per page, numbered"
or
Divider with label divider
A line that separates content, sometimes with a word in the middle ("or"). A visual breath.
say "divider with 'or' between the login options"
We'll never share this.
Enter a valid email.
Helper & error text helper
The small line under a field: grey for a hint, red for an error. Tells people exactly what went wrong.
say "helper text under the field, red message on error"
Browser / Device mockup mockup
A screenshot framed in a fake browser or phone shell, so a product shot reads as real software.
say "put the screenshot in a browser mockup frame"
06 · The upgrade
Vague phrase → clear request
Same intent, two ways to say it. The left makes the builder guess; the right makes them act. Steal the right column.
"make it look nicer"
"one focal hero, tighten vertical rhythm, consistent 8px spacing, more whitespace around the headline"
"the padding is weird"
"left and right padding aren't equal — make the container symmetric and measure the box edges, don't eyeball it"
"add a slider"
"add a carousel with snap scroll, 3 cards visible desktop, 1 on mobile, swipe on touch"
"this looks generic / AI-made"
"kill the AI tells — no purple-blue gradient, no centered 3-column grid, warm editorial palette, one accent color, real motion"
"it's broken on my phone"
"at 390px it overflows — collapse to one column below the 768 breakpoint and screenshot it to prove it fits"
"the dropdown is cut off"
"the select truncates its options — solid background and a custom chevron so nothing clips"
"add some animation"
"subtle motion only — fade-up on entrance, hover lift on cards, spring easing, respect reduced-motion"
"show me before it's final"
"share a quick preview at desktop and at 390px so I can mark up changes before sign-off"