--- name: awwwards-2026 description: "Build editorial, award-tier public pages: opinionated type, asymmetric layout, one motion moment per viewport, ruthless copy reduction on a web-standards floor. Use when creating or restyling landing, marketing, portfolio, pricing, about, or blog index pages, or when asked for premium, editorial, studio-quality design. Not for internal app UI (admin, dashboard, settings, console, API routes). Not for measuring decay in an existing UI: use design-system-drift." license: MIT metadata: author: TechTide AI (Alex Cinovoj) provenance: original category: Design & Motion --- # 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 `

`, 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.