# Eindhovendesigndistrict · Design system migration spec

> Source: https://www.eindhovendesigndistrict.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of typographic-led editorial design where massive scale and negative space replace traditional decorative elements.

## 1. Identity DNA

The system is built as a curated urban exhibition, where each component serves as a gallery piece within a larger architectural composition. Its DNA is the deliberate tension between massive, dominating type and the generous negative space that frames it, creating a visual rhythm that is both authoritative and open.

**One-liner:** A bold, typographic editorial platform showcasing the design culture of Eindhoven.
**Keywords:** design · district · eindhoven · architecture · culture
**Analogy:** A curated urban design exhibition

## 2. Color

The palette operates on a principle of stark clarity: pure black and white form a high-contrast monochrome foundation. A single, vibrant red is deployed with surgical precision as an accent for interactive tags, creating focal points without overwhelming the composition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#E8E8E8` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#BFBFBF` | placeholder |
| `--accent` | `#FF0000` | single accent |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast monochrome with a single striking red accent

The overarching principle is restraint; color is a tool for hierarchy and attention, not decoration.

## 3. Typography

Typography is the primary structural voice, using exclusively grotesque sans-serifs to maintain a clean, contemporary character. Large display sizes with tight negative tracking create a bold, architectural presence that dominates the visual field.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 150px | 0.9 | 600 | -1px | Main hero title |
| display-sm | 50px | 1.0 | 600 | -1px | Section titles |
| body | 19px | 1.47 | 400 | -0.38px | Main body text |
| caption | 16px | 1.31 | 400 | 0px | Small UI elements and captions |

**Type rules:**
- Use tight negative letter-spacing for large display sizes
- Maintain high weight contrast between headings and body
- Allow large typography to dominate the visual hierarchy

## 4. Spacing

Spacing follows a generous rhythm, creating expansive buffers around the large typographic blocks and image compositions to let each element breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 40 / 50 / 64 / 96 px
- **Rhythm:** Generous whitespace around large typographic elements and image blocks

## 5. Surfaces

Surfaces are intentionally flat, devoid of drop shadows or heavy gradients to maintain a clean, architectural clarity. Depth is suggested through layout and overlap rather than applied effects, with minimal 1px borders used strictly for functional boundaries like interactive tags.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - None observed
- **Borders:** Minimal 1px black borders used strictly for interactive elements and tags

## 6. Layout

The layout skeleton is asymmetric and text-led, where massive typography often overlaps with offset architectural photography. This creates a dynamic grid that rejects uniform centering in favor of strong left-aligned compositions and deliberate visual tension.

- **Container max:** 1400px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric, text-led layouts with overlapping elements and dynamic grid shifts

## 7. Motion & Interaction

Motion is restrained and purposeful, used to confirm interaction rather than to decorate. Smooth 0.25-second color transitions on hover and subtle transforms on interactive elements provide clear, functional feedback without distraction.

- **Durations:** micro 100ms · small 250ms · medium 350ms
- **Easing:** `cubic-bezier(0.165, 0.84, 0.44, 1)`
- **Patterns:**
  - Hover state transitions for buttons and interactive elements
  - Subtle transform animations on grab-able elements

- **Hover:** Background color or color inversion
- **Click:** Standard active states
- **Transition:** Smooth 0.25s color transitions
- **Keyboard:** Standard browser focus indicators

## 8. Voice & Don'ts

The editorial voice is direct, curated, and authoritative, matching the visual boldness of the typography. Headlines use sentence case or lowercase with tight tracking, and calls to action are clear, concise, and minimal.

- **Tone:** Direct, curated, and authoritative
- **Headline style:** Bold, often using sentence case or lowercase with tight tracking
- **CTA style:** Clear, concise, and minimal
- **Avoid:** Playful or whimsical language / Overly complex sentence structures / Decorative or serif typography

### Don'ts
- ❌ Don't use serif typography — screenshot shows strict use of grotesque sans-serifs
- ❌ Don't add drop shadows to containers — screenshot shows flat, borderless image and text blocks
- ❌ Don't center all content — screenshot shows strong alignment to the left and dynamic asymmetric layouts
- ❌ Don't use multi-colored gradients — screenshot shows solid black and white backgrounds
- ❌ Don't use small, delicate icons — screenshot shows bold, clear iconography like the menu hamburger
- ❌ Don't overfill the screen with content — screenshot shows generous whitespace and breathing room

The system deliberately excludes playful language, decorative serif typography, and multi-colored gradients to preserve its focused, architectural integrity.

## System Prompt (paste into AI tool)

```
A bold editorial design system for an urban design platform. Positioned as a curated guide to Eindhoven's design culture. Key colors are pure black (#000000) and white (#FFFFFF) for high contrast, with a single vibrant red (#FF0000) for accent tags and a light grey (#E8E8E8) for soft backgrounds. Typography is exclusively grotesque sans-serif, featuring massive display sizes with tight tracking and clear hierarchy. Critical donts: Do not use serif fonts or decorative typography; Do not center all text elements, rely on strong left alignment and asymmetry; Do not use drop shadows or heavy gradients, keep surfaces flat and clean; Do not shy away from massive, dominating text sizes in the hero sections.
```