top-design

SKILL.md

Award-winning digital experiences with dramatic typography, intentional motion, and pixel-perfect craft.

Covers seven core pillars: typography as architecture (10:1+ scale contrast), asymmetric composition with white space as a weapon, custom-eased scroll-driven animations, invented color palettes, performance-optimized motion (60fps only), and micro-interaction details that signal craft

Includes a 0-10 scoring rubric weighted across typography (25%), composition (25%), motion (20%), color (15%), and details (15%), with specific criteria for reaching Awwwards-level work

Provides design process guidance: identify signature moments first, let typography dictate the entire visual system, prototype motion early, and ship with restraint rather than feature bloat

References seven detailed implementation guides covering font pairing, animation patterns, grid systems, technical stack optimization, and technique breakdowns from award-winning agencies (Locomotive, Studio Freight, AREA 17, Active Theory, Hello Monday)

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