---
name: V A C
description: "This site is a prime example of a modern digital catalog design, balancing bold typography with extreme restraint."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#999999"
  bg-quiet: "#F1F1F1"
  line: "rgba(0, 0, 0, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 34px
    lineHeight: 0.9
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.15
    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: 48px

---

## Overview

A minimalist digital catalog for a cultural institution's projects and events.

*A digital exhibition catalogue*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 1)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Generous vertical whitespace between content blocks creates a rhythmic, editorial flow.

## Elevation & Depth

- Borders: Thin 1px solid black lines used structurally for the top navigation and sometimes for dividers.

## Shapes

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

## Components

- **button:** Plain text links with a diagonal arrow icon as the primary interactive element
- **card:** Media-heavy event cards with a timestamp above, media in the middle, and title below
- **hero:** A stark, typographic hero section featuring the institution's name broken across the layout.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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