# Neutra Vdl · Design system migration spec

> Source: https://neutra-vdl.org  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of how a refined, minimalist editorial design can effectively present cultural and architectural content.

## 1. Identity DNA

The system is structured like a mid-century architectural monograph, where clarity and restraint frame the content rather than distract from it. Every component serves a documentary purpose, presenting cultural and architectural information with the quiet authority of a well-considered exhibition.

**One-liner:** A serene, editorial presentation for a historic architectural landmark.
**Keywords:** cultural · historic · architectural · minimal · refined
**Analogy:** A mid-century architectural monograph brought to the web.

## 2. Color

The palette is deliberately reduced to a near-monochromatic relationship between warm off-white and deep ink, creating high contrast without chromatic tension. This binary scheme allows the content's own visual material—photographs, drawings, artifacts—to provide all necessary color.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F7F4EF` | main background |
| `--ink` | `#1E1E1E` | body text |
| `--muted` | `#808080` | placeholder |
| `--line` | `rgba(0,0,0,0.2)` | divider |

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

The principle is functional contrast: every color choice exists to improve legibility or establish hierarchy, never to add decorative warmth.

## 3. Typography

A single grotesque-sans category is deployed across all scales, from the very large, tightly-tracked display headings to the smallest metadata. The typographic voice is architectural: measured, authoritative, and concerned with proportion rather than personality.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 67px | 1.0 | 400 | -3.35px | Main page titles and large headings |
| body | 18px | 1.2 | 400 | -0.36px | Body text and paragraphs |
| caption | 12px | 1.15 | 400 | -0.24px | Metadata and small labels |

## 4. Spacing

Vertical rhythm is maintained through consistent line-heights and deliberate margins between text blocks, creating a steady visual cadence down the page.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical rhythm is maintained through consistent line-heights and vertical margins between text blocks.

## 5. Surfaces

Depth is implied through proximity and separation rather than simulated through effects. Surfaces are defined by their content and bounded by thin, solid rules that act as clear architectural lines.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Thin solid lines are used to separate content blocks and underlines for links and navigation elements.

## 6. Layout

The skeleton is a wide, grid-based layout with generous margins and significant white space. Large typographic elements anchor the composition, with left-aligned text maintaining a strong vertical axis.

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

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

## 7. Motion & Interaction

Motion is strictly functional, limited to fade and opacity transitions that soften state changes without drawing attention to themselves. The philosophy is one of calm continuity, where interface changes feel like quiet page turns rather than performances.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Fade in
  - Opacity change

- **Hover:** Subtle opacity or color change on interactive text elements.
- **Click:** Standard pointer cursor for all clickable elements.
- **Transition:** All elements have a default transition for smooth state changes.
- **Keyboard:** Standard focus management for interactive elements.

## 8. Voice & Don'ts

The editorial voice is educational, refined, and professional, with direct, factual headlines set in large, tightly-tracked type. Calls to action are understated text links that dissolve into the layout's reading flow.

- **Tone:** Educational, refined, and professional.
- **Headline style:** Direct and factual, using large, tightly-tracked typography.
- **CTA style:** Understated text links that integrate seamlessly into the layout.
- **Avoid:** Playful language / Bright colors / Decorative elements

### Don'ts
- ❌ 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.

The system deliberately omits rounded corners, drop shadows, accent colors, and centered layouts to preserve its rectilinear, monochromatic, and serene architectural character.

## System Prompt (paste into AI tool)

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