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

# V–A–C Sreda · Design System

> A quiet editorial map for culture and contemporaneity

**Theme:** light · **Industry:** media · **Source:** https://sreda.v-a-c.org/ · **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 Sreda opens with a stark, diagram-like editorial masthead that connects reading, watching, and listening. A large commissioned artwork introduces the magazine’s cultural content beneath the restrained black-and-white interface.

## North star

Treat the page as a clear editorial diagram: use black lines and type on white, then let the artwork supply the colour.

## Overview

The page is defined by a white canvas (#ffffff) and black typography and linework (#000000), with colour entering mainly through the commissioned artwork rather than through interface decoration. Diagramatika Display gives the masthead and section title their distinctive editorial presence; Diagramatika Text carries navigation and explanatory copy in a clear, rounded sans-serif voice. The opening composition behaves like a printed diagram stretched across the viewport: oversized V–A–C markers anchor a horizontal rule, dashed and dotted paths connect the Sreda title to three content modes, and compact explanatory text sits to the right. Generous open space keeps these fine lines and text legible. A broad artwork image begins below the diagram, adding an expressive blue field and human figures without changing the monochrome interface palette. The result is editorial rather than promotional: flat, high-contrast, typographic, and deliberately spacious.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and open space surrounding the masthead, diagram, text, and artwork. |
| Editorial Ink | `#000000` | `--color-editorial-ink` | neutral | Primary text, oversized masthead letters, headings, navigation, arrows, and diagram rules. |

### 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 Text | `--font-body` | webfont | 400 | Navigation, explanatory copy, and link labels. | Inter |
| Diagramatika Display | `--font-display` | webfont | 400 | Oversized V–A–C masthead, Sreda heading, and caption-style labels. | Manrope |

- **Diagramatika Text:** Regular weight; sentence case with straightforward, readable line setting.
- **Diagramatika Display:** Regular weight; large display lettering is mixed with small, restrained labels.

### Type scale — Custom (ratio ≈ 1.826, base 24px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | normal | 0 | — | Diagramatika Display | Oversized V–A–C letters form the top masthead. |
| h1 | 48px | 400 | normal | 0 | — | Diagramatika Display | The Sreda title anchors the central diagram. |
| body | 24px | 400 | 1.1 | 0 | — | Diagramatika Text | Introductory editorial description at the right. |
| caption | 16px | 400 | normal | 0 | — | Diagramatika Display | Small figure label and supporting content labels. |
| nav | 24px | 400 | normal | 0 | — | Diagramatika Text | Language switch and reading-mode navigation. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 12, 13, 16, 20, 48, 50, 89, 115 px.
- Section rhythm 48px · element gap 20px · card padding — · max content width 1400px.

A spacious, full-width composition places the diagrammatic masthead across the top, with the Sreda title and language switch aligned along a horizontal connector. Explanatory copy occupies the right side, while reading, watching, and listening links span the width below. The measured page maximum is 1400px; the screenshot shows generous open space and a four-column structure. A full-bleed-feeling artwork panel begins beneath the navigation diagram, establishing the next content layer.

## Shape & elevation

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

The interface is flat: no measured shadows, gradients, rounded cards, or elevated surfaces. Separate elements with white space and fine black rules, dashed connectors, and dotted paths. Keep the artwork visually distinct through its image content rather than a shadow or decorative frame.

## Imagery

The opening artwork is a large, landscape-oriented image, framed by a narrow white margin in the viewport. It contains a vivid blue sky, human figures, birds, and painterly texture. Treat imagery as commissioned editorial art: preserve its original character and allow its colour to contrast with the otherwise monochrome interface. The artwork is not a source for brand UI colours.

## Components

### Diagrammatic masthead

Oversized V, A, and C letters sit along a thin black horizontal rule, with a small figure label beneath the line.

### Language switch

Compact Ru / En text sits at the left of the Sreda title line.

### Sreda title node

Large display lettering overlaps a horizontal connector and acts as the central node of the diagram.

### Introductory copy

A paragraph set to the right of the title explains the magazine in black text on white.

### Content-mode navigation

Read, Watch, and Listen labels are linked by a dotted horizontal path, with small date captions and directional arrows.

### Featured artwork

A wide commissioned image begins below the navigation and supplies the opening section’s vivid colour.

### Measured component styles

- **Link** (“Read till 30 September”): transparent background · text #000000 · radius 0px · padding 0px 0px 0px 48px · 400 16px Diagramatika Text
- **Navigation item** (“V A C fig. 1 Ru / En Sreda Featuring spe”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Diagramatika Text

## Do

- Keep the interface palette to measured white and black.
- Use rules and dotted paths to connect editorial elements.
- Give the masthead and title a strong display scale.
- Set supporting copy in the text family.
- Preserve generous white space around the diagram.
- Let commissioned art provide the main colour.

## Don't

- Do not add unmeasured interface colours.
- Do not apply gradients, shadows, or rounded cards.
- Do not turn the diagram into conventional boxed navigation.
- Do not use bold or all-caps styling as a substitute for hierarchy.
- Do not crowd the introductory text or connectors.
- Do not treat artwork colours as interface palette tokens.

## Agent prompt

Build a new editorial page in the V–A–C Sreda style. Use Gallery White (#ffffff) as the uninterrupted canvas and Editorial Ink (#000000) for text, rules, arrows, and diagram connectors. Set display titles in Diagramatika Display or a close free alternative, and use Diagramatika Text for navigation and body copy. Organize the page as a spacious, full-width diagram: connect a prominent masthead and title with thin lines, then arrange a few clear content paths with dotted or dashed connectors. Keep interface elements flat, without shadows, gradients, or rounded cards. Use compact supporting labels and calm paragraph copy. Introduce a wide commissioned artwork as a distinct editorial image region; preserve its natural colour and texture rather than sampling it for UI accents. Maintain generous white space and a readable hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width diagrammatic masthead, central title and right-side introduction above a horizontal content-mode navigation and featured artwork. | Language switch, Read/watch/listen navigation, Directional cues | Oversized letter masthead, Thin rules and dotted paths, Large editorial artwork |

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