---
name: Eindhovendesigndistrict
description: "This site is an excellent example of typographic-led editorial design where massive scale and negative space replace traditional decorative elements."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#FF0000"
  neutral: "#BFBFBF"
  bg-soft: "#E8E8E8"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 150px
    lineHeight: 0.9
    fontWeight: 600
    letterSpacing: "-1px"
  display-sm:
    fontFamily: grotesque-sans
    fontSize: 50px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-1px"
  body:
    fontFamily: grotesque-sans
    fontSize: 19px
    lineHeight: 1.47
    fontWeight: 400
    letterSpacing: "-0.38px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.31
    fontWeight: 400
    letterSpacing: "0px"

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

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 40px

---

## Overview

A bold, typographic editorial platform showcasing the design culture of Eindhoven.

*A curated urban design exhibition*

## Colors

High-contrast monochrome with a single striking red accent

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#FF0000`)** — uses `accent` token
- **Muted (`#BFBFBF`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Generous whitespace around large typographic elements and image blocks

## Elevation & Depth

- None observed
- Borders: Minimal 1px black borders used strictly for interactive elements and tags

## Shapes

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

## Components

- **button:** Minimal outline pills with black text or black fill with white text
- **card:** Image-led content blocks with strong typographic hierarchy and no container borders
- **chip:** Small uppercase tags with 1px black borders
- **input:** Not prominently featured
- **hero:** Massive typographic focal point accompanied by offset architectural photography

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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