A high-end architectural portfolio where the medium (the website) mirrors the precision and raw materiality of the studio's physical projects.
02
Color
#000000Ink
#FFFFFFBG
#E5E7EBMuted
rgba(229, 231, 235, 1)Line
A strict monochrome palette that serves as a neutral, unobtrusive frame for high-quality architectural photography.
03
Typography
grotesque-sans
display28px · 400
body17px · 400
Use a clean grotesque sans-serif for all text to maintain a modern, utilitarian aesthetic. · Keep font weight consistently at 400 to avoid visual heaviness.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
The layout relies on a strict 4px base grid with minimal padding, allowing full-bleed photography to dominate the viewport.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Extremely minimal, using 1px solid lines (#E5E7EB) only where necessary for subtle separation.
06
Layout
1440container
12columns
24pxgutter
768 / 1024breakpoints
A full-bleed, editorial grid where large-scale photography is the primary structural element, overlaid with minimal text.
07
Motion & Interaction
220msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth opacity and color transitions on hover, subtle scroll-based reveals of images and text.
Smooth color transitions, likely changing text or background color to indicate interactivity. · Standard pointer cursor indicating clickable elements.
08
Components
buttonMinimal text-based buttons, likely relying on hover states rather than heavy visual styling.
cardNo traditional cards; content is presented in a continuous, scroll-based narrative flow.
chipNone.
inputNone.
heroA full-viewport, immersive architectural photograph with overlaid introductory text.
09
Voice & Don'ts
ToneProfessional, concise, and highly confident.
HeadlinesDirect and declarative, using a standard weight to let the photography do the talking.
CTAsMinimal and understated, often just a text link or icon.
don't use vibrant accent colors — the screenshot shows a strictly monochromatic palette.
don't apply heavy drop shadows or glows — the screenshot shows completely flat, unadorned elements.
don't use decorative, handwritten, or script fonts — the screenshot uses only a clean, standard grotesque sans-serif.
don't use thick borders or highly rounded corners — the screenshot shows sharp, minimal lines.
don't use heavy bold weights for headlines — the screenshot maintains a consistent, standard font weight.
don't add unnecessary padding or margins that detract from the full-bleed photography.
Captured from the live site · real computed styles
11
System prompt
This is a premium architectural studio portfolio focused on raw, industrial materials and minimalist execution. The design relies heavily on a monochrome palette of pure white (#FFFFFF) and solid black (#000000), using a single grotesque sans-serif font family at a consistent 400 weight. Key critical constraints include avoiding any vibrant accent colors, omitting heavy shadows or rounded corners, and refusing to use decorative typography. The layout is entirely driven by full-bleed, high-quality photography with minimal, overlaid text. Interaction is subtle, relying on smooth 0.3s transitions. This restraint ensures the design never competes with the studio's architectural work.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
