top-design skill

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, motion creates emotion, white space is a weapon, and performance is non-negotiable (60fps or nothing).

The foundation: 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. Always state the current score and the specific improvements needed to reach 10/10.

Scoring Rubric

Category Scoring (Each 0-10)

TYPOGRAPHY (Weight: 25%)

VISUAL COMPOSITION (Weight: 25%)

MOTION & INTERACTION (Weight: 20%)

COLOR & ATMOSPHERE (Weight: 15%)

DETAILS & CRAFT (Weight: 15%)

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. Your typeface, scale, and tracking dictate color mood, animation style, spacing rhythm, and overall personality.

Why it works: 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 insights:

• 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

Applications: 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 = one statement, 3-7 words; body = 16-18px minimum, 45-75 character measure.

See references/typography.md when choosing typefaces or building the type scale -- named font pairings by style, full fluid clamp() and step-based scales, tracking/leading ladders, and font-subsetting/FOUT mechanics.

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 creates a reading experience that holds attention.

Why it works: White space is active design material that creates tension and controls pacing. Asymmetry generates visual energy that centered compositions cannot; elements that overlap or bleed with intention feel alive and confident.

Key insights:

• 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 are chaos

Applications: 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.

See references/layout-systems.md when laying out sections or going responsive -- grid frameworks, breakpoint systems, and asymmetric/bleeding-element patterns.

3. Motion & Animation

Core concept: Every animation must answer "Why does this move?" The three laws of elite motion: purpose over decoration, custom curves (never linear), orchestration over isolation.

Why it works: Choreographed motion guides attention, communicates hierarchy, and creates emotional resonance. Custom easing curves give movement a physical quality default browser easing cannot achieve.

Key insights:

• 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); reference holds the canonical per-element stagger values
• 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

Applications: 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.

See references/animation-patterns.md when implementing motion -- copy-pasteable scroll reveals, staggered load choreography, page transitions, and magnetic/hover micro-interactions with code.

4. Color & Contrast

Core concept: 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).

Why it works: Color creates atmosphere before a single word is read. Pure black/white feel digital and lifeless; warm variants feel physical and considered. A restrained accent draws the eye exactly where intended.

Key insights:

• 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 (#ff4d00 or similar) 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

Applications: 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.

See references/case-studies.md when you need a worked example of any pillar -- agency-by-agency breakdowns of real color systems, type treatments, and micro-interactions to reverse-engineer.

5. Scroll-Based Design

Core concept: 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.

Why it works: Default scroll is mechanical and treats all content as equally important. When scroll position drives reveals and transitions, moving through content becomes participatory rather than passive.

Key insights:

• 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

Applications: 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.

See references/technical-stack.md to wire up smooth scroll (Lenis/Locomotive setup, library tradeoffs) and references/animation-patterns.md for pinning, horizontal galleries, and scroll-velocity sequences.

6. Performance & Loading

Core concept: 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.

Why it works: 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 insights:

• 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