A premium design magazine brought to the web, prioritizing large editorial photography and clean typography.
02
Color
#556e9bAccent
#000000Ink
#ffffffBG
#f0f0f0BG soft
#757575Muted
rgba(85, 110, 155, 1)Line
High-contrast black and white base with a signature slate-blue accent.
03
Typography
humanist-sans · transitional-serif
display56px · 700
h140px · 700
body18px · 400
small14px · 700
Use sans-serif for headlines and navigation. · Use serif for article body text. · Weight 700 is heavily used for emphasis and navigation. · Maintain tight letter-spacing for large display text.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous whitespace separates editorial blocks.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Sharp 3px borders for section dividers.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Strict grid with a dominant left column for articles and a right column for secondary content.
07
Motion & Interaction
200msmicro
400mssmall
800msmedium
ease-in-outeasing
Smooth transitions for background and color changes.
Background color shifts on interactive elements. · Instant response.
08
Components
buttonMinimal, text-based or solid blocks with sharp corners.
cardImage-heavy blocks with overlaid text and sharp borders.
chipSimple text labels with bold weights.
inputClean rectangular fields with thin borders.
heroLarge photographic imagery with overlaid text.
09
Voice & Don'ts
ToneAuthoritative, sophisticated, and clean.
HeadlinesShort, descriptive, and impactful.
CTAsUnderstated and direct.
Don't use rounded corners on cards — screenshot shows sharp 0px borders.
Don't use a colorful accent palette — screenshot is dominated by black, white, and a single muted blue (#556e9b).
Don't use sans-serif for long-form text — screenshot uses a serif font for article body.
Don't add drop shadows to containers — screenshot shows flat surfaces.
Don't use complex layouts — screenshot uses a strict, clean grid.
Don't use playful typography — screenshot relies on high-contrast, serious weights.
Captured from the live site · real computed styles
11
System prompt
Dezeen is a premium architecture and design editorial platform. Its design DNA is built on a high-contrast black and white palette with a signature muted blue (#556e9b) accent. Typography uses a humanist sans-serif for headlines and a transitional serif for body text, maintaining a sophisticated and authoritative voice. Critical rules: use sharp 0px borders, avoid rounded corners, and maintain a strict editorial grid. Never use playful or decorative elements; the aesthetic is clean, curated, and photographic.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
