# Sreda V A C · Design system migration spec

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

> Worth including for its unique 'editorial diagram' approach, blending traditional publishing content with experimental, non-linear layout structures.

## 1. Identity DNA

Sreda operates as a curated exhibition catalog for the digital age, where each page turn is a hyperlink and each artwork is a node in a flowing diagram. The system treats cultural content not as a feed, but as an interconnected web of ideas, demanding a visual language that is both structured and ephemeral.

**One-liner:** A time-sensitive online magazine offering a curated view on culture and contemporaneity through essays, art, and podcasts.
**Keywords:** Cultural · Nuanced · Ephemeral · Multimedia · Curatorial
**Analogy:** A curated exhibition catalog for the digital age.

## 2. Color

The color system is a strict monochrome base of black and white, creating a stark canvas where imagery provides the only chromatic contrast. This approach ensures the focus remains on the cultural artifacts themselves, not the interface that frames them.

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

**Color principle:** Strict monochrome base with sharp graphic lines; imagery provides the only color.

The principle is one of restraint: the interface is a neutral frame, allowing the curated content to provide all necessary visual weight and color.

## 3. Typography

Typographic voice is articulated through geometric sans-serif categories, used for both commanding display headlines and clean body text. The large scales and tight line heights create a bold, graphic presence that feels more like typeset print than a typical webpage.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -1px | Main headings and title |
| h2 | 48px | 1.0 | 400 | -1px | Secondary headings |
| body | 16px | 1.65 | 400 | normal | Body text and descriptions |

## 4. Spacing

The rhythm is established through generous whitespace and distinct, deliberate separation between structural elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace with distinct separation between structural elements.

## 5. Surfaces

Surfaces are rendered with complete flatness, rejecting shadows and depth effects in favor of absolute simplicity. The only structural definition comes from thin 1px black borders used for lines and dividers, which act as the architectural skeleton of the layout.

- **Radius:** sm 10px · md 10px · lg 10px · pill 999px
- **Borders:** Thin 1px black borders used structurally for lines and dividers.

## 6. Layout

The layout skeleton is a free-flowing diagrammatic structure, where content is presented as connected nodes rather than discrete cards. Solid and dotted lines create explicit visual relationships between elements, forming a non-linear, 'fig. 1' style map of information.

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

**Skeleton:** Free-flowing diagrammatic layout using solid and dotted lines to connect elements.

## 7. Motion & Interaction

Motion is subtle and purely functional, governed by a philosophy of clarity over decoration. It is limited to fast, smooth 0.3s transitions for color, opacity, and visibility changes on interactive elements, providing immediate but unobtrusive feedback.

- **Durations:** micro 200ms · small 300ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Hover transitions on interactive elements

- **Hover:** Color and opacity changes on clickable elements.
- **Click:** Standard navigation triggers.
- **Transition:** Smooth 0.3s transitions for color, opacity, and visibility.
- **Keyboard:** Standard focus navigation.

## 8. Voice & Don'ts

The editorial voice is articulate, cultural, and slightly formal, matching the diagrammatic precision of the visual system. It avoids generic marketing language and cluttered interfaces, opting instead for descriptive, directional calls to action often accompanied by arrows.

- **Tone:** Articulate, cultural, and slightly formal.
- **Headline style:** Large, bold, and diagrammatic.
- **CTA style:** Descriptive and directional, often accompanied by arrows.
- **Avoid:** Generic marketing language / Cluttered interfaces / Overly playful or bubbly UI elements

### Don'ts
- ❌ Don't use colorful backgrounds for containers — screenshot shows plain white (#FFFFFF) for the primary background.
- ❌ Don't use drop shadows or depth effects — screenshot shows completely flat surfaces.
- ❌ Don't use serif fonts for main titles — screenshot shows a geometric sans-serif for the word 'Sreda'.
- ❌ Don't use traditional card-based layouts — screenshot shows elements connected by lines in a diagrammatic style.
- ❌ Don't use colored accent buttons — screenshot shows plain text links with arrows as primary CTAs.
- ❌ Don't use complex image galleries — screenshot shows a single, large, full-width illustrative artwork.

The system deliberately avoids colored backgrounds, drop shadows, traditional card layouts, serif headings, and playful UI elements, maintaining its identity as a rigorous editorial diagram.

## System Prompt (paste into AI tool)

```
Sreda is a cultural online magazine with a minimalist, diagrammatic, and editorial design. The layout relies heavily on a stark monochrome palette of black (#000000) and white (#FFFFFF), with a muted gray (#999999) used for secondary elements. Typography features geometric sans-serif categories for both display and body text, rendered in large scales (up to 80px) with tight line heights. The layout is characterized by the use of solid and dotted lines connecting text and images, creating a 'fig. 1' diagrammatic feel. Critical donts: Do not introduce colored background fills for sections; maintain the stark white canvas. Do not use traditional UI components like shadowed cards or rounded buttons; use text links and lines instead. Do not use serif typography for headings; the design is strictly sans-serif.
```