# Exhibition Magazine · Design system migration spec

> Source: https://exhibition-magazine.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of how extreme restraint and high-quality typography can create a premium, high-fashion editorial feel.

## 1. Identity DNA

Exhibition Magazine operates as a digital fashion exhibition space, translating the hushed reverence of a gallery onto the screen. Its design system is built to feel like a high-end print magazine, where the architecture of the interface recedes to foreground the curated content.

**One-liner:** A minimalist, image-forward editorial platform for fashion and art.
**Keywords:** editorial · fashion · high-end · curated · minimalist
**Analogy:** A digital fashion exhibition space that feels like a high-end print magazine.

## 2. Color

The color system is one of deliberate absence. A strict palette of pure black, white, and neutral grays creates a high-contrast backdrop, ensuring that the photography itself provides the chromatic narrative.

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

**Color principle:** High-contrast black and white with a neutral gray backdrop to let photography dominate.

The principle is absolute neutrality: the interface should never compete with the image.

## 3. Typography

Typography carries the system's voice through a sharp, purposeful contrast. Headlines are set in a condensed sans-serif for bold, uppercase statements, while body copy employs an elegant transitional serif for readable, sophisticated prose.

- **Display:** condensed-grotesque-sans
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 90px | 0.9 | 500 | -1px | Large masthead and hero titles |
| heading | 36px | 1.1 | 500 | -0.5px | Section headers and article titles |
| body | 16px | 1.5 | 400 | normal | Body copy and descriptions |

## 4. Spacing

Vertical rhythm is dictated by the content itself—large image blocks and generous padding establish a clean, editorial cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical spacing is dictated by large image blocks and generous padding.

## 5. Surfaces

Surfaces are intentionally flat and clean. The system avoids decorative shadows, relying instead on clear image blocks and, where necessary, a single thin 1px border on functional elements like the newsletter input.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Minimal to none, except for thin 1px borders on the newsletter input.

## 6. Layout

The layout skeleton is a full-width, image-heavy grid with a persistent, minimal top navigation bar. Generous spacing and minimal UI interference ensure the content, not the framework, commands attention.

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

**Skeleton:** A full-width image-heavy layout with a persistent top navigation bar.

## 7. Motion & Interaction

Motion philosophy is rooted in subtlety and elegance. Transitions are slow, long-duration fades, more akin to a cinematic gallery's pacing than a typical website's rapid clicks.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Slow, elegant fades for content transitions and hero slides.

- **Hover:** Subtle opacity or color change on navigation links.
- **Click:** Triggers page navigation or modal open/close.
- **Transition:** Smooth opacity and color transitions over 0.25s to 1s.
- **Keyboard:** Standard browser tab focus states.

## 8. Voice & Don'ts

The editorial voice is authoritative and understated, mirroring the visual restraint. Every word, like every design choice, is selected to feel considered and sophisticated.

- **Tone:** Authoritative, sophisticated, and understated.
- **Headline style:** Bold, uppercase, and often in a condensed sans-serif.
- **CTA style:** Minimal and direct, often just a single word in a bold, simple box.
- **Avoid:** Flashy animations / Decorative borders / Multiple accent colors

### Don'ts
- ❌ don't use decorative shadows — screenshot shows clean, flat image blocks without drop shadows
- ❌ don't use rounded corners — screenshot shows sharp, 90-degree corners on all cards and buttons
- ❌ don't use colorful accents — screenshot shows a strict black, white, and neutral gray palette
- ❌ don't use playful or rounded typography — screenshot shows sharp, high-contrast serif and condensed sans-serif fonts
- ❌ don't clutter the layout with many UI elements — screenshot shows a minimal interface dominated by large photography
- ❌ don't use complex gradients — screenshot shows solid neutral background colors and clear photographic images

This system deliberately forgoes flashy animation, decorative elements, and multiple accent colors to maintain a singular, high-fashion focus.

## System Prompt (paste into AI tool)

```
Exhibition Magazine is a high-end digital editorial platform for fashion, art, and culture. Its design is strictly minimalist and image-forward, using a neutral gray background to let high-quality photography dominate. The typography is a sharp contrast between bold, condensed sans-serif headlines and elegant transitional serif body text. Key hex colors are #000000 (ink) and #A8A8A8 (bg). The layout is a clean, full-width grid with minimal UI interference. Critical constraints: never add rounded corners or decorative shadows; do not use multiple accent colors; avoid playful or decorative fonts to maintain the sophisticated, high-fashion aesthetic.
```
