A pattern library for premium web design.
Editorial · 25 min
Thirty small visual moves that separate the work of an art director from a Figma export. Each one is a single decision — a font swap, a rule of color, a way to break a grid — that compounds into the feeling of premium. This course is five modules, six lessons each. Read it once. Then on every new page, pick ten moves and execute them with conviction. The page will look like it cost $50,000.
01 · Section
Typography is the cheapest upgrade in design. You can keep the layout, the colors, and the photography exactly as they are — and a single typographic decision will lift the whole page from generic to editorial. The next six moves are the ones that magazines, monographs, and luxury brands have used for a hundred years. None of them require new code. All of them require taste.
02 · Section
Set one noun in the headline in italic. The eye reads italics as emphasis without you having to underline, bold, or recolor anything. It's the quietest possible way to say 'this is the point of the sentence' — and it instantly makes the line feel written instead of typeset.
03 · Section
The opening paragraph begins with a single letter set 4–5 lines tall, hugging the left margin with the rest of the text wrapping around it. It's a 600-year-old move that still works because it gives the eye a single, unmistakable place to start reading. On a long-form page it's the difference between a wall of text and an essay.
04 · Section
Halfway through a long block of body text, lift one sentence out and reset it at 1.4× the body size with a hairline rule above and below. It does two jobs at once: it gives the scrolling eye a rest stop, and it tells the skimmer the single most important sentence on the page without making them read the rest.
05 · Section
Above every section heading, set a tiny line of uppercase text — 10 to 11 pixels, letter-spacing around 0.2em, often in the accent color. It tells the reader what kind of section they're entering before they read the section title. It's the single most editorial move you can make in five minutes of work.
06 · Section
When you have a stat — 96%, $4.2M, 12 hours — set the number itself at 96 pixels or larger and the unit/label at 14 pixels next to it. The size difference does all the storytelling: the eye lands on the number, then reads the unit as a footnote. It is the single most reliable way to make a stats section look expensive instead of bullet-point boring.
Build a stats band for a startup landing page with three stats: '$4.2M raised', '12,000 active users', '99.98% uptime'. Set each number at 120px in a display serif (Fraunces or PP Editorial New). Set the label below in 11px uppercase, letter-spacing 0.2em, color text-text-3. Three columns, generous gap, no borders, no icons. The numbers do all the work.
07 · Section
Take a single phrase inside a longer sentence and give it a soft yellow background that sits behind the text like a highlighter mark. It mimics the gesture of a reader marking the most important line of an article — and it works because everyone instantly recognizes that gesture. One highlight per paragraph. Never two.
08 · Section
Grids do not have to be uniform. The strongest editorial layouts mix one wide element with two narrow ones, break the grid completely with a full-bleed image, or float a sticky meta column beside a long-form article. The next six moves are how you stop building 'three cards in a row' pages and start building pages that feel like spreads.
09 · Section
A single frame split into mixed-size cells — one big, two medium, three small — like a bento box. Apple has rebuilt their entire iPad and Watch marketing around this pattern because it lets you tell six stories on one screen without the page feeling like a list. Each cell gets its own background, its own headline, its own micro-image. The variety is the message.
Build a bento grid section for a productivity app with six features. One large cell (4-col span, 2-row span) for the headline feature with a screenshot. Two medium cells (2×1) and three small cells (2×1) for the rest. Each cell gets a tinted background in a related color family — slate-50, slate-100, neutral-50. Round corners 16px. No borders. Generous internal padding (32px).
10 · Section
A horizontal scrolling row of work — case studies, projects, screenshots — where each item is roughly portrait-shaped and slightly indented from the page edge so the eye sees the next one peeking. It feels like flipping through a portfolio book on a coffee table, which is the exact emotion you want when showcasing past work.
11 · Section
Let one image touch all four edges of the screen, with no margin, no padding, and no caption inside. Then place the headline either centered over it or anchored to the bottom-left in white text with a slight gradient overlay for legibility. It is the single most cinematic move you can make on a homepage.
12 · Section
On a long-form article page, anchor a small column to the left or right that stays visible while the article scrolls. Inside it: author name, publish date, reading time, share buttons. It costs you 200px of width and gives back enormous trust — the reader knows who wrote it and how to find more.
13 · Section
A 60/40 hero — 60% text on the left, 40% image on the right (or reversed). Never 50/50. Equal halves feel stuck and corporate; an asymmetric split feels editorial because one side is clearly the lead and the other is the supporting actor. Pick which side leads and commit.
14 · Section
A single 1-pixel horizontal line that organizes everything below it. No section header is complete without one. It tells the eye 'this is a new section' faster than any heading or whitespace alone. Set it at 1px in a soft neutral and let the rest of the design breathe around it.
15 · Section
One accent color, repeated three times per screen. That is the rule. Everything else is ink, paper, and a hairline. Designers who can resist using a second accent always look more confident than designers who can't. The next six moves are how to get maximum mileage out of a single color.
16 · Section
Pick one color. Use it three times on the page — never more, never less. Once in a button. Once in a hover state or link. Once in a small graphic mark. Three appearances make it feel intentional; four or more make it feel decorated. The discipline is the whole game.
17 · Section
Links and small CTAs sit in the body text color at rest, then shift to the accent color on hover. Never the other way around — accent at rest is loud and tiring; accent on hover is a wink. The rest state is the page; the hover is the conversation.
18 · Section
Each major section of the page gets its own background tint — not a border, not a divider, but a soft full-width wash. The reader unconsciously tracks which section they're in by the color shift. It works for the same reason chapter dividers work in books.
19 · Section
Small uppercase labels in pill shape — 1px border, 10–11px text, 8px horizontal padding. Use them sparingly: 'NEW', 'BETA', 'POPULAR', a category tag. The pill makes the label feel like a stamp instead of a span.
20 · Section
A full-section pastel background that frames the content inside. Different from a color-coded section because the wash is more saturated and is meant to be felt, not just noticed. Use it once on the page — for the testimonials block, the pricing block, or the CTA — and the rest of the page will feel calmer by contrast.
21 · Section
End the headline with a period — and color only the period in the accent. It's a one-character move that instantly tells the reader 'someone made this on purpose.' The headline reads normally; the period winks. Best move-to-effort ratio in this entire course.
Update the homepage hero headline to end with a period in the accent color. Keep the headline in display serif (Fraunces 600, 96px). The period should be the only character in the accent color. Subhead below stays in text-text-3, no change.
22 · Section
Motion is a paragraph break. Use it to mark a transition, not to decorate. The best motion is calm and short — usually 200–400ms with a custom ease curve. The next six moves are the exact timings, easings, and patterns that make a site feel alive without making it feel busy.
23 · Section
The headline animates in one word at a time, each word offset by 60–80 milliseconds. The reader's eye is naturally pulled across the line as the words appear, which means the headline gets read instead of skimmed. Used on hero headlines and section openers — never on body text.
24 · Section
When a stats section scrolls into view, the numbers count up from 0 to their target value over 1.2 seconds. It's the most attention-grabbing move in this whole course — eyes go to motion, and a number changing is the most legible motion possible.
25 · Section
When the cursor approaches a CTA, the button gently tilts or shifts up to 6 degrees toward the cursor. It's the single most delightful micro-interaction on the modern web because it makes the button feel like it can see you. Use sparingly — one magnetic element per page.
26 · Section
A 2-pixel horizontal bar pinned to the top of the screen that fills as the article scrolls. It's the smallest possible affordance that turns long-form pages from intimidating into navigable. The reader always knows how much is left, which is the entire reason they don't bounce.
27 · Section
A horizontal scrolling row of logos, quotes, or one-liners that loops continuously at a slow pace — about 30 seconds per loop. It draws the eye without demanding attention and makes a row of trust logos feel alive instead of static. The slow speed is the whole trick.
28 · Section
When a section scrolls into view, child elements (cards, list items, image grid cells) fade up one after another with an 80-millisecond offset. It's the most professional 'the page came alive' move you can ship. Costs 10 lines of code with Framer Motion.
Add an entrance stagger to the three feature cards in the Features section using Framer Motion. Each card fades from opacity 0 + translateY 16px to opacity 1 + 0, 500ms duration, cubic-bezier(0.22, 1, 0.36, 1) easing. 80ms stagger between cards. Trigger once when the section enters the viewport with -80px margin.
29 · Section
Stop writing landing-page copy. Start writing the magazine version. Sections become essays, FAQs become Q&A blocks, the footer becomes a masthead. The next six moves are how you make a product site feel like a publication — which is the highest compliment a product site can get in 2026.
30 · Section
A quote, set in display serif at 28–32px, followed by attribution on a single line: name · role · photo. No quote marks decorating the corners, no card around the testimonial, no gradient background. Just the quote, like it's running in a journal.
31 · Section
Kill the accordion. Set the questions in italic display serif and the answers in body text immediately below — no toggles, no collapsible cards. The reader scans the questions and reads the ones they care about. It also doubles your SEO value because all the content renders.
32 · Section
Three columns side by side, with the middle one elevated by a single step — slightly larger padding, slightly heavier border, a 'Most popular' eyebrow on top. The visual hierarchy does the recommending for you. No gradient backgrounds, no glow effects, no 'CHOOSE WISELY' theatrics.
33 · Section
Set the footer like the masthead of a magazine: small uppercase categories down the left, names and roles down the right, a tiny logo at the bottom-left, copyright in 11px micro-caps at the bottom-right. It signals that this is a publication, not a SaaS landing page.
34 · Section
Customer logos at 40% opacity, single row, no carousel, no animation, no card backgrounds. The opacity is the move — it tells the eye 'these are credentials, not advertisements.' Five to seven logos, all the same height, evenly spaced. Quiet authority beats loud bragging every time.
35 · Section
When showing a transformation — old design vs. new, before AI vs. after, ugly vs. polished — use a draggable split-frame slider, not two stacked images. The interaction is the proof. Users drag back and forth, comparing pixel by pixel, and the credibility lands in their hands instead of being claimed by you.
Build a before/after image compare component using react-compare-slider. Two 16:9 images stacked, draggable vertical handle in the middle. Tiny 'BEFORE' label top-left and 'AFTER' label top-right, both in 10px uppercase letter-spacing 0.2em, white with 60% opacity. Container has 12px border radius and a 1px hairline border.
36 · Section
Twelve words that separate someone who 'does design' from someone who reads design. Use these correctly in a sentence and people will assume you've shipped a magazine.
37 · Section
Pick one real page on something you're building — a landing page, an article, a pricing page. Open this guide. Pick ten moves from the thirty above. Apply all ten. Ship the page. Then come back and self-review with the rubric below. If you score 7/10, you've already lapped 95% of the AI-built pages on the internet.
I'm rebuilding [PAGE NAME] for [PRODUCT]. I'm applying these 10 moves from The Moves course: 1. [Lesson #N — name] 2. [Lesson #N — name] ... (list all 10) The page audience is [USER]. The page goal is [ACTION]. The feel is [METAPHOR — e.g. 'the inside of a Muji store']. Do NOT use: purple gradients, glassmorphism, Inter font, centered hero with one CTA, AI-generated stock imagery. Return the page in TanStack route file format, using the existing design tokens from src/styles.css.
Thirty moves. Pick ten on every page. Ship the page. Repeat.