Eindhoven Design District

## Quick Color Reference - text: #000000 - background: #ffffff - secondary surface: #e8e8e8 - border: #000000 (hairline) or #bfbfbf (muted) - accent: #ff0000 (editorial category labels only) - primary action: no distinct CTA color ## 3-5 Example Component Prompts 1. **Display Hero Headline**: Create an oversized headline reading 'Eindhoven' at 150px, HelveticaNow weight 400, #000000, letter-spacing -7.5px, line-height 0.93. Position it top-left of a white canvas. Add a second word 'Design' rotated 90° to the right of the first, same size and weight. 2. **Pill Ghost Button**: Create a button with text 'Meer over Eindhoven Design District' at 16px HelveticaNow weight 400, #000000, letter-spacing 0.08px. Border: 1px solid #000000. Border-radius: 500px. Background: #ffffff. Padding: 10px 15px. No shadow, no fill. 3. **Article Card**: Create a card on #e8e8e8 background. Top: full-bleed architectural photograph (no border, no radius). Below: 'Interview' label in 14px weight 400 #ff0000, then title in 19px weight 600 #000000 line-height 1.2, then 3-line excerpt in 16px weight 400 #000000. Card has no padding, no border, no shadow. 4. **Navigation Bar**: Create a horizontal nav with white background. Left: logo text 'Eindhoven / Design District' in two lines, 14px weight 400 #000000. Right: language pill ('NL ▾' in 14px, 1px black border, 500px radius), search circle (40px diameter, 1px black border, magnifier icon), and 'Menu ≡' pill button (same as language pill style). 5. **Section Band**: Create a full-width section with #e8e8e8 background, 80px vertical padding. Inside: a 3-column grid of article cards (described above), with 20px gap between columns. Below the grid, a centered pill ghost button 'Zie alle artikelen' (16px, 1px black border, 500px radius, #ffffff background).

## Weight Philosophy The system uses exactly two weights (400 and 600) of a single typeface. The editorial power comes from SIZE, not weight contrast. Display text is always 400 — the restraint of a lighter weight at 150px+ creates authority through scale alone, not through boldness. Weight 600 is reserved for card titles (19px), button labels, and short headings where structural emphasis is needed at small sizes. ## Tracking Rules - Display (150px+): -0.05em — letters nearly touch, creating a sculptural mass - Heading (46–50px): -0.03em — tight but legible - Subheading (35px): -0.02em — still compressed - Body (18–23px): -0.004 to -0.017em — near-normal, slight tightening - Caption (14–16px): +0.005 to +0.015em — slight opening for readability at small sizes ## Line-Height Rules - Display: 0.93–1.00 — lines nearly touch, vertical density is the aesthetic - Headings: 1.0–1.15 — still compressed - Body: 1.31–1.47 — generous for readability, creating a visual rest after the display density

## Hero Pattern The hero is not a banner — it's a typographic installation. One word sits horizontally at maximum display size, a second word is rotated 90° (reading bottom-to-top), and photographs are scattered as rectangular crops in the negative space. The composition is deliberately asymmetric: never centered, never balanced. The text and images create tension through overlap-adjacency rather than grid alignment. ## Section Rhythm Full-width bands alternate between #ffffff and #e8e8e8. Transitions are seamless — no borders, no dividers. Vertical spacing between sections is 80px+. Content within sections uses a max-width of 1200px but frequently breaks the container for full-bleed photography. ## Content Density Information is sparse. A section might contain only a paragraph (3-4 lines) and a single button. The design trusts the reader to engage with limited content rather than overwhelming with options. The article grid (3 columns) is the densest pattern on the site. ## Navigation Model Top bar only. No sidebar, no sticky header, no mega-menu. The 'Menu' button in the top-right likely opens a fullscreen overlay, but the default state is the minimal bar. The logo is small (14px) and unobtrusive — the hero text IS the brand statement, not the nav logo.