---
title: "Eindhoven Design District design system"
variant: extended
source: https://www.eindhovendesigndistrict.com/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/eindhovendesigndistrict-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Eindhoven Design District · Design System

> Bold typography meets Eindhoven’s design landscape

**Theme:** light · **Industry:** design · **Source:** https://www.eindhovendesigndistrict.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Eindhoven Design District presents the city’s design initiatives through a stark, spacious editorial layout punctuated by vivid pink, red, and blue project panels. Monumental Helvetica Now lettering and documentary architecture photography make the page feel like a contemporary design publication rather than a conventional directory.

## North star

Use oversized, tightly composed black typography and generous white space, then reserve saturated color blocks for distinct project stories.

## Overview

The visual identity is built on a white canvas, black typography, and a deliberately selective use of saturated project colors. Pale pink, vivid red, and electric blue mark individual feature bands, giving each project a distinct editorial chapter; they are not a continuous site-wide gradient or background treatment. Helvetica Now carries everything from compact navigation to oversized, tightly tracked display lettering, with weight and scale establishing hierarchy rather than decorative type. The hero uses unusually large, spatially arranged words alongside cropped photographs of buildings and materials. Below it, long white intervals separate the introduction, project features, articles, discovery links, and contact prompt. Project blocks pair strong color fields and black text with documentary photographs, often in an asymmetric split. Borders stay thin and black on rounded outline controls; the general page remains flat, with no visible shadow-driven card system.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| District Ink | `#000000` | `--color-district-ink` | brand | Primary text, oversized hero lettering, navigation, footer type, and thin outlines around pill controls. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas and broad breathing spaces between editorial sections; also the contrasting fill on selected controls. |
| Studio Pink | `#ffc2eb` | `--color-studio-pink` | accent | Alternating project feature bands, notably Toolbox bewegingsvrijheid and Pretty Plastic. |
| Signal Red | `#ff0000` | `--color-signal-red` | accent | The Infomarkers project feature band; its small additional text appearance is incidental to that section. |
| Electric Blue | `#0f26ed` | `--color-electric-blue` | accent | Erfgoedputdeksels project feature band, providing a strong contrast with the pink and red project panels. |
| Soft Concrete | `#e8e8e8` | `--color-soft-concrete` | surface | Light gray background for the article feed, separating its image-led cards from the white page canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ffc2eb` (Studio Pink) · `--color-surface-2` → `#e8e8e8` (Soft Concrete) · `--color-text` → `#000000` (District Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#000000` (District Ink) · `--color-accent` → `#ffc2eb` (Studio Pink) · `--color-accent-2` → `#ff0000` (Signal Red) · `--color-accent-3` → `#0f26ed` (Electric Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#ffc2eb` | 14.17:1 | AAA |
| `#000000` | `#e8e8e8` | 17.14:1 | AAA |
| `#ffffff` | `#ffc2eb` | 1.48:1 | fail |
| `#ffffff` | `#e8e8e8` | 1.23:1 | fail |
| `#ffc2eb` | `#ffffff` | 1.48:1 | fail |
| `#ffc2eb` | `#e8e8e8` | 1.21:1 | fail |

### Gradients

