Total = (Typography × 0.25) + (Composition × 0.25) + (Motion × 0.20) + (Color × 0.15) + (Details × 0.15)

WEAK:    48px headline / 16px body (3:1 ratio)
GOOD:    96px headline / 16px body (6:1 ratio)
GREAT:   180px headline / 14px body (13:1 ratio)
10/10:   Viewport-filling type that makes body text feel intimate

DISPLAY/HERO: The statement maker
├── Custom/Variable fonts (preferred)
├── Foundry fonts: Pangram Pangram, Dinamo, Grilli Type, Klim, Commercial Type
├── Premium Google: Space Grotesk, Instrument Serif, Fraunces
└── NEVER: Inter, Roboto, Arial, system-ui (these are for apps, not experiences)

BODY: The workhorse
├── Match personality to display font
├── Legibility at 16-18px minimum
└── Consider: Söhne, GT America, Suisse, Neue Montreal

/* Don't center—create visual tension */
.hero-title {
  /* Offset from center, aligned to grid but not centered */
  margin-left: 8.33%; /* One column offset */
  max-width: 83.33%; /* 10 of 12 columns */
}

/* Let images bleed and overlap */
.hero-image {
  margin-right: -5vw; /* Extend beyond container */
  width: calc(100% + 5vw);
}

:root {
  /* These are your only easings */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);

  /* NEVER use: ease, ease-in, ease-out, linear */
}

Frame 0-200ms:   Background/structure fades in
Frame 200-600ms: Hero title words slide up (staggered 80ms)
Frame 400-800ms: Hero subtitle fades up
Frame 600-900ms: Navigation items cascade down
Frame 800-1200ms: Supporting elements reveal

MONOCHROMATIC TENSION
├── 95% one dominant color/neutral
├── 5% accent that POPS
└── Example: Locomotive (cream + black + orange spark)

BOLD SIGNATURE
├── Own a color combination
├── Make it unmistakable
└── Example: Studio Freight (black + cream + rust)

CONTEXTUAL SHIFTING
├── Color responds to content
├── Sections have distinct palettes
└── Example: AREA 17 (adapts to each client case study)

:root {
  /* Never just 'black' or 'white' */
  --color-dark: #0a0a0a;      /* Slightly warm black */
  --color-light: #fafaf9;     /* Slightly warm white */
  --color-accent: #ff4d00;    /* A color you OWN */

  /* Functional hierarchy */
  --color-text-primary: var(--color-dark);
  --color-text-secondary: rgba(10, 10, 10, 0.6);
  --color-text-tertiary: rgba(10, 10, 10, 0.4);
  --color-surface: var(--color-light);
  --color-border: rgba(10, 10, 10, 0.1);
}

CURSOR
☐ Custom cursor that reflects brand personality
☐ Cursor changes on interactive elements
☐ Magnetic effect on buttons (subtle)

SELECTION
☐ Custom ::selection color that's on-brand
☐ Selection works well on all backgrounds

HOVER STATES
☐ Every link has a considered hover state
☐ Images have scale or overlay treatment
☐ Cards transform meaningfully

FOCUS STATES
☐ Focus states are visible and beautiful
☐ Focus indicators match brand aesthetic
☐ Tab order is logical

LOADING STATES
☐ Custom skeleton/loading animation
☐ Progress indicators are designed
☐ First contentful paint is instant

EMPTY STATES
☐ Empty states are designed, not default
☐ Error states are helpful and branded
☐ 404 pages are memorable

MICRO-TYPOGRAPHY
☐ Smart quotes (" " not " ")
☐ Proper apostrophes (' not ')
☐ En/em dashes where appropriate
☐ No orphans on headlines
☐ text-wrap: balance on key text

BRAND ESSENCE: What single word captures the soul?
VISUAL TENSION: What opposing forces create interest?
SIGNATURE MOMENT: What will people screenshot and share?
TECHNICAL AMBITION: What pushes the browser's limits?

TYPOGRAPHY
□ Display font makes a statement (not Inter/Roboto/Arial)
□ Scale contrast is dramatic (min 10:1 ratio)
□ Tracking adjusted for size (-0.02em to -0.05em on large type)
□ Line-height optimized per use case (0.9 display, 1.6 body)
□ No orphans/widows on key headlines
□ Variable font with weight animation (if applicable)

COMPOSITION
□ Grid exists but is strategically broken
□ White space creates tension and pacing
□ Hierarchy is instantly clear from across the room
□ Asymmetric balance creates visual interest
□ Elements overlap, bleed, or extend with intention
□ Unexpected scale shifts create rhythm

MOTION
□ Page load has choreographed reveal (not all at once)
□ Scroll feels custom (Lenis/Locomotive level)
□ Custom easing on everything (expo.out, power4.out)
□ Staggered animations create depth
□ 60fps verified on target devices

COLOR & ATMOSPHERE
□ No pure black (#000) or pure white (#fff)
□ Colors feel owned by this project
□ Accent color creates moments of surprise
□ Works in both light and dark contexts
□ Contextual color shifts between sections (if applicable)

DETAILS
□ Custom cursor (if appropriate for the project)
□ Selection colors are branded
□ Focus states are beautiful AND accessible
□ Loading states are designed
□ Error/empty states are crafted
□ Micro-typography is correct (smart quotes, proper dashes)

SIGNATURE
□ There is at least one screenshot-worthy moment
□ Something would make another designer stop and inspect
□ The project has a clear point of view

PERFORMANCE
□ Fonts subset and preloaded
□ Images optimized (WebP/AVIF with fallbacks)
□ Animations GPU-accelerated (transform/opacity only)
□ No layout shifts (CLS near zero)
□ LCP under 2.5s

TYPOGRAPHY CRIMES
✗ Inter, Roboto, Arial, or system-ui as primary typeface
✗ Uniform type scale (everything within 2x of each other)
✗ Default letter-spacing on headlines
✗ Line-height: 1.5 applied universally
✗ Type that doesn't command attention

ANIMATION SINS
✗ Linear or ease easing anywhere
✗ Everything animated simultaneously
✗ Animations blocking interaction
✗ Parallax without clear purpose
✗ Default browser scroll
✗ Animations longer than 1.2s without reason

COMPOSITION FAILURES
✗ Center-aligned everything
✗ Equal spacing everywhere
✗ Grid followed rigidly without breaks
✗ Mobile as afterthought
✗ No signature moments

COLOR CRIMES
✗ Pure #000000 black
✗ Pure #ffffff white
✗ Random colors without system
✗ No clear accent
✗ Palette that could be any brand

GENERIC TELLS (Instant 10/10 Disqualification)
✗ Purple/blue gradient hero sections
✗ "Hi, I'm [Name]" portfolio intros
✗ Floating cards with drop shadows
✗ Stock photography (unedited)
✗ Visible lorem ipsum
✗ Default form styles
✗ Generic 404 pages
✗ Cookie-cutter layouts
✗ Font Awesome icons (unmodified)

AI SLOP (Immediate Rejection)
✗ ANY emoji in professional interfaces
✗ Purple-to-blue or purple-to-pink gradients (the "AI gradient")
✗ Generic "futuristic" glassmorphism everywhere
✗ Overly smooth, soulless illustrations (the "corporate Memphis" successor)
✗ Teal + coral + purple color schemes (every AI startup ever)
✗ "Clean and modern" that means "generic and forgettable"
✗ Gradients on everything because "it looks techy"
✗ Neon accents on dark backgrounds (cyberpunk cliché)
✗ Abstract blob shapes as decoration
✗ Particle effects without purpose
✗ "Magical" sparkle animations
✗ The same Figma community hero section everyone uses