# 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

| Role | Value | Notes |
|------|-------|-------|
| Background | `#ffffff` | Neutral canvas for type to dominate |
| Accent 1 — Highlight Yellow | `rgb(255, 242, 93)` | Used on eyebrow containers / labels |
| Accent 2 — Electric Blue | `rgb(20, 110, 245)` | Secondary emphasis, CTAs |
| Body text | Implied dark/black | High contrast standard |

**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.

| Element | Family | Size | Weight | Transform | Tracking |
|---------|--------|------|--------|-----------|---------|
| H1 | Cooperhewitt | 181px | 700 | UPPERCASE | −12.7px |
| H2 | Cooperhewitt | 115px | 700 | UPPERCASE | −8.1px |
| H3 | Cooperhewitt | 179px | 700 | UPPERCASE | −12.6px |
| Body | IBM Plex Mono | 16px | 400 | none | normal |
| Para/lead | Inter | 36px | 500 | none | −1.1px |
| Links | IBM Plex Mono | 16px | 400 | none | normal |

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*