How to use this: skim the area names on the left — that's the map. When something looks off, find the specimen that matches what you see, and use its name. The last section, the Phrasebook, works backwards: it turns what you'd naturally say into the exact term to point at.
A Wall of Styles
Before the vocabulary, the vibes. Whole aesthetics you can point at by name — "make it feel like the brutalist one", "I want the aurora-glass look". Each is a real, current design language, not a filter.
WEB
Page Anatomy
The parts of a page, top to bottom. Learn these first — most "change this" requests are really "change this part," and naming the part is 90% of the work.
Hero
You say: "the big top section"
The first full screen — usually a large headline, supporting line, one CTA, and a background image or video. Sets the entire tone.
Above the fold / the fold
You say: "before I scroll"
Everything visible without scrolling. The most valuable real estate on the page — old newspaper term for the top half.
Navbar / nav / header
You say: "the top menu bar"
Logo + navigation links. Sticky = stays fixed while scrolling. The mobile menu button (three lines) is a hamburger.
Eyebrow / kicker
You say: "the little label above the title"
Small uppercase text sitting above a heading to categorise it. You're reading them on every section here.
CTA (call to action)
You say: "the main button"
The button you most want clicked — "Book now", "Get started". The primary CTA is the loud one; a secondary is quieter beside it.
Section / band / block
You say: "that strip / that part"
A horizontal slice of the page. A full-bleed section runs edge-to-edge with no margins.
Footer
You say: "the bottom bit"
Closing zone: contact, secondary links, legal, socials. A fat footer is a big multi-column one.
Breadcrumb
You say: "the Home > Page > trail"
The small "you are here" path near the top of inner pages showing where you are in the site.
Layout & Structure
How content is arranged in space. When a page feels "cramped", "messy", or "off", the fix is almost always one of these.
Whitespace / negative space
You say: "give it room to breathe"
Empty space around and between things. More of it reads as premium and calm; too little feels cheap and cramped. It doesn't have to be white.
Grid / columns
You say: "line things up properly"
The invisible column system everything snaps to. Gutters are the gaps between columns. Off-grid = the "messy" feeling.
Container / max-width
You say: "stop it stretching so wide"
A cap on how wide content gets on big screens, keeping text readable instead of one endless line.
Bento grid
You say: "boxes of different sizes, like Apple"
A tiled layout of unequal rounded cards — like a bento lunchbox. Very current; great for feature showcases.
Visual hierarchy
You say: "what should I look at first?"
The deliberate order your eye travels — set by size, weight, colour, and space. Weak hierarchy = "everything shouts equally".
Alignment
You say: "the edges don't line up"
Shared edges between elements. Ragged, inconsistent alignment is the single most common thing that makes a page feel amateur.
Z-pattern / F-pattern
You say: "guide the eye"
How eyes scan a page — a Z across simple hero layouts, an F down text-heavy pages. Layout works with it, not against it.
Rhythm / spacing scale
You say: "the gaps feel random"
Consistent, repeating spacing (8, 16, 24, 32…). Random gaps feel sloppy; a scale feels intentional.
Typography
Type is 90% of most designs. These are the exact knobs — so you can ask for "tighter tracking" instead of "make the text look nicer".
Typeface vs. Font
You say: "change the lettering"
Typeface = the design (Helvetica). Font = one size/weight of it (Helvetica Bold 14px). Serif has little feet; sans-serif doesn't; mono is fixed-width like code.
Tracking / letter-spacing
You say: "spread the letters out"
Even spacing across a run of letters. Kerning is the same idea but between specific pairs. Loose tracking on small caps = elegant labels.
the vertical
space between
lines of text.
Leading / line-height
You say: "lines are too cramped / too airy"
The vertical gap between lines. Too tight = suffocating; too loose = disconnected. Body text usually wants ~1.5×.
Type scale / hierarchy
You say: "the sizes feel random"
A fixed set of sizes with clear jumps between heading levels. Display type is the huge hero size. Big jumps = confident.
Weight
You say: "make it bolder / thinner"
Thickness of the strokes — Thin, Regular, Medium, Bold, Black. Mixing two weights of one typeface is a cheap, reliable way to look designed.
Measure / line length
You say: "the paragraphs are too wide to read"
Characters per line. Comfortable reading is ~45–75. Too wide and the eye loses its place jumping back to the next line.
Colour & Theme
Colour sets emotion before a single word is read. The vocabulary for asking precise changes instead of "make it warmer".
Palette
You say: "the colour scheme"
The full set a design draws from: a primary, an accent (the pop), neutrals (backgrounds/text), and semantic colours for success/error.
· Value
Hue / Saturation / Value
You say: "make it warmer / less intense / darker"
Hue = which colour. Saturation = how vivid vs. grey. Value = how light/dark. Three separate dials, not one.
Gradient
You say: "blend two colours"
A smooth fade between colours. Linear (straight), radial (from a point), or a soft blobby mesh gradient (see Materials).
Contrast
You say: "I can barely read that"
Difference between text and its background. Low contrast is the #1 accessibility fail — grey-on-grey looks chic but many can't read it.
Theme / dark mode
You say: "do a dark version"
One design, two colour sets. Good dark mode isn't just inverted — contrast and accents are re-tuned. This page has both (try your system toggle).
--radius:14px
Design tokens
You say: "change it everywhere at once"
Named variables for colours, spacing, radii. Change the token, and every place using it updates — how you keep a whole site consistent.
Depth & 3D
The whole reason flat pages feel flat. Hover any specimen — these are the effects that make a screen feel like it has a front, a back, and real light. Grouped from "fake depth" (CSS tricks) to "real 3D" (a rendered scene).
The one idea under all of this: light and layers. Depth is faked by controlling what's in front (z-index / layering), how light falls (shadow & glow), and how things shrink into the distance (perspective). Real 3D just does it with an actual rendered scene instead of tricks.
Parallax
You say: "make the background move slower than the front"
Layers moving at different speeds as you scroll or move the mouse — near things fast, far things slow. Your brain reads it as depth. The signature "premium" scroll effect.
Perspective / Z-axis
You say: "tilt it into the screen"
Adds a front-to-back dimension so things can face toward or away from you. The vanishing point is where parallel lines converge in the distance.
3D tilt / hover-tilt
You say: "cards that tilt toward the cursor"
A card rotates to follow your pointer, often with a moving specular shine. Feels tactile and alive — hugely popular on product cards.
Extruded type / raised 3D
You say: "make the letters look chunky / carved out"
Text with stacked shadows giving it real thickness, like it's cut from a solid block. Bevel = angled edges; emboss = pressed-in.
Isometric
You say: "that angled 3D look, like a video game map"
3D drawn at a fixed angle with no perspective — far things stay the same size. That clean, technical, "SimCity" look.
Elevation / shadow depth
You say: "lift it off the page"
How high an element floats, expressed as shadow size. Bigger, softer shadow = higher up. A consistent shadow scale = a real depth system (Material Design's core idea).
Glow / bloom / neon
You say: "make it light up"
Light spilling out past an element's edges. Bloom is the cinematic version (bright things bleed). The heart of neon/cyberpunk looks.
Neumorphism
You say: "soft buttons that look pushed out of the background"
Elements moulded from the same surface using twin light/dark shadows. Soft and tactile. Cousin of skeuomorphism (making things look like real objects).
OF FIELD
Fog / Depth of field
You say: "blur / fade the far stuff"
Fog fades distant things toward the background colour; depth of field blurs what's out of focus — both are how real cameras and eyes signal distance.
Glassmorphism
You say: "frosted glass panels"
Semi-transparent panels that blur whatever's behind them (backdrop blur), with a bright thin border. Signals a layer floating above the content.
Fake 3D vs. real 3D. Everything above is CSS "faking" depth — cheap, fast, works everywhere. Real 3D renders an actual lit scene you can spin, using WebGL / Three.js (see The Technologies). Terms you'll hear there: mesh (the 3D object), material / PBR (how its surface reacts to light), ambient occlusion (soft shadows in crevices), orbit controls (drag to rotate), and shader (code that paints every pixel — where the magic effects live).
Motion & Animation
How things move. Good motion is felt, not noticed. The difference between "cheap" and "expensive" motion is almost always the easing.
Easing / ease · spring
You say: "the animation feels robotic / cheap"
The acceleration curve of a movement. Linear (grey) feels mechanical. Ease (cyan) speeds up then slows — natural. Spring (amber) overshoots and settles — playful, physical.
Stagger
You say: "have them appear one after another"
Animating a group with a small delay between each item, so they cascade instead of arriving all at once. Makes lists and grids feel choreographed.
Marquee / ticker
You say: "a strip that scrolls sideways forever"
Content sliding continuously in one direction — logos, words, images. A staple of modern hero and "trusted by" strips.
Scroll reveal / on-scroll animation
You say: "fade things in as I scroll to them"
Elements animate in when they enter the viewport. Scrollytelling is the advanced version where scrolling drives a whole sequence.
Micro-interaction
You say: "make it react when I hover / click"
Tiny feedback moments — a button lifting, an icon springing, a toggle sliding. Small, but they're what make a UI feel responsive and crafted.
reduced-motion
Reduced motion
You say: "tone it down for people who get motion sick"
A system setting some people turn on. Well-built pages detect it and cut heavy animation. Every demo here respects it.
Materials & Effects
The texture and finish of a design — what a surface is made of. These turn a flat colour block into something with atmosphere.
Mesh gradient
You say: "soft blurry blobs of colour"
Multiple colours bleeding together in soft clouds rather than a straight fade. Dreamy, modern, everywhere in 2023–2026 hero backgrounds.
Aurora
You say: "slow northern-lights glow behind it"
Big, soft, slowly-drifting bands of colour, blurred heavily. A calmer, atmospheric cousin of the mesh gradient.
Grain / noise / texture
You say: "add a bit of film grain / stop it looking so flat"
A fine speckled texture over a surface. Kills the "plasticky digital" flatness and adds an analogue, tactile warmth.
Frosted glass / backdrop blur
You say: "blur what's behind the panel"
Blurring the content sitting behind a semi-transparent element. Used on sticky navbars and overlay panels so text stays readable over busy backgrounds.
Duotone
You say: "tint the photo in two colours"
Recolouring an image with just two tones (shadows one colour, highlights another). Instantly on-brand, editorial, Spotify-ish.
Chromatic aberration
You say: "that glitchy red/blue colour-split"
Red and blue channels offset slightly, mimicking a lens defect. Reads as glitch, retro-tech, or "digital". Use sparingly.
Vignette
You say: "darken the edges to pull focus to the middle"
Corners darkened so the eye is funnelled to the centre. Cinematic; great over hero images and video.
Inset / inner shadow
You say: "make it look pressed in / carved"
Shadow on the inside of a shape, so it recedes into the surface instead of lifting off it. The opposite of elevation.
Components
The reusable building blocks. Knowing the right name means you can say "add a toast" instead of "a little message that pops up and disappears".
Button variants
You say: "make it a proper button"
Primary (filled, loud), secondary/outline, and ghost/text (no fill). A pill button is fully rounded.
Chip / Tag / Badge
You say: "those little labels / pills"
Badge = tiny status marker ("NEW", a count). Chip/Tag = a small removable label, often for filters or categories.
Toast / snackbar
You say: "a little confirmation that pops up then fades"
A brief, self-dismissing message confirming an action ("Saved!"). Non-blocking — you keep working while it's up.
Accordion
You say: "click to expand, like an FAQ"
Stacked rows that expand to reveal content when clicked. Perfect for FAQs and long content you want collapsed by default.
Skeleton loader
You say: "show grey placeholder shapes while it loads"
Shimmering grey blocks in the shape of the content that's coming. Feels faster than a spinner because the layout is already there.
Carousel / slider
You say: "swipe through images"
A rotating set of slides with dots or arrows. A hero slider is a full-width one at the top. The dots are pagination.
Modal / dialog / overlay
You say: "a popup box over a dimmed background"
A focused box that appears over the page, dimming everything behind it (the dim layer is a backdrop/scrim). Demands attention before you continue.
Tooltip
You say: "a hint that shows on hover"
A small floating label that appears when you hover or focus something, explaining it. For short hints only, never essential info.
States & Edge Cases
The same element looks different depending on what's happening to it. Designs feel unfinished when these are forgotten.
Hover · Focus · Active
You say: "nothing happens when I hover"
Hover = cursor over it. Focus = selected by keyboard (must have a visible ring for accessibility). Active = the moment of clicking.
Disabled
You say: "grey it out until it's ready"
A control that's visibly unavailable — faded and non-clickable — usually because a step isn't done yet.
Loading state
You say: "show it's working, not frozen"
Spinner, progress bar, or skeleton while data arrives. Without it, users think the page has broken.
Empty state
You say: "what shows before there's any content?"
What a screen shows with no data yet — first visit, empty inbox. A big missed opportunity most designs waste; good ones guide the next step.
Error state
You say: "what happens when it goes wrong?"
Clear messaging when something fails — what broke and how to fix it. No jargon, no bare "Error 500", no blame.
Responsive / breakpoints
You say: "it breaks on my phone"
The layout reflowing for different screen widths. A breakpoint is a width where the layout changes (e.g. columns stack). Mobile-first = design the phone version first.
The Technologies
The actual tools that build these things. You don't need to code them — but naming the right one tells whoever's building exactly which door to open. Roughly ordered simple → advanced.
HTML · CSS · JS
The three raw materials of every website. HTML = structure, CSS = looks, JavaScript = behaviour. Most of the demos on this page are pure CSS.
Tailwind CSS
A popular shorthand system for writing CSS fast. If someone says "it's built in Tailwind", they just mean styling is done with utility classes.
GSAP
The industry-standard animation engine. Reach for it when you want serious, timeline-based, scroll-driven motion — the award-winning stuff.
Framer Motion
A friendlier animation library for React apps. Great for spring physics, gestures, and page transitions with little code.
Lottie
Plays lightweight vector animations exported from After Effects. How you get a slick animated icon or illustration without heavy video.
WebGL / WebGPU
The browser's engine for real 3D graphics, drawing straight to the graphics card. The raw power under everything 3D — the flowing colour hero at the top of this page is a live WebGL shader. WebGPU is the newer, faster generation.
Three.js
The most-used library for 3D on the web — makes WebGL usable. If you want a spinning model, a particle field, or an immersive scene, this is the name to say.
React Three Fiber (R3F)
Three.js for React apps. Same 3D power, structured like modern app code. What most new 3D sites are actually built with.
Shaders (GLSL)
Tiny programs that colour every pixel on the graphics card. Where the jaw-dropping effects live — liquid, plasma, morphing, distortion. Advanced, but the source of "how did they DO that".
Spline
A visual, no-code 3D design tool — build a 3D scene by dragging, then embed it. The fastest route to real 3D without writing shaders.
SVG
Razor-sharp vector graphics that scale to any size and can be animated. Logos, icons, and line illustrations are usually SVG.
Canvas
A drawing surface for generative 2D graphics and particles — think animated dot-fields and flow effects. Lighter than full 3D.
The Phrasebook
Backwards, the way you'll actually use it: start from what you'd instinctively say, get the real term to point at, and where in this guide it lives.