A high-end creative agency portfolio that feels both experimental and rigorously structured.
02
Color
#D9FF00Accent
#333333Ink
#FFFFFFInk soft
#151F27BG
#F7FAFCBG soft
#2B2E35BG quiet
#7B92A5Muted
rgba(123,146,165,0.2)Line
High contrast dark mode with a singular, vibrant chartreuse accent for maximum impact.
03
Typography
didone-serif · humanist-sans
display56px · 400
heading40px · 400
body18px · 400
Use a sharp, elegant Didone serif for primary display text to establish a premium feel. · Pair with a clean humanist sans-serif for all supporting UI text and body copy. · Maintain tight negative tracking on large display text for a dense, intentional look.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
8px base grid with generous 24px and 32px padding for breathing room.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Minimal use of 1px solid borders, primarily for structural separation.
Wide, full-bleed photography heroes followed by content constrained to a 1280px centered container.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Smooth 0.3s transitions on interactive elements like buttons and hovers. · Transform-based animations for subtle positional shifts on scroll or interaction.
Subtle background color shifts or text color changes on interactive elements. · Immediate visual feedback with 0.1s background-color transitions.
08
Components
buttonHigh-contrast chartreuse CTA with black text; secondary buttons are dark with subtle borders.
cardClean, borderless cards featuring large photography and overlaid typography.
chipMinimal, text-based navigation chips without heavy containers.
inputStandard form inputs with subtle borders and dark backgrounds matching the theme.
heroFull-bleed photographic hero with bold typography overlay and geometric wireframe graphics.
09
Voice & Don'ts
ToneAuthoritative, visionary, and deeply human-centered.
HeadlinesBold, evocative, and concise statements that challenge conventional thinking.
CTAsDirect and inviting (e.g., 'Say hello'), emphasizing connection.
Don't use multiple competing accent colors — screenshot shows a single, dominant chartreuse accent against dark backgrounds.
Don't use overly rounded or bubbly shapes — screenshot shows sharp geometric lines and precise wireframe overlays.
Don't clutter the layout with dense text blocks — screenshot shows generous whitespace and large photographic breaks.
Don't use playful or comic-style fonts — screenshot shows a sophisticated Didone serif and clean sans-serif pairing.
Don't use bright, multi-colored gradients — screenshot shows solid dark backgrounds with flat, high-contrast accents.
Don't obscure primary content with heavy UI overlays — screenshot shows clear, focused presentation of key information.
Captured from the live site · real computed styles
11
System prompt
This is a premium design studio website characterized by a sophisticated dark mode aesthetic with a single, vibrant chartreuse accent (#D9FF00). The layout uses a sharp Didone serif for headlines and a clean humanist sans-serif for body text, set against a deep navy-blue background (#151F27). Key elements include full-bleed photography, geometric wireframe overlays, and generous whitespace that emphasizes a visionary, human-centered approach. Critical design constraints: Do not introduce multiple accent colors; maintain the strict two-typeface hierarchy; and preserve the large-scale, airy layout without cluttering it with unnecessary UI elements or heavy borders. The overall feel is premium, structured, and intentionally experimental.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
