Iris Violet
#7373ffViolet accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color
12th Berlin Biennale for Contemporary Art
12.berlinbiennale.de
Website preview
The design language
The 12th Berlin Biennale reads as an iris-and-ink broadsheet: white paper canvas, monumental black geometric forms, and a single saturated violet (#7373ff) that functions as sky, border, and accent simultaneously. The system is editorial and constructivist — overlapping rectangular shapes at display scale carry the brand, while a geometric grotesque (ABCMonumentGrotesk) pairs with a transitional serif (BradfordLL) to create a high-contrast, catalog-like rhythm. Interactions are tight and rectilinear: 3px corners, 4px base spacing, hairline black or violet borders, and almost no shadow or gradient — visual weight comes from type size and color, not elevation. The page is text- and information-dense rather than spacious, with compact nav, overlapping panels, and event cards stacked close together like a biennale program leaflet.
Color palette
brand
accent
Deep Iris
#23234dDecorative SVG fill for large geometric shapes and map elements — a darker register of the brand violet used for tonal depth inside illustrations, not for UI
neutral
Obsidian
#000000Primary text, hairline borders on neutral actions and nav dividers, and the fill for the monumental hero shapes that overlap the headline
Paper White
#ffffffPage canvas, card surfaces, button text, and input backgrounds. The base layer everything else sits on
Ash Gray
#f2f2f2Subtle surface fill for link backgrounds, list rows, and secondary button states — a quiet wash that distinguishes hover/focus from pure white without introducing chroma
Mist Gray
#e7e7e7Nav panel background and low-emphasis surface tone — sits one step below Ash Gray for the overlapping side panel
Typography
Type scale
Minor Second (1.067) · 16px basedisplay
32px · 700 · 33 · -0.32px trackingThe quick brown fox jumps
text-30
30px · 400 · 1.15The quick brown fox jumps
heading-lg
29px · 400 · 30The quick brown fox jumps
heading
25px · 400 · 26The quick brown fox jumps
text-23
23px · 400 · 1.03The quick brown fox jumps
heading-sm
22px · 400 · 23The quick brown fox jumps
text-20
20px · 400 · 1.2The quick brown fox jumps
subheading
19px · 400 · 23The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
ABCMonumentGrotesk
- Weights
- 400, 700
- Sizes
- 12, 14, 16, 17, 19, 20, 22, 25, 29, 32px
- Line height
- 1.02–1.20 for headings, 2.00–2.40 for nav and list rows
- Letter spacing
- -0.01em at display sizes, -0.004em at body, 0.01em for uppercase UI labels
- Fallback
- Inter, Space Grotesk, or Neue Haas Grotesk
Primary grotesque used for nav, headings, event cards, buttons, and most UI labels. The geometric construction and tight tracking give the site its editorial, catalog-like authority. Weight 400 carries body and nav; 700 is reserved for section headings and emphasis. Line-heights collapse to near-1.0 at display sizes — the type sits as flat architectural mass on the page.
Additional typeface
BradfordLL
- Weights
- 400
- Sizes
- 20, 23, 30px
- Line height
- 1.03–1.15
- Letter spacing
- -0.01em
- Fallback
- Source Serif 4, Tiempos Text, or PT Serif
Transitional serif used for long-form body copy, about-section paragraphs, and venue descriptions. Pairs with the grotesque to create a printed-publication rhythm — grotesque for chrome and headlines, serif for reading. The contrast between angular sans and humanist serif is the system's typographic signature.
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1440px
- Section gap
- 32px
- Card padding
- 12px
- Element gap
- 5-12px
Border radius
tags
3pxcards
3-7pxinputs
7pxbuttons
3pxnavPills
44pxSpacing scale
1px2px3px4px5px6px7px8px9px10px11px12px15px17px18px21px22px24px32px36px38px48px60px64px233px316pxGuidelines
Do
- Use Iris Violet (#7373ff) for section backgrounds, outlined action borders, and heading accents — it is the only chromatic color and should appear at scale, not as a tiny dot.
- Pair ABCMonumentGrotesk for all UI, nav, and headlines with BradfordLL for long-form body copy — the grotesque/serif contrast is the system's typographic signature.
- Use 3px border-radius for buttons, tags, and links; 7px for inputs and cards; 44-64px for pill-shaped nav buttons only.
- Build visual hierarchy with type size and color contrast, never with box-shadow — the design is flat and printed, not elevated.
- Set body and nav text in ABCMonumentGrotesk with line-height 2.0-2.4 for generous row spacing in compact lists; collapse line-height to 1.02-1.15 at display sizes.
- Let large Obsidian (#000000) shapes overlap content sections as graphic architecture — flat rectangles, half-circles, and irregular polygons placed behind or beside display text.
- Use 1px Obsidian borders as the default divider and component outline; Iris Violet borders are reserved for the most important interactive elements.
Don’t
- Do not add box-shadow, blur, or drop-shadow effects to any component — the system is deliberately flat.
- Do not use gradient fills — the palette is entirely solid color.
- Do not introduce additional chromatic colors; the only saturated hue is Iris Violet.
- Do not use Filled violet buttons as primary CTAs — the system uses outlined violet actions and neutral outlined buttons, not filled chromatic buttons.
- Do not set body text in ABCMonumentGrotesk; serif (BradfordLL) is reserved for paragraphs to create the grotesque/serif rhythm.
- Do not use large corner radii (12px+) on standard buttons, tags, or cards — only pill-shaped nav elements get 44px+ radii.
- Do not place content on a colored background without considering the overlap behavior — sections are designed to layer, not sit in isolated containers.
Components
Overlapping Side Nav Panel
Primary site navigationDark Obsidian (#000000) panel that overlaps the left edge of the page when activated. Contains nav links in ABCMonumentGrotesk 16-17px, white text, with hairline 1px white dividers between groups. Secondary links (Visit, Contact, Press) sit in a white sub-bar at the top with black 1px borders. Language switcher and search field stack at the bottom. The panel is the most visually dominant UI element — it declares the system as editorial, not corporate.
Violet Outlined Action Button
Primary interactive actionTransparent fill with 1-2px Iris Violet (#7373ff) border, Iris Violet text, ABCMonumentGrotesk 14-16px weight 700. 3px corner radius, 5-7px vertical padding, 11-12px horizontal padding. Used for nav items, tag pills, and program links. The violet border IS the brand signal — there is no filled violet button variant in the system.
Neutral Outlined Button
Secondary actionWhite fill with 1px Obsidian border, black text, 3px radius, 3-6px vertical and 5-11px horizontal padding. ABCMonumentGrotesk 14-16px. Used for language switcher (EN/DE), utility links, and less prominent actions.
Pill Nav Button
Top-bar utility actions (Guide, Menu)White fill, 1px Obsidian border, 44px corner radius (fully rounded), ABCMonumentGrotesk 14px. The 'Guide' and 'Menu' buttons that anchor the top-left of every screen.
Search Input
Search fieldWhite fill, 1px Obsidian border, 7px corner radius, ABCMonumentGrotesk 16px placeholder. Magnifying-glass icon button in 16px to the right. 8-10px padding all sides.
Program Tag Pill
Event category filterWhite fill, 1px Obsidian border, 3px radius, ABCMonumentGrotesk 12-14px weight 700 uppercase. Compact 2-3px vertical padding, 11-12px horizontal. Tags like 'Performance', 'Guided Tour' that sit inside event cards.
Event Card
Program listing entryWhite surface, 1px Obsidian border, 3-7px radius, 12px padding. Date row in 12px uppercase, title in ABCMonumentGrotesk 19-25px, venue line in 12px. Some event cards have a dark Obsidian variant with white text and Iris Violet accents. Cards stack vertically and are information-dense rather than spacious.
Venue Card
Venue directory entryWhite surface, 1px Obsidian border, 7px radius, 12-16px padding. Letter label (A, B, C) at top, venue name in ABCMonumentGrotesk 19-25px, action links (Info, Program, Artists, Directions) as small outlined buttons below. Compact, directory-card feel.
Hero Date Block
Exhibition date displayIris Violet (#7373ff) full-bleed background section with large ABCMonumentGrotesk 29-32px text in Obsidian or white. Dates stack vertically with tight line-height. This is the brand's most identifiable surface — the violet sky over the event.
Overlapping Hero Type Block
Display headline containerMassive Obsidian (#000000) filled rectangles and half-circles that overlap the Iris Violet background, with ABCMonumentGrotesk 32px+ display text in Iris Violet sitting on top. The shapes ARE the layout — the '12' numeral and 'Berlin Biennale for Contemporary Art' title sit inside and beside these forms. This is the system's signature visual.
Language Switcher
Locale selectorCompact group of 3 outlined buttons (EN, DE, Easy Language), 3px radius, 1px Obsidian border, ABCMonumentGrotesk 12px. Sits at the bottom of the side nav panel.
Map Overlay
Venue mapIris Violet background with deep iris line work for streets. White diamond-shaped venue markers labeled A–F. No conventional map chrome — the map is treated as a brand-colored graphic, not a utility.
Info Card
About / descriptive text blockWhite surface, no border or shadow, ABCMonumentGrotesk 19px for the 'About' label and BradfordLL 20-30px for the paragraph text. The serif body is the strongest typographic contrast in the system and signals 'readable content' vs. navigational chrome.
Surfaces & elevation
Level 0
Paper White
#ffffffBase canvas and content card background
Level 1
Ash Gray
#f2f2f2Subtle wash for list rows, link hovers, and soft button states
Level 2
Mist Gray
#e7e7e7Overlapping side-panel surface, one step recessed from content
Level 3
Iris Violet
#7373ffSection-background canvas for date/title blocks and event overlays
Level 4
Obsidian
#000000Hero shape fills and full-bleed dark bands
The system deliberately avoids box-shadow elevation. Visual hierarchy is built through type scale, color contrast, overlapping flat shapes, and hairline 1px borders. Components feel printed rather than floating.
Layout & imagery
Layout
Full-bleed page with no fixed max-width containment; sections span edge to edge. The hero uses an Iris Violet background with massive overlapping Obsidian shapes carrying the '12' numeral and 'Berlin Biennale for Contemporary Art' display headline. Content sections alternate between white canvas and Iris Violet full-bleed bands. A dark side-nav panel overlaps the left edge from any position on the page. Below the hero, content flows as a compact, information-dense stack: program tags row, about paragraph, event cards in a grid (3 columns), venue cards, and a full-width venue map. Event cards alternate between white and Obsidian variants for rhythm. Spacing between sections is tight (32px) — the page reads as a single broadsheet, not as isolated screens.
Imagery
Imagery is minimal and graphic — the system itself is the visual. Large flat geometric shapes (rectangles, half-circles, polygons) in Obsidian and Iris Violet serve as the primary visual content, functioning as both layout structure and branding. Event cards and venue markers provide the only representational content. The map is stylized as a violet-tinted line drawing rather than a realistic map. No photography, no illustration, no 3D renders — the aesthetic is constructivist broadsheet, not image-heavy editorial.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #ffffff - border: #000000 (neutral) or #7373ff (interactive) - accent: #7373ff (Iris Violet) - surface wash: #f2f2f2 - primary action: #7373ff (outlined action border) **3-5 Example Component Prompts** 1. Create a hero section: Iris Violet (#7373ff) full-bleed background. Display headline 'Berlin Biennale for Contemporary Art' in ABCMonumentGrotesk 32px weight 400, letter-spacing -0.32px, color #000000. Overlay two Obsidian (#000000) filled rectangles behind the text — one tall narrow rectangle left-aligned containing a '12' numeral in ABCMonumentGrotesk 32px Iris Violet, and one half-circle on the right. No box-shadow, no gradient. 2. Create an outlined violet action button: 1px Iris Violet (#7373ff) border, transparent fill, text 'Tickets' in ABCMonumentGrotesk 14px weight 700, color #7373ff, 3px corner radius, 5px vertical padding, 11px horizontal padding. Group four such buttons in a horizontal row with 12px gap between them. 3. Create an event card: white surface, 1px #000000 border, 3px radius, 12px padding all sides. Top row: date '18.9. SUNDAY 4 pm' in ABCMonumentGrotesk 12px weight 700 uppercase, letter-spacing 0.12px. Title 'Guided Tour (English)' in ABCMonumentGrotesk 22px weight 400, color #000000. Venue line 'Hamburger Bahnhof — Museum für Gegenwart — Berlin · Guided Tour' in ABCMonumentGrotesk 12px, color #000000. No shadow. 4. Create a program tag pill: 1px #000000 border, white fill, text 'Performance' in ABCMonumentGrotesk 12px weight 700 uppercase, 3px radius, 3px vertical padding, 11px horizontal padding. Place two such tags side by side with 4px gap. 5. Create a venue map section: Iris Violet (#7373ff) full-bleed background. White diamond-shaped markers (14px, rotated 45°) labeled A through F in ABCMonumentGrotesk 14px weight 700. Street network rendered as 1px #23234d lines on the violet background. No map controls, no legend, no zoom — the map is decorative, not functional.
Similar brands
ICA (Institute of Contemporary Arts)
Same editorial broadsheet approach with high-contrast type, single accent color, and overlapping geometric hero blocks over flat color sections.
MCA Chicago
Museum site using Monument-Grotesk-family type, flat color blocks, and minimal border-radius on all components.
Manifesta
European biennale platform with constructivist layout — full-bleed violet/color sections, hairline borders, compact card grids, and display-scale numerals.
Serpentine Galleries
Contemporary art institution site that pairs a geometric grotesque for nav with serif for long-form text, and uses a single saturated brand color against black and white.
KW Institute for Contemporary Art
Berlin contemporary-art peer with flat-shape hero compositions, tight 4px-base spacing, and a design-forward rather than utility-first approach.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
