A high-end architectural journal meets a global strategy firm.
02
Color
#1A1A1AInk
#949495Ink soft
#FFFFFFBG
#F2F2F2BG quiet
#757575Muted
rgba(230, 230, 230, 1)Line
Strictly monochromatic, using high-contrast typography and expansive whitespace to establish a premium, editorial feel.
03
Typography
grotesque-sans
display55px · 400
headline42px · 400
body16px · 400
Tight negative letter-spacing for large display sizes · Medium weight (500) reserved exclusively for logo mark and specific UI emphasis · Left-aligned typography with generous vertical whitespace between blocks
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
118px
Generous, asymmetric spacing with large empty sections and padded text blocks
05
Surfaces
sm · 4px
md · 8px
lg · 16px
pill · 9999px
Subtle 1px borders used primarily for cookie consent actions and specific dividers.
Asymmetric grid with content heavily weighted to the left, using massive padding and whitespace to define structure.
07
Motion & Interaction
150msmicro
300mssmall
1000msmedium
cubic-bezier(0.33, 1, 0.68, 1)easing
Slow, smooth opacity and transform transitions (1s) for large imagery and page load reveals · Faster, subtle color and background transitions (0.3s) for interactive elements like buttons
Subtle color shifts or slight opacity changes on interactive text and buttons. · No aggressive visual feedback, maintaining the calm, editorial atmosphere.
08
Components
buttonMinimalist flat or outlined buttons, often featuring small rounded corners and relying on thin borders for definition.
cardNot prominently featured, suggesting a focus on continuous scroll and large imagery over grid-based card layouts.
chipNot present, favoring clean navigation links and simple text categorizations.
inputNot visible in the primary UI, standard text fields implied for form contexts.
heroMonumental left-aligned text statements dominating the viewport with significant negative space above and below.
09
Voice & Don'ts
ToneAuthoritative, confident, and highly professional.
HeadlinesDeclarative, first-person plural ('We partner...') statements that establish agency and expertise.
CTAsMinimal and functional ('Accept', 'Decline', 'Contact'), lacking aggressive promotional language.
don't use vibrant accent colors — screenshot shows a strictly monochromatic palette of black, white, and grays
don't use decorative serifs — screenshot shows clean, geometric grotesque-sans typography throughout
don't crowd elements together — screenshot shows expansive whitespace and generous padding between text blocks
don't use heavy drop shadows — screenshot shows minimal, flat surfaces with subtle 1px borders where needed
don't use playful or rounded display fonts — screenshot shows serious, modern sans-serifs for headlines
don't center-align primary text blocks — screenshot shows strong left-alignment for all hero and body content
Captured from the live site · real computed styles
11
System prompt
This is a premium agency website characterized by an ultra-clean, minimalist aesthetic and expansive whitespace. The primary colors are stark white (#FFFFFF) and near-black ink (#1A1A1A), with light grays (#F2F2F2, #949495) used for subtle background contrast and muted text. The typography is strictly modern grotesque-sans, featuring very large, left-aligned display headings (55px) with tight negative letter-spacing (-0.825px). Critical design rules include: avoid any use of vibrant accent colors (the palette is strictly monochromatic), avoid decorative serifs or playful fonts, avoid cluttered grids or heavy drop shadows, and maintain generous, asymmetric vertical rhythm. Use slow, smooth (1s) opacity transitions for reveals and faster (0.3s) transitions for interactive states.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
