An exclusive gallery or curated magazine spread showcasing high-end work
02
Color
#FFFFFFInk
#000000BG
#A0A0A0Muted
rgba(255, 255, 255, 0.15)Line
Stark, high-contrast minimalism relying on black, white, and gray to let photographic work stand out.
03
Typography
grotesque-sans · monospace
display16px · 700
Use grotesque-sans for all UI and body text · Apply uppercase and small letter-spacing to section headers · Maintain a strict typographic hierarchy without decorative elements
04
Spacing
4px
8px
16px
24px
32px
48px
64px
80px
96px
Generous whitespace separating sections, with tight 8px gaps between list items
05
Surfaces
sm · 4px
md · 0px
lg · 0px
pill · 999px
Subtle 1px borders or background overlays on hover
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A full-width, immersive grid where large photographic imagery dominates the viewport, contrasted by structured, multi-column text lists.
07
Motion & Interaction
200msmicro
300mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Subtle opacity and color transitions on hover for interactive elements
Subtle text color shifts and opacity changes · Immediate navigation or state change
08
Components
buttonText-based links with subtle hover transitions, no filled button shapes
cardFull-bleed or large-scale photographic blocks representing projects
chipMinimal uppercase text labels for categories
inputN/A
heroImmersive photographic background with overlaid project title and credits
09
Voice & Don'ts
ToneProfessional, understated, and confident
HeadlinesDirect, uppercase, and descriptive of the creative role
CTAsSimple text links for contact and navigation
don't use decorative script fonts — screenshot shows a clean grotesque-sans system font
don't add drop shadows to containers — screenshot shows flat surfaces and photographic overlays
don't use bright, saturated accent colors — screenshot relies entirely on a monochrome palette
don't clutter the layout with dense grids — screenshot uses generous whitespace and large imagery
don't use rounded card corners for project previews — screenshot shows sharp, full-bleed edges
don't use heavy border-radius on UI elements — screenshot uses a minimal 50% radius only for icons
Avoid: Avoid bright, saturated colors or neon accents
Avoid: Avoid complex animations or distracting motion
Avoid: Avoid decorative typography or script fonts
Captured from the live site · real computed styles
11
System prompt
This is a premium, editorial-style portfolio for a creative director. It uses a stark, high-contrast palette of pure black (#000000), white (#FFFFFF), and medium gray (#A0A0A0). The typography relies entirely on system grotesque-sans fonts, maintaining a clean and professional aesthetic. Layouts are expansive, often featuring full-bleed photography with overlaid text. Critical donts: do not use decorative or script fonts, avoid bright saturated accents, and never clutter the layout with dense grids or unnecessary UI elements. The focus should remain on immersive imagery and structured, uppercase text labels.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
