# Dezeen — Style Reference
> Architectural Blueprint on Crisp White. This metaphor evokes the precision and clarity of architectural drawings and the pristine nature of a fresh page.
**Theme:** light
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.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Pitch Black | `#000000` | `--color-pitch-black` | Primary text, core UI elements, bold borders — forms the backbone of the typographic hierarchy and defines structure. |
| Pure White | `#ffffff` | `--color-pure-white` | Page backgrounds, card surfaces, input fields — provides expansive canvas for content and ensures high contrast. |
| Fog Gray | `#f0f0f0` | `--color-fog-gray` | Subtle background for UI sections, list backgrounds — offers a soft visual break from pure white without introducing chromatic noise. |
| Silver Ash | `#d8d8d8` | `--color-silver-ash` | Secondary backgrounds, subtle borders, inactive link states — provides subdued contrast for secondary content. |
| Concrete Gray | `#757575` | `--color-concrete-gray` | Subtle text, secondary links — used for less prominent textual information, such as timestamps or meta-information. |
| Soft Stone | `#eaeaea` | `--color-soft-stone` | Navigation backgrounds, dividers — a slightly darker off-white for structural elements. |
| Indigo Accent | `#556e9b` | `--color-indigo-accent` | Key headings, interactive links, active navigation, subtle button borders — establishes brand identity and guides user attention. |
| Sunset Orange | `#ff7617` | `--color-sunset-orange` | Accent for certain links, potentially call-to-action highlights — adds a vibrant, warm contrast. |
## Tokens — Typography
### StandardCT — Display and primary headings. The bold, all-caps presentation at larger sizes commands attention, while the specific font-feature-settings ensure stylistic consistency with the brand's custom type, providing a strong, editorial presence. · `--font-standardct`
- **Substitute:** Open Sans, Montserrat
- **Weights:** 700
- **Sizes:** 19px, 27px, 40px
- **Line height:** 0.95, 1.00, 1.10, 1.20, 1.25, 1.37, 1.38
- **OpenType features:** `"calt" 0, "kern", "liga" 0`
- **Role:** Display and primary headings. The bold, all-caps presentation at larger sizes commands attention, while the specific font-feature-settings ensure stylistic consistency with the brand's custom type, providing a strong, editorial presence.
### Chronicle Text G1 A — Body copy, article content, secondary headings, and general UI text. This serif font provides a classic, readable foundation for lengthy editorial content, distinguishing it from the sans-serif headings. · `--font-chronicle-text-g1-a`
- **Substitute:** Georgia, Merriweather
- **Weights:** 400, 700
- **Sizes:** 14px, 16px
- **Line height:** 1.23, 1.25, 1.29, 1.50
- **Role:** Body copy, article content, secondary headings, and general UI text. This serif font provides a classic, readable foundation for lengthy editorial content, distinguishing it from the sans-serif headings.
### Arial — System fallback for UI elements, labels, and minor interactive components where a clean, straightforward sans-serif is required. · `--font-arial`
- **Substitute:** Helvetica Neue
- **Weights:** 400, 700
- **Sizes:** 13px, 14px, 16px
- **Line height:** 1.00, 1.20, 1.29
- **Role:** System fallback for UI elements, labels, and minor interactive components where a clean, straightforward sans-serif is required.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 14px | 1.29 | — | `--text-body` |
| body-lg | 16px | 1.25 | — | `--text-body-lg` |
| subheading | 19px | 1.38 | — | `--text-subheading` |
| heading | 27px | 1.2 | — | `--text-heading` |
| display | 40px | 1.1 | — | `--text-display` |
## Tokens — Spacing & Shapes
**Base unit:** 4px
**Density:** comfortable
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 9 | 9px | `--spacing-9` |
| 10 | 10px | `--spacing-10` |
| 11 | 11px | `--spacing-11` |
| 13 | 13px | `--spacing-13` |
| 15 | 15px | `--spacing-15` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 25 | 25px | `--spacing-25` |
| 26 | 26px | `--spacing-26` |
| 30 | 30px | `--spacing-30` |
| 35 | 35px | `--spacing-35` |
| 50 | 50px | `--spacing-50` |
### Border Radius
| Element | Value |
|---------|-------|
| cards | 0px |
| inputs | 0px |
| buttons | 0px |
| accentCircular | 100% |
### Shadows
| Name | Value | Token |
|------|-------|-------|
| subtle | `rgba(101, 122, 183, 0.6) 10px 0px 0px 0px, rgba(101, 122,...` | `--shadow-subtle` |
### Layout
- **Page max-width:** 1212px
- **Section gap:** 48px
- **Card padding:** 0px
- **Element gap:** 9px
## Components
### Circular Play Button
**Role:** Interaction
Small, circular button with a black background (#000000) and an 'Indigo Accent' (#556e9b) border and text. Fully rounded (borderRadius: 50%) with no padding specified, implying a contained icon. This button is used for media playback, distinguished by its unique circular shape against a predominantly angular UI.
### Underlined Text Button
**Role:** Navigation/Action
Transparent background (rgba(0,0,0,0)) with 'Pitch Black' (#000000) text and border color. No border-radius. Minimal vertical padding (1px top/bottom, 6px sides). Used for text-based actions or links within content, maintaining a subtle presence.
### Circular Highlight Button
**Role:** Accent/Icon
Small, circular button with 'Silver Ash' (#dddddd) background and 'Pure White' (#ffffff) text. Fully rounded (borderRadius: 100%) with 5px padding on all sides. Used for prominent, small interactive elements or icons.
### Article Card
**Role:** Content Display
Transparent background with no border-radius or box-shadow, relying on text and image content for definition. No padding, implying content extends to edges. Used for displaying articles in lists or grids, maintaining a clean, unadorned presentation.
### Newsletter Input Field
**Role:** Form Input
Pure White (#ffffff) background with 'Pitch Black' (#000000) text and border. No border-radius, presenting a sharp, functional appearance. Features 0px top/bottom padding and 5px horizontal padding. Used for email subscription forms.
## Do's and Don'ts
### Do
- 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.
### Don't
- 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.
## Elevation
- **Highlight Heading Borders:** `rgba(101, 122, 183, 0.6) 10px 0px 0px 0px, rgba(101, 122, 183, 0.6) -10px 0px 0px 0px`
## Imagery
This site prominently features photography within article cards and hero sections, often displayed full-bleed within its content blocks (0px padding, no radius). The photography style is varied, encompassing product shots, architectural exteriors and interiors, and landscape vistas, but generally leans towards high-quality, professional imagery that serves to illustrate content more than set a specific mood. Photos are contained, not overlapping, and appear without masks or special treatments. Density is moderate, balancing visual interest with text-dominant article layouts. Icons are minimal, typically monochrome, and integrated subtly for navigation or interaction.
## Layout
The page maintains a centered max-width of 1212px for its core content, providing a contained reading experience. The hero section often presents a split layout, with a prominent image juxtaposed against a large headline. Content sections follow a vertical rhythm, with consistent spacing of 9px to 11px between elements and an implied 48px between major sections. Articles typically arrange text and images in alternating left-right or stacked configurations. Navigation consists of a sticky top bar with a search utility and prominent category links, supplemented by a left sidebar for 'Highlights' and 'Most Popular' sections creating a multi-column editorial structure. The layout prioritizes clear content separation and readability.
## Agent Prompt Guide
### Quick Color Reference
- Text: #000000
- Background: #ffffff
- CTA: #556e9b
- Border: #000000 (primary), #556e9b (accent)
- Accent: #ff7617
### 3-5 Example Component Prompts
1. Create a primary headline: Text 'Milan design week must-sees', font 'StandardCT', weight 700, size 40px, lineHeight 1.1, color #000000, fontFeatureSettings '"calt" 0, "kern", "liga" 0'.
2. Design an article body paragraph: Text 'London studio about DSDHA prioritises "elegant frugality" in Henry Moore Studios gallery revamp', font 'Chronicle Text G1 A', weight 400, size 16px, lineHeight 1.25, color #000000.
3. Make an interactive text link: Text 'Highlights', font 'Chronicle Text G1 A', weight 400, size 14px, color #556e9b, with a subtle 1px #556e9b border on hover.
4. Build a newsletter input field: 'Pure White' (#ffffff) background, 'Pitch Black' (#000000) text and 1px border. No border-radius. Padding 0px top/bottom, 5px left/right. Placeholder text 'Email' in #000000 color.
5. Assemble an Article Card: Transparent background, no border-radius. Contains an image at the top (no corner radius), followed by a 'subheading' in 'StandardCT' and a 'body' text in 'Chronicle Text G1 A'. No internal padding for the card container.
## Similar Brands
- **ArchDaily** — Both are architectural editorial sites with a focus on clean, content-first layouts and sophisticated typography.
- **Wallpaper*** — Shares a high-contrast, editorial aesthetic with strong typographic hierarchy and a refined visual language.
- **The New York Times** — Employs a similar classic serif font for body text paired with a strong sans-serif for headlines, creating a timeless editorial feel.
- **Monocle** — Known for a structured, content-rich layout that blends clean typography with carefully curated imagery, similar to Dezeen's approach.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-pitch-black: #000000;
--color-pure-white: #ffffff;
--color-fog-gray: #f0f0f0;
--color-silver-ash: #d8d8d8;
--color-concrete-gray: #757575;
--color-soft-stone: #eaeaea;
--color-indigo-accent: #556e9b;
--color-sunset-orange: #ff7617;
/* Typography — Font Families */
--font-standardct: 'StandardCT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-chronicle-text-g1-a: 'Chronicle Text G1 A', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-body: 14px;
--leading-body: 1.29;
--text-body-lg: 16px;
--leading-body-lg: 1.25;
--text-subheading: 19px;
--leading-subheading: 1.38;
--text-heading: 27px;
--leading-heading: 1.2;
--text-display: 40px;
--leading-display: 1.1;
/* Typography — Weights */
--font-weight-regular: 400;
--font-weight-bold: 700;
/* Spacing */
--spacing-unit: 4px;
--spacing-4: 4px;
--spacing-5: 5px;
--spacing-6: 6px;
--spacing-8: 8px;
--spacing-9: 9px;
--spacing-10: 10px;
--spacing-11: 11px;
--spacing-13: 13px;
--spacing-15: 15px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-25: 25px;
--spacing-26: 26px;
--spacing-30: 30px;
--spacing-35: 35px;
--spacing-50: 50px;
/* Layout */
--page-max-width: 1212px;
--section-gap: 48px;
--card-padding: 0px;
--element-gap: 9px;
/* Named Radii */
--radius-cards: 0px;
--radius-inputs: 0px;
--radius-buttons: 0px;
--radius-accentcircular: 100%;
/* Shadows */
--shadow-subtle: rgba(101, 122, 183, 0.6) 10px 0px 0px 0px, rgba(101, 122, 183, 0.6) -10px 0px 0px 0px;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-pitch-black: #000000;
--color-pure-white: #ffffff;
--color-fog-gray: #f0f0f0;
--color-silver-ash: #d8d8d8;
--color-concrete-gray: #757575;
--color-soft-stone: #eaeaea;
--color-indigo-accent: #556e9b;
--color-sunset-orange: #ff7617;
/* Typography */
--font-standardct: 'StandardCT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-chronicle-text-g1-a: 'Chronicle Text G1 A', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-body: 14px;
--leading-body: 1.29;
--text-body-lg: 16px;
--leading-body-lg: 1.25;
--text-subheading: 19px;
--leading-subheading: 1.38;
--text-heading: 27px;
--leading-heading: 1.2;
--text-display: 40px;
--leading-display: 1.1;
/* Spacing */
--spacing-4: 4px;
--spacing-5: 5px;
--spacing-6: 6px;
--spacing-8: 8px;
--spacing-9: 9px;
--spacing-10: 10px;
--spacing-11: 11px;
--spacing-13: 13px;
--spacing-15: 15px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-25: 25px;
--spacing-26: 26px;
--spacing-30: 30px;
--spacing-35: 35px;
--spacing-50: 50px;
/* Shadows */
--shadow-subtle: rgba(101, 122, 183, 0.6) 10px 0px 0px 0px, rgba(101, 122, 183, 0.6) -10px 0px 0px 0px;
}
```
Monochromatic academic blueprint
High-contrast editorial publication
Editorial archive, high contrast.
Minimalist editorial canvas; stark…
Architectural blueprint on white…
Architectural Blueprint Precision
Editorial blueprint on stark white
monochrome editorial manifesto –…
Editorial Minimal Canvas — Large,…
Architectural blueprint on warm…

Artist's sketchbook, bursting with…
High-contrast geometric…
Ordered Editorial Ink
Photographic gallery on crisp…
alpine starkness on white canvas
Architectural blueprint on white…
Editorial Grid, Ink on Paper
Black & White Blueprint: A stark,…
Editorial canvas, bold type
Architectural blueprints on…