A stark, high-contrast palette where bold, pastel pink accents and massive typography interact with a clean canvas to frame vibrant editorial photography.
03
Typography
grotesque-sans
display130px · 800
headline72px · 800
body29px · 800
All typography is set to an extreme heavy weight (800) · Letter spacing is always tight to negative · Line height is exceptionally tight for display sizes
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Asymmetric and loose to accommodate overlapping images and massive type
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 50px
No borders used; separation is achieved through whitespace and type hierarchy
06
Layout
1920container
12columns
24pxgutter
768 / 1024breakpoints
A gridless, asymmetric collage where images overlap massive background typography
07
Motion & Interaction
300msmicro
500mssmall
500msmedium
cubic-bezier(0.65, 0, 0.35, 1)easing
Elements fade and slide in simultaneously · Menu overlay slides in from the right with a smooth cubic-bezier
Text changes color (typically to pink) with a smooth 0.5s transition · Triggers navigation or menu overlay transitions
08
Components
buttonText-based navigation links with no background or borders
cardPhotography frames without borders, shadows, or containers
heroA full-width collage of overlapping editorial images and massive typography
09
Voice & Don'ts
ToneBold, confident, and highly visual
HeadlinesAll lowercase, tightly tracked, and massive
CTAsSimple text-based links without explicit button styling
Don't use multiple font families — screenshot shows a single grotesque-sans family used exclusively for all text
Don't use rounded containers or cards — screenshot shows sharp, unstyled photographic frames
Don't use soft drop shadows — screenshot shows completely flat typography and photography
Don't use uppercase text — screenshot shows exclusively lowercase text for headings and navigation
Don't use standard grid spacing — screenshot shows an asymmetric, collage-based layout
Don't use a dark primary background — screenshot shows a light #F9F7F7 background with a dark #392E2B footer section
Captured from the live site · real computed styles
11
System prompt
This is an expressive photography agency portfolio for Danielle Levitt, focusing on music, art, fashion, and celebrity. The design is a bold, asymmetric collage that pairs massive, tightly tracked grotesque-sans typography (#392E2B, weight 800) with vibrant editorial photography. A signature pastel pink (#F1B5C2) acts as a high-chroma accent for text and graphic elements, standing out against the light #F9F7F7 canvas. Critical constraints: use only a single, heavy grotesque-sans font family; avoid uppercase text; use no borders, shadows, or rounded corners; and maintain a loose, asymmetric layout that allows images and type to overlap freely. Interactions should be smooth, using a 0.5s cubic-bezier transition for color and opacity changes.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
