# V A C · Design system migration spec

> Source: https://v-a-c.org/en  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a modern digital catalog design, balancing bold typography with extreme restraint.

## 1. Identity DNA

V A C operates like a digital exhibition catalogue—where every element is curated with the precision of a gallery wall. The system translates the physical institution's editorial rigor into a digital framework built on monochromatic clarity and typographic confidence.

**One-liner:** A minimalist digital catalog for a cultural institution's projects and events.
**Keywords:** cultural · editorial · minimalist · exhibition · gallery
**Analogy:** A digital exhibition catalogue

## 2. Color

Color is used as a tool for structure, not decoration. The palette is strictly monochromatic, with black and white as primary actors and gray serving only as a neutral field for secondary content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F1F1F1` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(0, 0, 0, 1)` | divider |

**Color principle:** Monochromatic with strict use of black and white, using gray only for secondary elements or placeholders.

The principle is absolute restraint: color communicates hierarchy through contrast alone, never through hue.

## 3. Typography

Typography carries the full weight of the system's voice. A single weight of 400 is used throughout, creating a uniform, authorial tone where titles are defined by scale and occasional italics, not by typographic heft.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 34px | 0.9 | 400 | -0.5px | Headlines and main titles |
| body | 20px | 1.1 | 400 | 0px | Navigation links and secondary text |
| small | 16px | 1.15 | 400 | 0px | Metadata and timestamps |

**Type rules:**
- Titles use a mix of regular weight and italicized secondary text
- Line heights are tight for headlines to create compact blocks
- All typography uses a weight of 400

## 4. Spacing

Rhythm is established through generous, deliberate vertical whitespace between content blocks, creating an editorial pace that guides the reader through the catalogue.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical whitespace between content blocks creates a rhythmic, editorial flow.

## 5. Surfaces

Surfaces are flat and unadorned. The only structural device is a thin 1px solid black line, used sparingly for the top navigation and occasional dividers to define zones without adding visual weight.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Thin 1px solid black lines used structurally for the top navigation and sometimes for dividers.

## 6. Layout

The layout skeleton is an asymmetric grid, where content blocks are placed dynamically with varying vertical positions. This creates a sense of curated placement, akin to objects on a gallery wall, rather than a rigid, predictable grid.

- **Container max:** 1440px
- **Paragraph max:** 600px
- **Grid:** 3 columns, gutter 20px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric grid layout where items are placed dynamically with varying vertical positions.

## 7. Motion & Interaction

Motion is minimal and functional, limited to smooth 0.2s to 0.25s transitions. Interaction is communicated through subtle opacity or color shifts on hover, avoiding any animation that would disrupt the static, catalogue-like feel.

- **Durations:** micro 200ms · small 250ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0.0, 0.2, 1)`
- **Patterns:**
  - Smooth color transitions on hover
  - Opacity fades for interactive elements

- **Hover:** Text color or opacity changes slightly on hover to indicate interactivity
- **Click:** Direct navigation to the event or project detail page
- **Transition:** Smooth 0.2s to 0.25s transitions on hover states
- **Keyboard:** Standard tab navigation with focus states

## 8. Voice & Don'ts

The editorial voice is authoritative, concise, and institutional. Headlines are short and descriptive, often paired with italicized subtitles or dates, while calls to action are subtle text links without prominent styling.

- **Tone:** Authoritative, concise, and institutional
- **Headline style:** Short, descriptive titles often accompanied by italicized subtitles or dates
- **CTA style:** Subtle text-based links without prominent button styling
- **Avoid:** Overly promotional language / Excessive use of emojis or decorative elements / Complex UI patterns that distract from the content

### Don'ts
- ❌ don't use drop shadows — the screenshot shows completely flat design without any depth effects
- ❌ don't use rounded corners on containers — the screenshot shows sharp, rectangular elements
- ❌ don't add vibrant accent colors — the screenshot shows strictly monochromatic design
- ❌ don't use multiple font weights — the screenshot shows uniform weight 400 throughout
- ❌ don't use heavy borders for cards — the screenshot shows borderless content blocks
- ❌ don't center align text in columns — the screenshot shows left-aligned typography

The system deliberately avoids drop shadows, rounded corners, vibrant accents, and multiple font weights, refusing any element that would compromise its clean, exhibition-ready aesthetic.

## System Prompt (paste into AI tool)

```
A minimalist, editorial design system for a cultural institution's digital catalog. Uses a strict monochromatic palette (black #000000 on white #FFFFFF) with geometric and humanist sans-serif typography at a uniform 400 weight. The layout is asymmetric and grid-based, relying on generous whitespace and thin 1px lines for structure. Key interactions involve subtle opacity and color transitions. Critical donts: avoid drop shadows, rounded corners, vibrant colors, multiple font weights, heavy borders, and centered text.
```
