top-design

What this skill does

# Top-Design: Award-Winning Digital Experiences

Create websites and applications at the level of world-class digital agencies. This skill embodies 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 you are emulating -- Locomotive, Studio Freight, AREA 17, Active Theory, Hello Monday -- share a common DNA: typography IS the design (not decoration, but architecture), motion creates emotion (animation serves narrative, not novelty), white space is a weapon (tension through restraint), and performance is non-negotiable (60fps or nothing).

**The foundation:** What separates 10/10 from 8/10 is not incremental improvement but a qualitative leap. An 8/10 design has good typography, nice colors, and smooth animations. A 10/10 design has typography that makes you gasp, colors that feel invented for this specific project, and animations that tell stories. The gap is not skill -- it is intention. Every decision at the 10/10 level answers the question: "Does this serve the experience, or is it just filling space?"

## Scoring

**Goal: 10/10.** When reviewing or creating digital experiences, rate them 0-10 using the rubric below. A 10/10 means the design would be featured on Awwwards. Always provide the current score and 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 (Each 0-10)

**TYPOGRAPHY (Weight: 25%)**

| Score | Criteria |
|-------|----------|
| 0-3 | System fonts, uniform scale, default tracking |
| 4-6 | Premium fonts, some scale contrast, basic hierarchy |
| 7-8 | Dramatic scale contrast (10:1+), perfect tracking, optical alignment |
| 9-10 | Typography IS the design -- gasping moments, custom/variable fonts, type as architecture |

**VISUAL COMPOSITION (Weight: 25%)**

| Score | Criteria |
|-------|----------|
| 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%)**

| Score | Criteria |
|-------|----------|
| 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, scroll feels invented |

**COLOR & ATMOSPHERE (Weight: 15%)**

| Score | Criteria |
|-------|----------|
| 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 this project, atmosphere you can feel |

**DETAILS & CRAFT (Weight: 15%)**

| Score | Criteria |
|-------|----------|
| 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

**Core concept:** Typography is not decoration layered onto a design -- it IS the design. The typeface you choose, the scale you set, and the tracking you refine dictate everything else: color palette mood, animation style, spacing rhythm, and overall personality. When someone scrolls past your hero and does not pause, your typography is not working.

**Why it works:** Dramatic scale contrast creates immediate visual hierarchy that communicates even when content is blurred or viewed from across the room. Large display type with tight tracking commands attention like architecture commands a skyline, while intimate body text draws readers into the content. This tension between monumental and personal is what makes people stop scrolling.

**Key insights:**

- **Massive scale contrast is non-negotiable** -- the ratio between display and body should be at minimum 10:1 (e.g., 180px headline / 14px body), with viewport-filling type at the extreme end making body text feel intimate
- **Negative tracking on large type** (-0.02em to -0.05em) tightens display text into cohesive visual units, while generous line-height for body (1.5-1.7) ensures readability
- **Font selection defines tier** -- display fonts should come from 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 states and transitions, adding dynamism without layout shift
- **Optical alignment over mathematical alignment** -- human perception is imperfect, so text must be adjusted visually, not just numerically
- **Control every line break on headlines** -- text that breaks beautifully requires manual intervention at key breakpoints

**Product applications:**

| Context | Application | Example |
|---------|-------------|---------|
| Portfolio hero | Viewport-filling display type with dramatic scale drop to body | Locomotive.ca hero typography |
| Brand website | Custom/variable font with weight animation on hover | Studio Freight interactive type |
| Product landing | Tight display tracking with generous body spacing | Apple product pages |
| Editorial layout | Serif/sans pairing with extreme scale contrast | AREA 17 case studies |
| Cultural institution | Statement typography that becomes the visual identity | Hello Monday museum sites |
| Tech startup | Premium geometric sans at architectural scale | Stripe typography system |

**Copy patterns:**

- Display: single powerful statement, 3-7 words maximum
- Subhead: one sentence that contextualizes the display type
- Body: 16-18px minimum, generous line-height, moderate measure (45-75 characters)
- The "typography stare test": blur your eyes -- does the type hierarchy still read? If everything looks the same importance when blurred, you have failed

**Ethical boundary:** Typography choices should enhance readability and accessibility, not sacrifice legibility for aesthetic novelty. Ensure body text meets WCAG contrast requirements and remains readable at standard viewing distances.

See: [references/typography.md](references/typography.md) for font pairing strategies, type scale systems, and advanced CSS typography.

### 2. Layout & Composition

**Core concept:** Master the grid so you can break it with intention. Every violation should feel deliberate, not accidental. The rhythm of density and breathing room -- full-viewport hero, intimate text section, massive single word, dense grid -- creates a reading experience that holds attention.

**Why it works:** White space is not empty space -- it is active design material that creates tension, controls pacing, and makes viewers lean in. Asymmetric layouts generate visual energy that centered, symmetrical compositions cannot achieve. When elements overlap, bleed, or extend beyond their containers with intention, the design feels alive and confident rather t