---
title: "V–A–C design system"
variant: extended
source: https://v-a-c.org/en
captured_at: 2026-10-12
theme: light
industry: nonprofit
generator: Design DNA (https://four.wiralomi.com/style/v-a-c-org-en)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# V–A–C · Design System

> Culture presented as an open, image-led index

**Theme:** light · **Industry:** nonprofit · **Source:** https://v-a-c.org/en · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

V–A–C’s homepage presents exhibitions, screenings, and public programmes as a spacious, continuously browsable editorial feed. A strict black-and-white interface gives the varied event imagery and oversized, architectural navigation the visual emphasis.

## North star

Keep the interface monochrome and let oversized editorial typography, open space, and event imagery carry the page.

## Overview

The page uses a white canvas and black typography as its entire measured interface palette, making the work feel closer to a gallery index than a conventional promotional homepage. Colour comes chiefly from the event photographs and video thumbnails, not from decorative UI accents. Oversized Diagramatika Display text gives navigation and event titles a distinctive, compressed editorial presence; Diagramatika Text handles smaller metadata and utility copy. A single, three-column feed places short event labels above images and titles below, while large open gaps separate rows and preserve a calm viewing rhythm. The opening navigation stretches across the top and turns the V–A–C identity into a thin horizontal diagram, with Search and About-related links integrated at the edges. Images vary in subject and palette but share a straightforward rectangular presentation. The overall strategy is to keep the interface nearly invisible so cultural programming remains the content.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Canvas across the page; keeps the event index open and gallery-like. |
| Editorial Ink | `#000000` | `--color-editorial-ink` | brand | Navigation, headings, event metadata, links, and other interface text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Editorial Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Diagramatika Display | `--font-display` | webfont | 400 | Oversized navigation labels, event titles, and prominent utility actions. | Space Grotesk |
| Diagramatika Text | `--font-body` | webfont | 400 | Event metadata, smaller links, and compact utility labels. | DM Sans |

- **Diagramatika Display:** Regular weight; use large, tightly led display text with natural case and no added tracking.
- **Diagramatika Text:** Regular weight; retain clear, unembellished sentence case for supporting text.

### Type scale — Minor Third (ratio ≈ 1.205, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 35px | 400 | 0.88 | 0 | — | Diagramatika Display | Primary page-level display heading or prominent navigation text. |
| h2 | 34px | 400 | 0.9 | 0 | — | Diagramatika Display | Secondary display headings and large editorial labels. |
| h3 | 24px | 400 | 1.15 | 0 | — | Diagramatika Display | Event titles and smaller section headings. |
| body | 20px | 400 | 1.1 | 0 | — | Diagramatika Text | Supporting descriptions and general editorial copy. |
| button | 20px | 400 | 1.15 | 0 | capitalize | Diagramatika Text | Utility actions such as language selection and loading more entries. |
| nav | 35px | 400 | 0.88 | 0 | — | Diagramatika Display | Oversized navigation labels, including Search and About. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 5, 10, 20, 35, 40, 150 px.
- Section rhythm 150px · element gap 20px · card padding — · max content width —.

A single-page, three-column event feed sits beneath a sparse top navigation. At the 1440px viewport, columns span most of the page width, with narrow gutters and a reserved right edge for vertical navigation and utility links. Align card labels and titles to the left. The first row begins close to the header, then substantial vertical gaps distinguish later rows. Maintain the observed spacious rhythm without imposing an invented maximum width; on narrower screens, adapt the columns while preserving legible titles and image order.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease` on interactive elements.

Keep the interface flat: the measured palette contains no border colour, shadows, or gradients. Separate cards through white space and image placement, not containers or raised surfaces. The thin navigation rules and connectors act as graphic structure rather than card outlines; avoid decorative layering.

## Imagery

Use rectangular event photography and video stills as the main source of colour and subject variety. Images include artworks, venues, performances, and film scenes; keep them documentary and unoverlaid rather than applying a shared brand tint. Preserve their natural aspect and let each card’s image sit between its event label and title.

## Components

### Diagrammatic header

A thin horizontal navigation line anchors the page; V–A–C letterforms, GES–2, Search, and vertical About-related links sit along its edges.

### Event feed card

A compact event label precedes a rectangular image, followed by a large, left-aligned title in Diagramatika Display.

### Event metadata

Small black text identifies event type and date above each image, using Diagramatika Text.

### Language switcher

A minimal Ru/En utility sits at the page edge without a filled button or bordered container.

### Load more

A plain text action appears centered beneath the final visible feed entry, with no button fill or shadow.

### Measured component styles

- **Primary button** (“Ru”): transparent background · text #ffffff · radius 0px · padding 0px · 400 20px Diagramatika Text · capitalize
- **Link** (“ Installation Alexandra Sukhareva. Begi”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Diagramatika Text
- **Navigation item** (“V A C”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Diagramatika Text

## Do

- Use white as the uninterrupted page canvas.
- Set interface text in black.
- Use oversized display type for navigation and event titles.
- Place event labels above images and titles below.
- Let documentary imagery supply the colour.
- Use generous vertical gaps between feed rows.

## Don't

- Do not add accent colours to interface controls.
- Do not place cards in boxed or shadowed containers.
- Do not apply a uniform tint to event photography.
- Do not center-align the event feed.
- Do not crowd the page with extra explanatory copy.
- Do not make navigation look like conventional pill buttons.

## Agent prompt

Build a new V–A–C-style cultural programme page with a #ffffff Gallery White canvas and #000000 Editorial Ink interface text. Keep the interface flat and restrained; do not add gradients, shadows, or decorative card fills. Use Diagramatika Display, or a close free alternative such as Space Grotesk, for oversized navigation and event titles. Use Diagramatika Text or DM Sans for compact event metadata and utility links. Organize events as a left-aligned, three-column editorial feed with each event label above a rectangular documentary image and its title below. Use images as the main source of colour. Create a sparse, diagrammatic header with a horizontal rule, letter-based identity, and edge-aligned navigation. Preserve generous row spacing and adapt the feed responsively without losing its editorial character.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Single-page, three-column event feed beneath diagrammatic top navigation, with generous vertical gaps and a utility rail at the right edge. | Browse event listings, Open event links, Load more entries | Three-column image feed, Metadata above image, Large title below image, Vertical edge navigation |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/v-a-c-org-en