a high-end photography gallery meets a Swiss-design studio
02
Color
#131713Ink
rgba(19,23,19,0.5)Ink soft
#F7F3F0BG
rgba(19,23,19,0.15)Line
Warm off-white backgrounds with near-black ink, relying entirely on photography for color.
03
Typography
transitional-serif · geometric-sans · monospaced
display59px · 520
body12px · 400
caption10px · 400
mono10px · 400
Use monospaced uppercase for navigation and tags · Display titles use a tight tracking and a serif face · Geometric sans is the primary workhorse for body copy
04
Spacing
4px
8px
10px
12px
16px
20px
24px
48px
60px
A mix of tight 10-20px gutters and large 60px spacers to create generous breathing room between major content blocks.
05
Surfaces
sm · 4px
md · 0px
lg · 0px
pill · 0px
Thin 1px lines in rgba(19,23,19,0.15) are used sparingly for dividers and subtle tag outlines.
06
Layout
1280container
12columns
20pxgutter
768 / 1024breakpoints
A clean, single-column layout for the main portfolio list with full-width images and generous vertical spacing.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Subtle hover states on interactive elements · Smooth transitions for page navigation and hover effects
Subtle color shifts or underline appearances on links and tags. · Standard pointer cursor interactions.
08
Components
buttonInline text links with thin 1px borders and uppercase monospaced text.
cardPortfolio items consist of a large image, uppercase monospaced tags, a large serif title, and a sans-serif subtitle.
chipSmall uppercase monospaced tags with thin 1px borders and 4px radius.
inputNot visible in the provided screenshot.
heroA full-width photographic background image with no text overlay, followed by the agency name and navigation.
09
Voice & Don'ts
ToneSophisticated, confident, and understated.
HeadlinesDirect, concise, and often punchy, presented in a large serif or sans-serif face.
CTAsSimple, uppercase monospaced text, often paired with an arrow or thin border.
Don't use bright, synthetic accent colors — screenshot shows a neutral palette where images provide all color.
Don't use rounded corners on major containers — screenshot shows sharp 4px or 0px edges.
Don't use drop shadows on cards or containers — screenshot shows completely flat surfaces.
Don't use sans-serif for all text — screenshot shows a mix of serif for large titles and monospaced for UI.
Don't pack the layout with dense information — screenshot shows generous whitespace and a single-column flow.
Don't use heavy border weights — screenshot shows very thin, subtle dividers and outlines.
Captured from the live site · real computed styles
11
System prompt
A premium brand and digital agency portfolio site. The design DNA is defined by warm off-white backgrounds (#F7F3F0) and near-black text (#131713), relying entirely on large, high-quality photography for visual interest. The typography system uses a mix of a transitional serif for display titles, a geometric sans-serif for body copy, and a monospaced uppercase style for navigation and tags. Key colors are a warm off-white (#F7F3F0) and near-black (#131713). Critical design constraints include: avoid synthetic accent colors and rely on photography for chromatic variation; avoid rounded corners or drop shadows on containers to maintain a flat, architectural feel; and avoid dense, cluttered layouts, instead using generous whitespace and a strict single-column grid to let the work breathe. The overall aesthetic is understated, sophisticated, and highly refined, prioritizing the visual impact of the portfolio projects themselves.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
