top-design

---
name: top-design
description: Use when a user wants a website or landing page to look Awwwards-quality, stunning, or cinematic, or mentions scroll animations, parallax storytelling, portfolio sites, or brand experience design.
category: Design
version: 1.0.0
tools: []
---

# Top-Design: Award-Winning Digital Experiences

Design, build, and critique websites and applications at the level of world-class digital agencies. Apply the craft of studios that consistently win FWA, Awwwards, CSS Design Awards, and Webby Awards.

## Core Principle

Every pixel is intentional -- nothing default, nothing accidental. The agencies this skill emulates -- Locomotive, Studio Freight, AREA 17, Active Theory, Hello Monday, Dogstudio -- share a common DNA: typography IS the design, motion creates emotion, white space is a weapon, and performance is non-negotiable (60fps or nothing).

The gap between 8/10 and 10/10 is not skill -- it is intention. An 8/10 has good typography and smooth animations; a 10/10 has typography that makes you gasp and animations that tell stories. Every decision must answer: "Does this serve the experience, or is it just filling space?"

## Scoring

Goal: 10/10. Rate any digital experience 0-10 using the rubric below -- a 10/10 would be featured on Awwwards Site of the Day (SOTD). Always state the current score and the specific improvements needed to reach 10/10.

### Scoring Rubric
| Score | Level | Description |
|-------|-------|-------------|
| 0-2 | Amateur | Default fonts, no hierarchy, generic layout, template feel |
| 3-4 | Basic | Decent typography, some hierarchy, but forgettable |
| 5-6 | Competent | Good fundamentals, clean execution, but lacks soul |
| 7-8 | Professional | Strong typography, intentional motion, clear POV |
| 9 | Exceptional | Signature moments, memorable details, near-flawless craft |
| 10 | World-class | Would win Awwwards SOTD, defines new standards |

### Category Scoring (weighted)

TYPOGRAPHY -- Weight 25%: 0-3 system fonts/uniform scale/default tracking; 4-6 premium fonts with some scale contrast and basic hierarchy; 7-8 dramatic scale contrast (10:1+), perfect tracking, optical alignment; 9-10 typography IS the design -- custom/variable fonts, type as architecture.

VISUAL COMPOSITION -- Weight 25%: 0-3 centered everything, equal spacing, rigid grid, no tension; 4-6 some asymmetry, decent spacing rhythm, basic depth; 7-8 intentional grid breaks, layered elements, strong negative space; 9-10 magnetic compositions, unexpected scale shifts, elements that breathe and surprise.

MOTION & INTERACTION -- Weight 20%: 0-3 no animation or default/linear motion; 4-6 basic transitions, some scroll effects; 7-8 custom easing, orchestrated reveals, purposeful parallax; 9-10 motion that tells stories, perfectly timed choreography.

COLOR & ATMOSPHERE -- Weight 15%: 0-3 random colors, pure black/white, no mood; 4-6 cohesive palette, some atmosphere; 7-8 colors feel owned, contextual shifts, intentional contrast; 9-10 colors feel invented for the project, atmosphere you can feel.

DETAILS & CRAFT -- Weight 15%: 0-3 default cursors, no hover states, generic everything; 4-6 basic hover states, some custom elements; 7-8 magnetic buttons, branded selection colors, custom cursor (if user-approved); 9-10 every micro-detail considered -- focus states, loading, empty states, scroll indicators.

Quick Score Formula:
Total = (Typography x 0.25) + (Composition x 0.25) + (Motion x 0.20) + (Color x 0.15) + (Details x 0.15)

## The Seven Pillars of 10/10 Design

### 1. Typography as Architecture

Typography is not decoration layered onto a design -- it IS the design. Typeface, scale, and tracking dictate color mood, animation style, spacing rhythm, and overall personality. Dramatic scale contrast creates hierarchy that communicates even when blurred or seen from across the room; the tension between monumental display type and intimate body text is what makes people stop scrolling.

Key rules:
- Massive scale contrast is non-negotiable -- minimum 10:1 between display and body (e.g., 180px / 14px); viewport-filling type at the extreme
- Negative tracking on large type (-0.02em to -0.05em) tightens display into cohesive units; body needs generous line-height (1.5-1.7)
- Font selection defines tier -- premium foundries (Pangram Pangram, Dinamo, Grilli Type, Klim, Commercial Type) or quality Google alternatives (Space Grotesk, Instrument Serif, Fraunces); never Inter, Roboto, Arial, or system-ui for hero experiences
- Variable fonts enable weight animation on hover without layout shift
- Optical alignment beats mathematical alignment -- adjust visually, not just numerically
- Control every line break on headlines -- beautiful breaks require manual intervention at key breakpoints

Reference patterns: viewport-filling display dropping hard to body (Locomotive hero); variable font with hover weight-animation (Studio Freight); serif/sans pairing at extreme scale contrast (AREA 17 editorial). Display copy = one statement, 3-7 words; body = 16-18px minimum, 45-75 character measure.

### 2. Layout & Composition

Master the grid so you can break it with intention -- every violation should feel deliberate, not accidental. White space is active design material that creates tension and controls pacing; asymmetry generates visual energy that centered compositions cannot.

Key rules:
- White space as a weapon -- amateurs fill every gap; 10/10 designers use emptiness to create tension that controls the eye
- Asymmetric balance creates interest -- offset elements from center, let images bleed beyond containers
- Unexpected scale shifts create rhythm -- alternate massive/intimate, dense/sparse for narrative pacing
- The grid paradox -- a strong underlying grid is what makes breaks meaningful; without it, breaks read as chaos

