---
name: Dezeen
description: "This site is a perfect example of a premium editorial design that prioritizes content and photography through a highly structured and refined visual system."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  tertiary: "#556e9b"
  neutral: "#757575"
  bg-soft: "#f0f0f0"
  line: "rgba(85, 110, 155, 1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  h1:
    fontFamily: transitional-serif
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "0"
  body:
    fontFamily: transitional-serif
    fontSize: 18px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: transitional-serif
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 700
    letterSpacing: "0"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, image-led editorial platform for architecture and design with a signature blue accent.

*A premium design magazine brought to the web, prioritizing large editorial photography and clean typography.*

## Colors

High-contrast black and white base with a signature slate-blue accent.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#556e9b`)** — uses `accent` token
- **Muted (`#757575`)** — uses `muted` token
- **Borders (`rgba(85, 110, 155, 1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** transitional-serif

- 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.

## Layout

Strict grid with a dominant left column for articles and a right column for secondary content.

*Rhythm:* Generous whitespace separates editorial blocks.

## Elevation & Depth

- Borders: Sharp 3px borders for section dividers.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Minimal, text-based or solid blocks with sharp corners.
- **card:** Image-heavy blocks with overlaid text and sharp borders.
- **chip:** Simple text labels with bold weights.
- **input:** Clean rectangular fields with thin borders.
- **hero:** Large photographic imagery with overlaid text.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```