- `linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))`
- `linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| HelveticaNow | `--font-body` | webfont | 600, 400 | Site-wide display, heading, body, navigation, link, caption, and button type. | Inter |

- **HelveticaNow:** Use measured 400 and 600 weights. Display and navigation are bold with tight negative tracking; case remains natural, not transformed.

### Type scale — Perfect Fifth (ratio ≈ 1.462, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 50px | 600 | 1 | -0.02em | — | HelveticaNow | Hero headline and primary page title. |
| h2 | 35px | 600 | 1.2 | -0.004em | — | HelveticaNow | Section headings and major project titles. |
| h3 | 23px | 600 | 1 | -0.017em | — | HelveticaNow | Article titles and smaller editorial headings. |
| body | 16px | 400 | 1.4 | -0.017em | — | HelveticaNow | Project descriptions, introductory copy, and supporting paragraphs. |
| caption | 14px | 600 | 1.31 | 0 | — | HelveticaNow | Compact labels and image or article metadata. |
| button | 16px | 600 | 1 | -0.024em | — | HelveticaNow | Pill-shaped outlined actions and section controls. |
| nav | 35px | 600 | 1 | -0.03em | — | HelveticaNow | Header navigation and prominent menu links. |
| link | 50px | 600 | 1 | -0.02em | — | HelveticaNow | Large editorial links and calls to explore related design content. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 1, 2, 3, 10, 12, 15, 18, 19, 20, 21, 27, 30, 35, 40, 50, 100 px.
- Section rhythm 50px · element gap 40px · card padding — · max content width 1340px.

The page uses a spacious editorial canvas with measured maximum width of 1340px and predominantly left-aligned content. The hero is a loose, asymmetric composition of oversized typography and separate photographs. Project features alternate strong color panels with large photographs; article and discovery areas shift to multi-column layouts. Measured section rhythm is spacious, with a 50px section gap and a 40px element gap. Keep wide white intervals between major content groups; avoid making the page feel like a dense catalogue.

## Shape & elevation

- Radius: button `9999px` · nav `9999px` · link `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease` on interactive elements.

The page is primarily flat: no measured shadows are present, and broad color fields rather than elevated cards organize content. Use thin black outlines on pill-shaped navigation and action controls. Keep imagery and color bands flush to their section geometry; reserve layering for the hero’s overlapping visual composition rather than simulated depth.

## Imagery

Use documentary photographs of Eindhoven’s architecture, streets, public-space interventions, and material details. Images appear as rectangular crops, often large enough to balance a colored text panel; the hero uses separate architectural crops around oversized lettering. Keep treatment observational and natural rather than adding illustration, 3D gloss, gradients, or heavy filters. Measured section counts show image-led article and discovery content as well as project photography.

## Components

### Header navigation

Compact black brand mark at left; language selector, search, and Menu controls at right. Controls use thin black outlines and pill-shaped silhouettes.

### Typographic hero

Oversized black Eindhoven Design District lettering arranged asymmetrically with smaller title text and cropped architecture photographs.

### Project feature split

Large project story with a saturated pink, red, or blue text panel paired with documentary photography; include a compact Lees meer link.

### Outline action

Text-led action such as Meer over Eindhoven Design District inside a white or transparent pill with a thin black border and black text.

### Article feed

Light-gray editorial band with a section title, image-led article cards, compact red category labels, and carousel arrows.

### Footer navigation

Spacious white closing area combining partner acknowledgements, a large brand wordmark, and a concise vertical set of site links.

### Measured component styles

- **Primary button** (“Zie alle artikelen”): background #ffffff · text #000000 · radius 500px · padding 18px 35px 21px 35px · 600 16px HelveticaNow
- **Secondary button** (“Meer over Eindhoven Design District”): transparent background · text #000000 · border 1px solid #000000 · radius 500px · padding 16px 35px 19px 35px · 600 16px HelveticaNow
- **Link** (“Lees meer”): transparent background · text #000000 · radius 0px · padding 0px · 400 19px HelveticaNow
- **Navigation item** (“NL EN search Menu”): transparent background · text #000000 · radius 0px · padding 0px · 600 19px HelveticaNow

## Do

- Keep the canvas predominantly white and uncluttered.
- Use Helvetica Now or a close substitute with strong weight contrast.
- Compose the hero with oversized, tightly tracked black lettering.
- Give project stories distinct pink, red, or blue color bands.
- Pair project text panels with natural documentary photography.
- Use thin black outlines and pill shapes for navigation controls.

## Don't

- Do not apply saturated color as a continuous page background.
- Do not add gradients, drop shadows, or glossy card treatments.
- Do not center every heading or regularize the asymmetric hero.
- Do not place project imagery inside decorative frames.
- Do not turn the spacious page into a dense grid of small cards.
- Do not use colors outside the measured palette for brand UI.

## Agent prompt

Build a new editorial page in the Eindhoven Design District visual style. Use Gallery White (#ffffff) as the dominant canvas and District Ink (#000000) for confident, tightly tracked Helvetica Now–style typography. Create an asymmetric hero with oversized display lettering and a few natural architectural photo crops. Organize featured stories as split text-and-photo sections, using Studio Pink (#ffc2eb), Signal Red (#ff0000), or Electric Blue (#0f26ed) as distinct section fields rather than a continuous theme. Use Soft Concrete (#e8e8e8) only as a quiet supporting surface, such as an editorial feed band. Maintain generous white intervals, left-aligned copy, thin outlined pill controls, and a flat visual treatment without shadows. Keep photography documentary, material-focused, and rectangular; let scale, cropping, and typography provide visual energy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Asymmetric, single-column composition of oversized lettering and separated architectural photo crops. | Brand and navigation access, Visual introduction | Oversized black typography, White canvas, Architectural photo crops |
| 2 | other | Single-column, left-aligned introduction on white with a brief outline action. | Organization context, Learn more action | Black heading and copy, Outlined pill button |
| 3 | feature-split | Pink project text band paired with a large documentary photograph. | Project overview, Read-more link, All-projects action | Studio Pink field, Black text, Split image and copy |
| 4 | feature-split | Red project text band beside a photograph of an outdoor information marker. | Project overview, Read-more link | Signal Red field, Black text, Documentary photograph |
| 5 | feature-split | Electric-blue text panel paired with a close street-level photograph of a designed manhole cover. | Project overview, Read-more link | Electric Blue field, High-contrast type, Material detail photography |
| 6 | feature-split | Pink story panel paired with a close crop of patterned facade tiles. | Project overview, Read-more link | Studio Pink field, Black text, Material photography |
| 7 | content-feed | Light-gray band with a heading, three-column image-led article feed, and carousel controls. | Browse articles, Carousel navigation, View all action | Soft Concrete surface, Article thumbnails, Compact red category labels |
| 8 | feature-grid | White discovery section with a four-column arrangement of destination links and supporting imagery. | Explore city design, Visit external resource | Black headings, Editorial links, Image-led items |
| 9 | cta | Spacious single-column contact prompt on white with one direct contact link. | Contact invitation, Direct response link | Large black question heading, Minimal link treatment |
| 10 | footer | White two-column footer pairing partner credits with navigation and a large wordmark. | Site navigation, Partner attribution | Black footer links, Large brand lettering, Sparse columns |

## Source CSS custom properties (selected)

```css
--color-grey: #e8e8e8;
--color-grey-light: #c7c7c7;
--color-grey-lighter: #dfdfdf;
--color-pink: #ffc2eb;
--color-red: #ff0000;
--color-blue: #0f26ed;
--color-main: #0f26ed;
--font: "HelveticaNow", Arial;
--grid-gap: 2.5rem;
--theme-primary: #ffc2eb;
--theme-secondary: black;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/eindhovendesigndistrict-com