A high-end architecture magazine meets a luxury hotel lobby.
02
Color
#FFFFFFInk
#0D0E13BG
#E0CCBDMuted
rgba(255,255,255,0.15)Line
Heroic photography serves as the primary canvas, with crisp white typography providing maximum contrast and a single warm accent tone adding subtle warmth.
03
Typography
humanist-sans
display250px · 300
heading144px · 300
body16px · 300
Use extremely tight negative tracking for display sizes to achieve a premium, architectural look. · Maintain a light (300) weight for all text to preserve elegance. · Ensure high contrast (white on dark) for all typographic elements.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Spacious, gallery-like rhythm with generous padding around major elements.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Minimal; rely on color contrast and photographic depth rather than lines.
06
Layout
1440container
12columns
24pxgutter
768 / 1024breakpoints
Full-bleed photographic hero with left-aligned text blocks.
07
Motion & Interaction
220msmicro
500mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Smooth opacity transitions for hover states. · Cinematic scrolling reveals for large text elements.
Subtle opacity reduction. · Immediate response.
08
Components
buttonMinimal text links with no background.
cardFull-bleed image overlays.
heroFull-viewport photographic background with massive, left-aligned typography.
09
Voice & Don'ts
ToneConfident, understated, and premium.
HeadlinesMassive, single-word or short-phrase statements in light weight.
CTAsSubtle, text-based calls to action.
Don't use heavy font weights — screenshot shows a consistent light (300) weight for all text.
Don't add rounded corners to main surfaces — screenshot shows sharp, architectural edges.
Don't use bright, saturated accent colors — screenshot relies on white text over photography.
Don't crowd the layout — screenshot shows generous padding (e.g., 50px) around text blocks.
Don't use a grid with visible lines — screenshot uses whitespace and alignment to organize content.
Don't use small display text — screenshot shows 'Digital' at a massive 250px scale.
Captured from the live site · real computed styles
11
System prompt
This is a premium digital design studio website that uses a cinematic, image-driven layout to establish an elevated brand presence. The core palette consists of a dark architectural base (#0D0E13) and crisp white (#FFFFFF) typography, with a warm, muted sand (#E0CCBD) used for secondary accents. Typography is humanist-sans-serif, specifically a light-weighted (300) face used at massive scales with tight negative tracking. The layout is full-bleed and spacious, prioritizing high-quality photography over complex UI patterns. Critical constraints: never use heavy font weights or bright saturated colors; maintain generous, gallery-like spacing; and always ensure high contrast between text and photographic backgrounds.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
