Dezeen

Dezeen, monochromatic, monochrome

Preview image. Unlock full-res

Architectural Blueprint on Crisp White. This metaphor evokes the precision and clarity of architectural drawings and the pristine nature of a fresh page.

Industrymedia, editorial
Palette
#000000
#ffffff
#f0f0f0
#d8d8d8
#757575
#eaeaea
#556e9b
#ff7617

The Dezeen design system presents an editorial aesthetic, blending classic serif typography with a modern sans-serif for a distinctive voice. Dominant black text on bright white surfaces creates crisp readability, while the signature 'Indigo Accent' (#556e9b) injects a cool, authoritative hue across key interactive elements and titles. The layout emphasizes content separation and clear hierarchy, utilizing subtle borders and generous vertical spacing to frame articles and navigation. Use 'Pitch Black' (#000000) for all primary body text and 'Pure White' (#ffffff) for all main backgrounds to ensure high contrast and readability. Apply 'Indigo Accent' (#556e9b) exclusively to key interactive elements like links, active navigation items, and prominent headings to guide user focus. Reserve the 'Circular Play Button' style for media controls, emphasizing its unique shape against the otherwise angular design. Maintain 0px border-radius for all cards and input fields to uphold the sharp, architectural aesthetic. Utilize 'Chronicle Text G1 A' for all long-form editorial content at 14px or 16px with appropriate line heights (1.23-1.50) for optimal legibility. Employ 'StandardCT' (weight 700) for all main headings and titles, leveraging its strong editorial presence. Ensure generous vertical spacing, typically in multiples of 9px or 11px, between content blocks to create a comfortable density and clear content hierarchy. Do not use shadow for card elevation; rely on clear borders or background color shifts where visible. Avoid decorative rounded corners on any elements other than specific circular buttons, as it contradicts the sharp, precise aesthetic. Do not introduce new chromatic colors unless explicitly defined as an accent; the palette is tightly controlled. Never use 'Arial' for main headings or body text; reserve it for minor UI elements or as a system fallback. Do not use excessive letter-spacing; all specified fonts use 'normal' letter-spacing to maintain typographic integrity.

More like this