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

# IAD LAB 2025 · Design System

> A dark canvas for bold, oversized type.

**Theme:** dark · **Industry:** design · **Source:** https://iad-lab.ch/ · **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._

IAD LAB 2025 introduces a design event through an expansive charcoal canvas, oversized rounded display lettering, and restrained navigation. The page prioritizes typographic impact and generous negative space over imagery or conventional promotional panels.

## North star

Let oversized rounded typography and deliberate negative space carry the identity on a restrained charcoal canvas.

## Overview

The visual system is built around a near-black charcoal canvas, with a slightly darker section surface creating subtle shifts between long page bands. Bright off-white is reserved for the primary display wordmark and readable text; muted gray is used sparingly for navigation emphasis and small progress dots. The opening screen is deliberately sparse: an enormous, tightly framed rounded uppercase title anchors the top edge, while a compact stacked event identifier sits beneath it. 8000 Round Black gives display headings a distinctive inflated, friendly silhouette; Neue Haas Unica handles supporting copy and navigation with a clean, neutral voice. Content appears as small, left-aligned text groupings set within otherwise open space, with later program content arranged across columns. There is no meaningful photographic language: the identity comes from typography, contrast, and pacing. Keep surfaces flat and transitions quiet, allowing the long vertical rhythm and deliberate emptiness to feel intentional.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Charcoal Canvas | `#2a2b2d` | `--color-charcoal-canvas` | brand | Main page canvas and the dominant background behind the event title and content. |
| Soft Porcelain | `#f8f8f8` | `--color-soft-porcelain` | neutral | Primary display lettering, headings, and body text against the dark canvas. |
| Quiet Graphite | `#747576` | `--color-quiet-graphite` | accent | Muted navigation highlight and small section-progress indicators; keep it secondary. |
| Deep Section | `#222222` | `--color-deep-section` | surface | Subtle darker section surface, visible as a tonal band rather than a separate card. |

### Semantic aliases

`--color-canvas` → `#2a2b2d` (Charcoal Canvas) · `--color-surface` → `#222222` (Deep Section) · `--color-text` → `#f8f8f8` (Soft Porcelain)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f8f8f8` | `#2a2b2d` | 13.34:1 | AAA |
| `#f8f8f8` | `#222222` | 14.98:1 | AAA |

### Gradients

