emilylonetto.com — Design Reference

1. Visual Theme & Atmosphere

Emily Lonetto’s portfolio is a masterclass in typographic maximalism with a rigorously playful edge. Cooperhewitt — a geometric humanist sans — is set at monstrous scale (181px+ for H1), uppercase, with aggressive negative tracking (−12.7px). The result is a punchy, poster-like surface that signals a designer who understands type as spatial composition.

Two accent colors — a vivid yellow (#FFF25D) and electric blue (#146EF5) — punctuate the predominantly neutral field, used for eyebrow labels and highlights. GSAP powers the animation layer, suggesting intentional motion choreography.

2. Color Palette & Roles

What’s absent: No dark mode tokens, no muted grays, no gradient. The accents are used sparingly — restraint amplifies their impact.

3. Typography Rules

Cooperhewitt defines the entire typographic identity. IBM Plex Mono handles body copy, creating a deliberate contrast between the bold display face and the technical mono.

The mono body copy signals technical precision against the expressive display face — a deliberate personality split.

4. Component Stylings

• Eyebrow labels: Inline color blocks (yellow / blue) wrapping short text, no border-radius detected
• Section padding: ~91px vertical — generous whitespace between major sections
• Footer gap: 114px between elements, with 77px bottom padding
• No card patterns — content is editorial, full-width sections
• Buttons: Expected to use bold type with color fill, no rounded corners

5. Layout Principles

• Full-bleed sections with ~91px top/bottom padding
• Typography flows edge to edge, no gutters constraining headline scale
• Webflow grid system underlying the layout
• Breakpoints at 479px, 767px, 991px (standard Webflow responsive tiers)
• Visual hierarchy established by type scale alone — no spatial nesting

6. Depth & Elevation

No box shadows detected. Depth comes entirely from typographic scale — massive headlines create a foreground layer over smaller body text. GSAP animations add temporal depth through entrance sequencing.

7. Do’s and Don’ts

Do:

• Set display type in Cooperhewitt uppercase with strong negative tracking
• Use yellow and blue accents sparingly, only for short labels/highlights
• Pair bold display type with IBM Plex Mono for contrast
• Use GSAP for entrance animations — staggered, purposeful
• Maintain generous section padding (90px+)

Don’t:

• Mix more than three typefaces
• Use color for backgrounds — keep canvas white
• Add border-radius; corners stay sharp
• Use subtle animations; if something moves, it’s intentional and visible

8. Responsive Behavior

• Three breakpoints: mobile (479), tablet (767), desktop+ (991+)
• Headline scale reduces at breakpoints — the typographic proportions hold, only size changes
• Mono body copy remains legible at 16px across all breakpoints
• Section padding reduces proportionally but stays generous

9. Agent Prompt Guide

“Design in the style of emilylonetto.com: white canvas, Cooperhewitt (or similar geometric humanist) uppercase headlines at extreme scale with tight negative letter-spacing. Body copy in IBM Plex Mono. Two accent colors only — bright yellow and electric blue — used exclusively for short label highlights. No shadows, no border-radius. Generous section spacing. GSAP-style entrance animations.”

Generated by Sparkbites — extracted from live CSS analysis