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

# 12th Berlin Biennale for Contemporary Art · Design System

> Electric blue grounds an experimental editorial canvas

**Theme:** light · **Industry:** entertainment · **Source:** https://12.berlinbiennale.de/ · **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._

A vivid periwinkle canvas and oversized black geometric form frame the Biennale identity, dates, and visitor information. Editorial serif details, compact utility controls, and expansive pauses make the page feel like an exhibition poster expanded into a website.

## North star

Treat the vivid blue-violet canvas as the main visual surface, using black graphic mass and crisp white information panels to create an editorial poster-like page.

## Overview

The page is built on a nearly uninterrupted #7373ff blue-violet canvas, with black typography and a monumental black abstract shape creating a high-contrast poster composition. White information panels and pill-like utility strips interrupt the field without changing its overall color dominance; pale gray appears only in small labels and secondary controls. A restrained type pairing gives the layout its editorial character: a modern sans carries practical text and much of the display work, while a literary serif lends contrast to navigation and selected headings. The hero uses oversized, staggered lettering and date blocks rather than a conventional centered title. Farther down, visitor information, program entries, and venue listings form compact white cards against broad blue expanses. A map is the main detailed image, treated in the same blue family. Generous separation between content clusters lets the vivid canvas remain an active part of the design.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Electric Periwinkle | `#7373ff` | `--color-electric-periwinkle` | brand | Dominant page canvas and accent for identity lettering, highlighted program links, and graphic emphasis. |
| Poster Ink | `#000000` | `--color-poster-ink` | neutral | Primary text, navigation, and the oversized abstract black form anchoring the hero. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Visitor-information panels, ticket controls, search field, and card backgrounds. |
| Soft Label Gray | `#f2f2f2` | `--color-soft-label-gray` | semantic | Small informational chips and secondary link or badge backgrounds. |

### Semantic aliases

`--color-canvas` → `#7373ff` (Electric Periwinkle) · `--color-surface` → `#ffffff` (Paper White) · `--color-text` → `#000000` (Poster Ink) · `--color-accent` → `#7373ff` (Electric Periwinkle)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#7373ff` | 5.63:1 | AA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#7373ff` | `#ffffff` | 3.73:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABCMonumentGroteskWeb | `--font-body` | webfont | 400, 700 | Primary sans for body copy, links, buttons, and prominent display lettering. | DM Sans |
| BradfordLLSub | `--font-display` | webfont | 400 | Editorial serif for navigation and selected section headings or supporting display text. | Cormorant Garamond |

- **ABCMonumentGroteskWeb:** Use regular and bold weights; keep tracking subtly tight and casing mostly natural.
- **BradfordLLSub:** Regular weight adds literary contrast; use natural casing and restrained, slightly tight tracking.

### Type scale — Minor Third (ratio ≈ 1.219, base 14.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 700 | normal | 0 | — | ABCMonumentGroteskWeb | Bold sans title and primary Biennale identity. |
| h2 | 30px | 400 | 1.15 | -0.01em | — | BradfordLLSub | Serif editorial headings for prominent information sections. |
| h3 | 25.5px | 400 | 1.15 | -0.01em | — | ABCMonumentGroteskWeb | Sans subheadings for program and content entries. |
| h4 | 23px | 400 | 1.15 | -0.01em | — | BradfordLLSub | Serif secondary headings and supporting labels. |
| body | 14.5px | 400 | 1.03 | -0.004em | — | ABCMonumentGroteskWeb | Compact sans paragraphs in visitor and about panels. |
| caption | 12px | 400 | 1.15 | 0 | — | ABCMonumentGroteskWeb | Small supporting labels, metadata, and card annotations. |
| button | 22px | 400 | 1.02 | -0.004em | — | ABCMonumentGroteskWeb | Large sans labels for ticket and utility actions. |
| nav | 23px | 400 | 1.03 | -0.01em | — | BradfordLLSub | Large serif navigation links in the expanded menu. |
| link | 14.5px | 400 | 1.03 | -0.004em | — | ABCMonumentGroteskWeb | Compact sans links, venue actions, and program highlights. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 17, 18, 22, 24 px.
- Section rhythm 235px · element gap — · card padding 15px · max content width —.

An asymmetric, poster-like composition replaces a conventional centered page grid. The hero places a large black silhouette across the left and middle, while title and date typography occupy the open blue area on the right. A floating menu sits in the upper-left. Below, compact content cards align in offset clusters; the venue list meets a broad map panel. Section content remains sparse relative to the canvas, with especially long blank intervals before the footer. Avoid imposing an invented max-width or rigid column system.

## Shape & elevation

- Radius: button `5px` · input `7px` · badge `3px` · nav `3px` · link `3px` · xs `3px` · sm `5px` · md `7px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.45, 0, 0.55, 1)` on interactive elements.

The interface is predominantly flat, with no measured shadow system or decorative border treatment. Contrast comes from overlapping black and blue shapes and white panels placed directly on the canvas. Cards are simple rectangular surfaces; controls use modest rounding, while selected menu and utility elements layer above the page as floating blocks.

## Imagery

The hero’s defining image is an abstract, solid-black geometric mass rather than photography. A blue-toned city map provides the main informational visual, with labeled venue markers. The rest of the page relies on typography, white cards, and colored space; avoid adding generic stock photos or decorative illustration that would compete with the poster composition.