- `linear-gradient(0deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Haas Unica | `--font-body` | webfont | 400, 700 | Supporting event information, body copy, and navigation. | Inter |
| 8000 Round Black | `--font-display` | webfont | 400 | Oversized uppercase display title and prominent section headings. | Bowlby One SC |

- **Neue Haas Unica:** Use a neutral sans-serif voice, primarily regular for copy and bold for subheadings; preserve natural casing.
- **8000 Round Black:** Use rounded, heavy display forms; headings are uppercase where measured, without added tracking.

### Type scale — Golden Ratio (ratio ≈ 1.637, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 211.5px | 400 | 1.3 | 0 | uppercase | 8000 Round Black | Oversized uppercase event wordmark in the opening hero. |
| h1 | 115px | 400 | 1.08 | 0 | uppercase | 8000 Round Black | Large uppercase title for major event sections. |
| h2 | 44px | 400 | 1.08 | 0 | — | 8000 Round Black | Rounded display-style section heading, such as the program title. |
| h3 | 36px | 700 | 1.3 | 0 | — | Neue Haas Unica | Bold sans-serif subheadings within event information. |
| h4 | 27px | 700 | 1.3 | 0 | — | Neue Haas Unica | Smaller bold labels for program details. |
| body | 18px | 400 | 1.35 | 0 | — | Neue Haas Unica | Regular sans-serif event description and explanatory copy. |
| caption | 16px | 400 | 1.3 | 0 | — | Neue Haas Unica | Compact supporting details and small navigation text. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 3, 4, 5, 10, 15, 16, 20, 22, 24, 40 px.
- Section rhythm — · element gap 4px · card padding — · max content width —.

Use a long, vertically paced single-page composition with broad full-width canvas bands. The hero title begins flush near the top-left and spans most of the viewport width; place the event identifier directly below it. Supporting text sits in narrow, left-aligned blocks, with substantial open space around each group. The program content shifts into a three-column arrangement. Measurements indicate a comfortable density and an 8px base spacing unit, but do not assume a fixed maximum width or section gap.

## Shape & elevation

- Radius: nav `50%` · xs `20px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.83, 0, 0.17, 1)` on interactive elements.

The measured system has no shadows. Favor flat charcoal surfaces and subtle tonal separation between the main canvas and darker section bands; avoid card-like elevation. Borders are not established as a defining treatment, so use spacing and background contrast instead of prominent outlines or layered containers.

## Imagery

The measured page contains no image, video, or photographic content. Treat typography as the main visual asset: oversized rounded display lettering, compact text labels, and small navigation dots. Avoid introducing decorative photography or illustrative assets that compete with the wordmark; any visual treatment should remain flat, restrained, and consistent with the monochrome palette.

## Components

### Oversized event wordmark

A giant rounded uppercase “IMAGINE” display title spans the opening viewport, rendered in off-white against charcoal.

### Stacked event identifier

Compact Neue Haas Unica text beneath the wordmark stacks the lab name, location, and year into a narrow left-aligned block.

### Section progress dots

A vertical run of small muted-gray dots sits near the right edge as a restrained page-position cue.

### Pill navigation highlight

The “Programm” navigation item can sit on a gray, rounded active surface with off-white 18px Neue Haas Unica text.

### Editorial copy blocks

Event introduction and practical information appear as compact off-white text groups with substantial surrounding negative space.

### Program columns

The program area uses three columns, with headings, copy, links, and lists organized as distinct content groups.

### Measured component styles

- **Navigation item** (“Programm”): background #747576 · text #f8f8f8 · radius 20px · padding 0px · 400 18px Neue Haas Unica

## Do

- Use #2a2b2d as the dominant page canvas.
- Set the main display title in oversized rounded uppercase lettering.
- Use #f8f8f8 for legible text and the primary wordmark.
- Keep event details compact, left-aligned, and surrounded by negative space.
- Use #747576 only for secondary navigation emphasis or small indicators.
- Separate page bands with subtle tonal shifts rather than effects.

## Don't

- Do not introduce bright colors absent from the measured palette.
- Do not fill the open hero with extra promotional content.
- Do not use shadows or glossy, layered card effects.
- Do not add photography or decorative imagery as a competing focal point.
- Do not apply the rounded display font to all body copy.
- Do not invent fixed container widths or spacing values.

## Agent prompt

Build a new event page using the IAD LAB visual language: a long, editorial composition on a #2a2b2d Charcoal Canvas, with restrained #222222 Deep Section tonal bands. Use #f8f8f8 Soft Porcelain for readable text and a very large, rounded uppercase display title; choose a close free substitute such as Bowlby One SC if the original display font is unavailable. Set supporting copy and navigation in a neutral sans like Inter, with compact text blocks and generous negative space. Use #747576 Quiet Graphite only for small secondary indicators or a restrained active navigation state. Keep the hero sparse and left-aligned, then organize detailed event content into clear columns. Avoid decorative imagery, shadows, and prominent borders. Preserve a flat, high-contrast, typography-led hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width dark hero with a huge top-aligned display title and a small stacked event identifier. | Immediate event recognition, Vertical section progress cue | Rounded uppercase display type, Off-white on charcoal, Sparse composition |
| 2 | other | A full-width, single-column canvas reserved for a prominent event date. | Date-led event context | Large display heading, Dark monochrome background |
| 3 | other | Single-column dark section with compact explanatory copy and generous surrounding space. | Event context, Practical information | Small left-aligned text block, Off-white text, Minimal decoration |
| 4 | timeline | Three-column program section with headings, copy, lists, links, and supporting controls. | Browse program formats, Explore session details, Navigate event links | Three-column content layout, Display section heading, Muted active navigation |

## Source CSS custom properties (selected)

```css
--color-dark: #2a2b2d;
--color-light: #f8f8f8;
--color-neutral: #f8f8f8;
```

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