Web Design Lexicon

"Use an asymmetric layout — the hero text should be heavy left, with negative space on the right."

"Pin the section headline as the content scrolls past it on the right."

"Let the image bleed full-width into the color section below, no gap."

"Stagger the feature cards — the middle one should sit lower than the outer two."

"Use a diagonal clip-path to slice the transition from the hero to the next section."

"Lay this out on a Z-pattern — logo top-left, value prop top-right, CTA bottom-right."

"Create a clear focal point — the CTA should be the first thing the eye lands on, not competing with anything."

"Make the hero headline display type — 120px+, almost graphic in scale."

"Mix a thin and heavy weight in the same headline — the company name in bold, the tagline in thin italic."

"Repeat the category name at low opacity as a background texture behind the section."

"Section labels should be tracked uppercase at small size — like a magazine eyebrow."

"Pair a strong editorial serif for headlines with a clean geometric sans for body."

"Use a condensed typeface for the hero — tall and tightly packed, not wide and spacious."

"Add a drop cap to the opening paragraph — 3 lines tall, serif, no color."

"Pull that sentence out as a pull quote — 28px italic, gold left bar, centered in the column."

"Type on image — add a dark gradient scrim at the bottom so the white headline is readable at all screen sizes."

"Apply optical kerning to the display headline — especially the AV and To pairs."

"Be very generous with whitespace — the page should feel like it has room to breathe."

"Dense layout — pack the features section tightly but keep it scannable."

"Vary the rhythm — alternate between tight and spacious sections as you scroll."

"Use gestalt proximity — the label and its field should be tighter together than the gap between fields."

"Use a consistent spacing scale — 4, 8, 16, 32, 64px only. No 15px, no 22px, no guessing."

"Deep navy owns the page — use one gold accent only on the primary CTA and key stats."

"Keep it fully monochromatic in slate blue — light, mid, and dark tones only, no other hues."

"Add a subtle grain texture to the hero background — like a matte finish, not glossy."

"The background should feel like warm off-white linen — textured, not stark white."

"Don't use pure grey — tint it slightly warm toward the brand. #f4f2ee instead of #f4f4f4."

"Stagger the card reveals on scroll — each one fades in 80ms after the last."

"Light parallax on the hero background — it should drift slower than the text above."

"Add cursor magnetism to the CTA button — it should subtly pull toward the mouse."

"Use spring easing on the nav drawer — it should overshoot slightly and settle."

"Trigger a fade-up on each section as it scrolls into view — 0.4s ease-out, threshold 15%."

"Add micro-interactions to the action buttons — the heart should bounce on click, not just change color."

"On hover: image scales 1.04, overlay fades in 0.2s, then CTA slides up 0.15s later."

"Go editorial — think Kinfolk or NYT Magazine. Type-led, generous space, refined."

"Lean brutalist — thick borders, system fonts, no softness, form follows function aggressively."

"Swiss International Style — strict grid, Helvetica-like type, flat red and black geometry."

"Make it organic and tactile — warm off-whites, soft rounded shapes, feels handcrafted."

"Quiet luxury — no flashy gradients, just excellent spacing, a refined serif, and gold used once."

"Retro-futurist — orange and charcoal, geometric type, feels like a 1979 space agency report."

"Glassmorphism on the card — white at 12% opacity, backdrop blur 20px, 1px white border."

"Art Deco aesthetic — symmetrical, gilded, angular ornament. Think Gatsby poster meets modern type."

"Apply the aesthetic-usability effect — make it visually polished first. Users will trust it more before they even click."

"Add clear affordance to that CTA — it should look like a button you physically press, not a label you read."

"Strengthen the figure-ground separation — the card needs to read as foreground, the background needs to recede."

"Apply Fitts' Law — that button needs to be at least 44×44px with enough padding that thumbs can hit it reliably."

"Apply Hick's Law — cut this nav down to 5 items max. Every extra option slows the decision."

"Chunk this content — group the 8 features into 3 named categories so users can scan instead of read everything."

"Use progressive disclosure — show the 3 core fields first, collapse the advanced settings behind a toggle."

"Improve the signal-to-noise ratio — remove the background pattern, the decorative dividers, and the icon that doesn't add meaning."

"Use the Von Restorff effect — make that one stat dramatically different from the others so it anchors in memory."

"Use serial position — put the brand promise first and the CTA last. Don't bury either in the middle."

"Structure this as an inverted pyramid — lead with the outcome, not the backstory. Who you are comes after what you do for them."

"Favor recognition over recall — show the available options instead of a blank field they have to fill from memory."