---
name: Neutra Vdl
description: "This site is an excellent example of how a refined, minimalist editorial design can effectively present cultural and architectural content."
version: alpha

colors:
  background: "#F7F4EF"
  primary: "#1E1E1E"
  neutral: "#808080"
  line: "rgba(0,0,0,0.2)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 67px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-3.35px"
  body:
    fontFamily: grotesque-sans
    fontSize: 18px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.36px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "-0.24px"

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

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A serene, editorial presentation for a historic architectural landmark.

*A mid-century architectural monograph brought to the web.*

## Colors

High-contrast, near-monochromatic palette with a warm off-white background and near-black ink.

- **Background (`#F7F4EF`)** — uses `bg` token
- **Primary text (`#1E1E1E`)** — uses `ink` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.2)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

## Layout

A wide, grid-based layout with large typographic elements and significant white space.

*Rhythm:* Vertical rhythm is maintained through consistent line-heights and vertical margins between text blocks.

## Elevation & Depth

- Borders: Thin solid lines are used to separate content blocks and underlines for links and navigation elements.

## Shapes

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

## Components

- **button:** Text-based links without visible backgrounds or borders.
- **card:** Content blocks separated by thin horizontal lines.
- **chip:** None
- **input:** None
- **hero:** Large, impactful typographic header with a clear horizontal rule.

## Do's and Don'ts

**Don't:**
- Don't use rounded corners — the screenshot shows a strictly rectilinear, sharp-edged layout.
- Don't use drop shadows — the screenshot shows flat, 2D elements with no depth effects.
- Don't use a primary accent color — the screenshot shows a monochromatic palette with no single dominant hue.
- Don't use centered layouts — the screenshot shows left-aligned text and elements.
- Don't use dense, multi-column text — the screenshot shows wide margins and clear separation between blocks.
- Don't use decorative borders — the screenshot shows only simple, functional horizontal rules.

---

## System Prompt (paste into AI agent)

```
This design represents a refined, editorial approach for a cultural heritage site. It uses a near-monochromatic palette with a warm off-white background (#F7F4EF) and near-black ink (#1E1E1E) for high contrast. The typography is a single grotesque-sans category across all scales, featuring a very large, tightly-tracked display size. Critical donts: avoid using any bright accent colors, rounded corners, or drop shadows. Keep layouts strictly left-aligned and use generous white space to maintain the site's serene and focused character.
```