awwwards-2026

awwwards-2026

If it's normal, basic, or standard, we don't want it. And if an element carries no information, delete it: better absent than present without purpose. This skill replaces the default landing-page reflex (framework-default components, Inter, centered hero, three-card grid) with how elite studios compose.

Scope

Apply automatically to any new public-facing route (landing, marketing, portfolio, brand, product, pricing, about, contact, blog index) and to any request containing "beautiful", "modern", "awwwards", "premium", "editorial", "polished", "design-led". Skip authenticated areas, admin, dashboard, settings, console, and API routes: clarity beats opinion there. In doubt: in scope.

Step 0: Gate. Ask before writing any code

You choose no font, palette, or hero archetype yourself. Ask the user three questions in one round, each offering 3 curated options plus a free-text "other":

1. Type pairing. Propose 3 pairings that fit the product, drawn from independent or variable-font foundries (Velvetyne, open-source display faces), never from the banned list in references/typography-and-color.md. Each option states the font names, a one-line mood, and the source.
2. Palette direction. Propose 3 OKLCH palettes: off-black plus paper-white plus one saturated accent each.
3. Hero archetype. Propose 3 archetypes that fit the product and the proposed type/palette (examples: oversized display type over asymmetric media, split-screen editorial, kinetic text hero).

Do not proceed until all three are answered. If you wrote code first, stop and restart from Step 0.

Step 1: Tokens

Replace the default :root with opinionated tokens in the project stylesheet: off-black and paper-white in OKLCH (never pure #000/#fff), border-radius 0 by default, base duration ~480ms with an expo-out ease, a 1.333 modular scale with fluid clamp() steps up to a display step, fluid spacing tokens (--gutter, --space-block, --space-section), container width tokens (--w-outer, --w-content, --w-prose), and a styled ::selection. Set the accent and neutrals to the palette the user picked.

Step 2: Typography

Wire the chosen pairing: @font-face or hosted stylesheet link, then --font-display / --font-body / --font-mono. The banned-fonts list in references/typography-and-color.md is zero tolerance. If a banned font appears anywhere in head, @font-face, or computed styles, rip it out.

Step 3-4: Hero, then composition

Build the chosen hero archetype. If you find yourself writing a centered container hero, you skipped Step 0. Then compose with hard rules:

• 3-5 sections max, one job per section
• Left-align by default; centered is a deliberate choice
• Asymmetric 12-col grids: 5/7 or 4/8 splits, never 6/6 or 4/4/4
• No default-styled Card or Button components on marketing surfaces; verb-led CTA copy ("Start a project"), never "Get Started"
• No icon-pack icons as feature decoration: numerals, custom SVG, or nothing
• Aspect ratios 4/5, 3/4, or 21/9, never 16/9 on hero or portfolio media
• Radius 0 or full-round, nothing between
• No "Trusted by" logo strip, no 3-col testimonial cards, no 4-column footer

Step 4.5: Web standards floor (non-negotiable)

• Landmarks on every page: header, nav, main, footer. Sections carry aria-labelledby. One h1 per route, no skipped levels. Mono kickers (01 / WORK) are <p>, not headings.
• Body min 16px, line-height 1.5-1.7, line length 60-75ch. Icon-only buttons get aria-label. Interactive targets at least 44x44px. h-dvh, never h-screen.
• All layout spacing via the fluid tokens. Zero arbitrary px values.
• Accent hits WCAG AA against both neutrals (4.5:1 body, 3:1 large/UI). If it fails, adjust lightness or swap it before shipping.

Step 4.6: Reduction pass (before motion, on purpose)

Motion applied to filler amplifies the filler. For every element ask: what does the user learn or do because this exists? "It balances the layout" is not an answer, whitespace is. Delete decorative pseudo-information and strip AI-tell copy per references/copy-rules.md. If two elements say the same thing, keep the stronger one.

Step 5-6: Motion, then required moves

One motion moment per viewport, two max: magnetic link, split-text reveal, marquee, scramble, clip-path image reveal, sticky scroll, or custom cursor. Always honor prefers-reduced-motion with a static fallback. Then confirm the page includes at least two signature moves: oversized display type, grid-escaping asymmetry, one kinetic element, custom hover states, scroll-linked reveal, an unexpected accent moment, editorial section spacing, or numerals/mono labels as ornament.

Good vs bad

Bad hero: centered container, Inter, headline plus subhead that paraphrases it, two buttons ("Get Started", "Learn More") pointing at the same signup.

Good hero: display face at 12-16vw, left-aligned on a 5/7 split, one verb-led CTA, media at 4/5, one motion moment.

Verification

Do the full self-audit in references/audit-checklist.md against the rendered page. Count violations in each of the three groups (visual, standards, copy). Expect every count to be 0. If any count is above 0, fix and re-audit before declaring done.

Completion checklist

• [ ] User answered all three Step 0 questions before any code
• [ ] Tokens, chosen fonts, and chosen palette wired; no banned font anywhere
• [ ] 3-5 sections, asymmetric grids, no banned components or copy
• [ ] Landmarks, heading order, tap targets, fluid spacing, AA contrast all pass
• [ ] Reduction pass run before motion; every surviving element informs
• [ ] Max 2 motion moments per viewport, reduced-motion fallback present
• [ ] At least 2 required moves shipped
• [ ] Self-audit counts all zero

Any box unchecked: not done. Fix or say so.

Footguns

• Choosing the fonts yourself to save a round-trip. The gate exists because taste is the user's call. Fix: restart from Step 0.
• Motion before reduction. You will animate filler. Fix: run Step 4.6 first, always.
• Accent chosen for vibe, failing AA. Fix: check contrast against both neutrals, adjust OKLCH lightness.
• `h-screen` on mobile. Browser chrome eats the viewport. Fix: h-dvh.

Red flags

Stop if you catch yourself saying any of these:

• "I'll pick a tasteful default font for now"
• "A centered hero is cleaner here"
• "The em dash reads fine in this one line"
• "This section fills out the page nicely"
• "I'll run the audit after publishing"

Any variant of these excuses is the same excuse. The gate and the audit have no exceptions.