Reference patterns: offset title with bleeding imagery (`margin-left: 8.33%; margin-right: -5vw`); varied card sizes for intentional asymmetry (Locomotive showcases); overlapping elements for depth (Active Theory). Alternate full-width immersion with contained reading sections.

Ethical boundary: layout experimentation must never compromise navigation clarity -- users must always know where they are and how to move forward.

### 3. Motion & Animation

Every animation must answer "Why does this move?" Three laws of elite motion: purpose over decoration, custom curves (never linear), orchestration over isolation. Choreographed motion guides attention, communicates hierarchy, and creates emotional resonance; custom easing curves give movement a physical quality default browser easing cannot achieve.

Key rules:
- Custom easing is mandatory -- `ease`, `ease-in`, `ease-out`, `linear` are banned; use `cubic-bezier(0.16, 1, 0.3, 1)` (expo out), `cubic-bezier(0.25, 1, 0.5, 1)` (quart out), `cubic-bezier(0.87, 0, 0.13, 1)` (expo in-out)
- Page load follows a strict choreography: structure (0-200ms), hero title words staggered (200-600ms), subtitle (400-800ms), navigation cascade (600-900ms), supporting elements (800-1200ms)
- Animate in relationship, not isolation -- elements that move together feel cohesive and intentional
- 60fps is non-negotiable -- if an animation drops frames, simplify or remove it

Reference patterns: choreographed staggered page-load reveal (Studio Freight); clip-path/mask image reveals on scroll-enter (AREA 17); hover weight-shifts and magnetic buttons (Dogstudio). Text lines slide up individually with stagger -- never fade in as a block; pages morph rather than cut.

Ethical boundary: motion must never block interaction or cause motion sickness -- respect `prefers-reduced-motion`, keep all content accessible without animation, and justify anything longer than 1.2s.

### 4. Color & Contrast

Color should feel invented for each project -- never pulled from a generic palette generator. Three approaches: monochromatic tension (95% one color, 5% accent), bold signature (own a combination), contextual shifting (palette responds to content). Color creates atmosphere before a single word is read.

Key rules:
- Never use pure black or pure white -- #0a0a0a and #fafaf9 have a physical quality that #000/#fff lack
- Build a functional hierarchy -- text-primary, text-secondary (60% opacity), text-tertiary (40%), surface, border (10%) for consistent depth
- One strong accent used sparingly (e.g. #ff4d00) beats a complex multi-color palette
- Contextual color shifts between sections create visual chapters
- Design the system for both light and dark contexts, not individual instances

Reference patterns: monochromatic with signature accent (Locomotive: cream + black + orange spark); contextual shifting per case study (AREA 17); dark mode with one vibrant accent (Stripe: navy + purple). Drive everything from CSS custom properties (`--color-dark/-light/-accent` plus functional `--color-text-primary/-surface`); the accent appears only on CTAs, links, and single-detail moments.

### 5. Scroll-Based Design

Scroll is the web's primary interaction and should feel designed, not default. Treat scroll as a narrative device -- controlling pacing, creating reveals, building tension, delivering signature moments. When scroll position drives reveals and transitions, moving through content becomes participatory rather than passive.

Key rules:
- Smooth scroll is the foundation -- implement Lenis or Locomotive Scroll for the weighted, physical feel every award-winning site uses
- Parallax must be purposeful -- sparing, and only on decorative elements; never on text or critical content
- Pinned sections create storytelling beats -- lock a section while content transforms within it
- Horizontal scroll galleries need clear visual affordance
- Reveals should be progressive -- elements enter as they become visible, creating discovery
- Scroll velocity can modulate animation speed for a responsive feel

Reference patterns: pinned hero with scroll-driven transformation (Apple deep-dives); horizontal scroll gallery with affordance (Studio Freight); scroll-driven animation sequences (Active Theory). Use IntersectionObserver for lightweight class toggling; reserve GSAP ScrollTrigger for complex multi-step sequences.

Ethical boundary: scroll hijacking is hostile UX -- users must always be able to scroll at their own pace and reach all content.

### 6. Performance & Loading

Performance is a design constraint from day one, not an optimization step. A beautiful animation that drops frames or a stunning font that causes layout shift fails the craft test. Users perceive performance as quality -- instant load and fluid scroll feel premium regardless of visual complexity, while a stunning site that stutters feels broken.

Key rules:
- Subset and preload fonts -- only needed glyphs, `font-display: swap` or `optional`, preload critical files
- Optimize images -- WebP/AVIF with fallbacks, responsive `srcset`, lazy-load below the fold
- GPU-accelerate animations -- only animate `transform` and `opacity`; never `width`, `height`, `top`, `left`, or `margin`
- CLS near zero -- reserve space for images, fonts, and dynamic content (`aspect-ratio` on containers)
- LCP under 2.5s -- optimize the critical rendering path for the hero
- Loading states are designed elements -- custom skeletons and progress indicators, not afterthoughts

Reference patterns: subset/preload/swap fonts (`<link rel="preload" as="font" crossorigin>`); AVIF/WebP with responsive `srcset` (`<picture>` fallbacks); GPU-only animation (`transform: translate3d()` + `opacity`). Target a Lighthouse score of 90+; code-split and defer non-critical JS.

Ethical boundary: fast-but-inaccessible is not a valid tradeoff -- never strip accessibility features or semantic HTML for speed.

### 7. Micro-Interactions

Craft lives in the details that most builders skip: hover and focus states, cursor behavior, button feedback, loading and empty states, and scroll indicators. A 10/10 experience treats every one of these as a designed moment rather than a browser default -- this is what separates "professional" (7-8) from "exceptional" (9-10) on the Details & Craft axis above.