top-design

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	Custom cursor, magnetic buttons, branded selection colors
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 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 than constrained.

Key insights:

• White space as a weapon -- amateurs fill every gap with content, professionals use padding liberally, 10/10 designers use white space to create tension that controls the reader's eye
• Asymmetric balance creates interest -- offset elements from center (e.g., one column offset in a 12-column grid), let images bleed and extend beyond containers
• Unexpected scale shifts create rhythm -- the alternation between massive and intimate, dense and sparse, creates a narrative pacing that prevents monotony
• Elements should overlap, bleed, or extend with intention -- breaking the container signals confidence and craftsmanship
• The grid paradox -- a strong underlying grid is necessary precisely so you can break it meaningfully; without the grid, breaks are just chaos
• The screenshot test -- if someone would not screenshot a section and share it, you are missing signature moments

Product applications:

Context	Application	Example
Hero section	Offset title with bleeding imagery	margin-left: 8.33%; margin-right: -5vw
Portfolio grid	Varied card sizes with intentional asymmetry	Locomotive project showcases
Section transitions	Scale shifts between dense and breathing sections	Studio Freight scroll compositions
Image galleries	Mixed full-bleed and contained images	AREA 17 editorial layouts
Feature showcase	Overlapping elements creating depth	Active Theory layered compositions
Navigation	Asymmetric mega-menus with dramatic scale	Hello Monday navigation systems

Copy patterns:

• Hero: position text off-center with intentional alignment to grid
• Sections: alternate between full-width immersion and contained reading
• Cards: vary sizes within grids -- not everything needs to be the same dimensions
• Images: mix full-bleed, contained, and overlapping treatments

Ethical boundary: Layout experimentation must not compromise navigation clarity or content accessibility. Users should always understand where they are, how to move forward, and how to access critical information regardless of compositional choices.

See: references/layout-systems.md for grid frameworks, breakpoints, and responsive patterns.

3. Motion & Animation

Core concept: Every animation must answer "Why does this move?" Motion is not polish applied at the end -- it is core to the design, prototyped early and developed alongside visual design. The three laws of elite motion are: purpose over decoration, custom curves (never linear), and orchestration over isolation.

Why it works: Choreographed motion creates a cinematic experience that guides attention, communicates hierarchy, and creates emotional resonance. When elements animate in relationship to each other rather than independently, the result feels cohesive and intentional. Custom easing curves (exponential, quartic) give movement a physical quality that default browser easing cannot achieve.

Key insights:

• Custom easing is mandatory -- ease, ease-in, ease-out, and 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 choreography follows a strict timeline -- background/structure (0-200ms), hero title words staggered (200-600ms, 80ms stagger), subtitle (400-800ms), navigation cascade (600-900ms), supporting elements (800-1200ms)
• Scroll-triggered sequences reveal elements as they enter viewport -- not all at once; parallax used sparingly and only on non-essential elements
• Pinned sections for storytelling moments and horizontal scroll for galleries (with clear affordance) create immersive reading experiences
• Default browser scroll is unacceptable -- use Lenis or Locomotive Scroll for smooth, custom scroll behavior
• 60fps is non-negotiable -- if an animation drops frames, simplify or remove it

Product applications:

Context	Application	Example
Page load	Choreographed staggered reveal sequence	Studio Freight entry animations
Scroll sections	Pinned storytelling with progressive reveals	Locomotive scroll experiences
Navigation	Magnetic hover effects with custom cursors	Active Theory interactive nav
Image reveals	Clip-path or mask animations on scroll enter	AREA 17 case study reveals
Page transitions	Seamless cross-page animation continuity	Hello Monday page morphs
Micro-interactions	Hover weight shifts, button magnetic effects	Dogstudio interactive details

Copy patterns:

• Reveal: text lines slide up individually with stagger (not fade in as a block)
• Hover: elements respond with custom cursor, scale shift, or color transition
• Scroll: content reveals progressively, never all at once
• Transition: pages morph rather than cut or fade

Ethical boundary: Motion must never block interaction, cause motion sickness, or prevent users from accessing content. Always respect prefers-reduced-motion and ensure all content is accessible without animation. Animations longer than 1.2s require clear justification.

See: references/animation-patterns.md for scroll animations, page transitions, and micro-interactions with code.

4. Color & Contrast

Core concept: Color should feel invented for each specific project -- not pulled from a generic palette generator. The three approaches are monochromatic tension (95% one dominant color, 5% accent that pops), bold signature (own a color combination and make it unmistakable), and contextual shifting (color responds to content, with sections having distinct palettes).

Why it works: Color creates atmosphere before a single word is read. When colors feel owned by a specific project, they become part of the brand's identity. Pure black (#000000) and pure white (#ffffff) feel digital and lifeless; slightly warm variants (#0a0a0a, #fafaf9) feel physical and considered. The restrained use of a single accent color creates moments of surprise that draw the eye exactly where intended.

Key insights:

• Never use pure black or pure white -- warm variants create a physical quality that pure digital colors lack
• The functional color hierarchy -- text-primary, text-secondary (60% opacity), text-tertiary (40% opacity), surface, border (10% opacity) -- creates consistent depth across all components
• Accent color creates moments of surprise -- a single strong accent (#ff4d00 or similar) used sparingly has more impact than a complex multi-color palette
• Contextual color shifts between sections signal content changes and create visual chapters
• The squint test -- squint at your design; if the important elements do not stand out through contrast alone, your color hierarchy is failing
• Colors must work in both light and dark contexts -- de

...