## Components

### Floating menu

A compact black overlay in the upper-left groups utility tabs, a white list of primary destinations, search, and language controls.

### Hero identity

A large black abstract shape supports the Biennale name and numbered marks in blue, balanced by oversized date and theme lettering.

### Visitor links strip

A horizontal white pill-like bar presents practical destinations such as tickets, opening hours, access, and guidebook.

### About panel

A white rectangular information card pairs a small section label with serif-led descriptive copy and a learn-more action.

### Program cards

Compact white and dark-blue event panels combine date, time, title, venue, and small pale category badges.

### Venue map

A white venue list sits beside a detailed blue city map with distinct lettered location markers.

### Footer links

A sparse two-column footer uses small utility links and institutional credits against the blue canvas.

### Measured component styles

- **Primary button** (“Tickets”): background #ffffff · text #000000 · radius 5px · padding 6.6px 11px 4.4px 11px · 400 22.0645px ABCMonumentGroteskWeb
- **Secondary button** (“Guide”): background #000000 · text #7373ff · radius 44.129px · padding 6.6px 22.1px 5.5px 22.1px · 400 22.0645px ABCMonumentGroteskWeb
- **Link** (“Info”): background #f2f2f2 · text #000000 · radius 3px · padding 4.3px 5px 2.9px 5px · 400 14.3419px ABCMonumentGroteskWeb
- **Input**: background #ffffff · text #000000 · border 1px solid · radius 6.90968px · padding 7.9px 35.5px 6.9px 9.9px · 400 19.7419px BradfordLLSub
- **Card** (“About Every two years, the Berlin Bienna”): background #ffffff · text #000000 · radius 0px · padding 12px 18px · 400 16px ABCMonumentGroteskWeb
- **Badge** (“Guided Tour”): background #f2f2f2 · text #000000 · radius 3px · padding 4.3px 5px 2.9px 5px · 400 14.3419px ABCMonumentGroteskWeb
- **Navigation item** (“About”): transparent background · text #000000 · radius 0px · padding 2.3px 0px · 400 23.2258px BradfordLLSub

## Do

- Use #7373ff as the dominant page canvas.
- Build the hero around a bold black graphic silhouette.
- Keep the title and date blocks offset and asymmetric.
- Use white panels for practical, information-dense content.
- Pair the modern sans with selective editorial serif accents.
- Preserve broad empty blue intervals between content clusters.

## Don't

- Do not turn the page into a conventional centered landing-page template.
- Do not add gradients, shadows, or ornamental borders.
- Do not introduce extra colors outside the measured palette.
- Do not fill the large blue spaces with decorative content.
- Do not use stock photography as a substitute for the abstract hero.
- Do not make every heading use the same typeface or scale.

## Agent prompt

Build a new contemporary-art event page using the measured Biennale visual language. Keep Electric Periwinkle (#7373ff) as the dominant canvas, with Poster Ink (#000000) for typography and a bold abstract hero shape. Use Paper White (#ffffff) for information cards and utility controls; reserve Soft Label Gray (#f2f2f2) for small chips. Compose the hero asymmetrically, with oversized identity and date typography rather than a centered headline. Use a clean grotesque sans for practical text and an editorial serif for selected navigation or headings. Arrange visitor links, event cards, and venue details in offset clusters, leaving large areas of open canvas between them. Keep surfaces flat, use only modest control rounding, and avoid shadows, gradients, stock imagery, or invented palette colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport blue field with an oversized black abstract shape, staggered title, and date typography. | brand introduction, event date display | periwinkle canvas, black graphic mass, oversized typography |
| 2 | other | Offset white visitor-information strip and about card set against the continuous blue canvas. | visitor information, learn more | white pill navigation, rectangular information card, serif editorial copy |
| 3 | content-feed | Centered section heading above compact event cards, arranged in a loose multi-column cluster. | event discovery, date and time scanning | white event card, dark-blue event panel, small category badges |
| 4 | feature-split | Venue listings and a large adjacent city map form an uneven two-part composition. | venue browsing, location discovery | stacked venue list, blue map graphic, lettered map markers |
| 5 | other | Large uninterrupted canvas area with no visible content components. | visual pause | solid blue field, open negative space |
| 6 | footer | Sparse two-column utility links and institutional credits on the blue background. | contact access, legal navigation | small text links, institutional credit marks |

## Source CSS custom properties (selected)

```css
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
--color--white: #fff;
--color--black: #000;
--color--grey-light-1: rgba(218, 218, 218, 1);
--color--grey-light-2: rgba(231, 231, 231, 1);
--color--grey-light-3: rgba(242, 242, 242, 1);
--color--text: #000;
--color--black--dimmed: rgba(0, 0, 0, 0.7);
--color--black--dimmed--2: rgba(0, 0, 0, 0.3);
--color--black--dimmed--3: rgba(0, 0, 0, 0.125);
--color--white--dimmed: rgba(255, 255, 255, 0.7);
--color--grey-light-1--dimmed: rgba(218, 218, 218, 0.7);
--color--grey-light-2--dimmed: rgba(231, 231, 231, 0.7);
```

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