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

# Exhibition Magazine · Design System

> Bold fashion imagery meets pared-back editorial typography.

**Theme:** light · **Industry:** media · **Source:** https://exhibition-magazine.com/ · **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._

Exhibition Magazine pairs edge-to-edge fashion photography with oversized condensed navigation and a restrained black-and-white editorial palette. A compact story grid leads into a stark black footer, letting imagery and typography carry the page.

## North star

Let full-bleed fashion photography and sharp typographic contrast lead, keeping supporting UI flat, white, and editorially restrained.

## Overview

The page is built around a quiet palette: white (#ffffff) forms the content canvas and story grid, black (#000000) defines editorial text and the closing footer, while gray (#a8a8a8) belongs chiefly to the muted hero-media field rather than acting as a general brand accent. Oversized uppercase DIN lettering anchors the opening, with condensed navigation sitting directly over the photograph in white. Cochin provides a contrasting literary voice for story titles and small descriptions; the restrained display sans adds a fine uppercase register for compact labels and links. Layout alternates a full-bleed image-led feature with a white multi-column story feed, using photography as the principal color and texture. Content is dense in the grid but separated by generous white bands. The final black section is deliberately sparse, with small peripheral links and one centered, underlined issue callout. The overall treatment is flat and editorial, without decorative shadows or ornamental UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main story canvas, overlaid hero navigation and titles, and contrast text on the black footer. |
| Editorial Ink | `#000000` | `--color-editorial-ink` | neutral | Story text and navigation on white, plus the closing footer surface and its white links. |
| Photo Mist | `#a8a8a8` | `--color-photo-mist` | surface | Measured gray media field associated with the opening hero; photographic gray tones are not a general UI accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#a8a8a8` (Photo Mist) · `--color-surface-2` → `#000000` (Editorial Ink) · `--color-text` → `#000000` (Editorial Ink) · `--color-text-muted` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#a8a8a8` | 8.83:1 | AAA |
| `#ffffff` | `#a8a8a8` | 2.38:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Cochin | `--font-body` | webfont | 400 | Editorial story titles, descriptions, and other reading text. | Cormorant Garamond |
| DIN | `--font-display` | webfont | 400 | Oversized masthead, hero titles, and uppercase primary navigation. | Barlow Condensed |
| forma-djr-display | `--font-forma-djr-display` | webfont | 500 | Small uppercase captions, eyebrows, and compact links. | Oswald |

- **Cochin:** Regular serif provides a literary contrast to the condensed uppercase display system.
- **DIN:** Regular weight; use uppercase for display and navigation, with tightly set headline lines.
- **forma-djr-display:** Measured medium weight with tracked uppercase styling for small editorial labels.

### Type scale — Augmented Fourth (ratio ≈ 1.443, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 400 | 1 | 0 | uppercase | DIN | Oversized uppercase magazine masthead across the hero. |
| h1 | 90px | 400 | 0.75 | -0.004em | uppercase | DIN | Large uppercase title centered over the lead photograph. |
| h2 | 46px | 400 | 1.5 | 0 | — | Cochin | Serif editorial headings within content sections. |
| h3 | 40px | 400 | 0.75 | -0.008em | uppercase | DIN | Uppercase story or feature headlines. |
| h4 | 36px | 400 | 1.2 | 0 | uppercase | DIN | Secondary uppercase headings and issue callouts. |
| body | 16px | 400 | 1.2 | 0 | — | Cochin | Serif story descriptions and supporting editorial copy. |
| caption | 13px | 500 | 1.6 | 0.062em | uppercase | forma-djr-display | Tracked uppercase contributor labels and compact metadata. |
| nav | 25px | 400 | 1.2 | 0 | uppercase | DIN | Large uppercase primary site navigation over the hero. |
| link | 13px | 500 | 1.6 | 0.062em | uppercase | forma-djr-display | Compact uppercase footer and editorial links. |
| eyebrow | 13px | 500 | 1.6 | 0.062em | uppercase | forma-djr-display | Small tracked uppercase labels above or beside content. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 12, 16, 18, 24, 60, 100 px.
- Section rhythm 60px · element gap — · card padding — · max content width 618px.

A full-bleed hero spans the page width, with the masthead and navigation layered over its image and the feature title centered below. The white editorial feed shifts to a four-column desktop story grid, mixing compact image cards with broad photographic features between rows. Content stays visually open through white gutters and larger blank bands rather than visible card containers. The measured page max width is 618px for constrained content; preserve the clear contrast between full-width media and compact editorial elements. A centered issue link anchors the two-column black footer.

## Shape & elevation

- Radius: button `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `1s cubic-bezier(0.19, 1, 0.22, 1)` on interactive elements.

The interface is essentially flat: no measured shadows or gradients, and borders are not a defining system. Separate stories with white space and image edges rather than raised cards or outlines. The hero is layered through text over full-bleed photography, while the final black footer forms a clear section change.

## Imagery

Fashion and culture photography is the primary visual material: full-width editorial scenes lead, while cropped portrait, object, and artwork images populate the story grid. Images retain their own varied colors and textures rather than being forced into a brand-color treatment. Hero text and navigation sit directly over photography in white; use strong, composed frames and avoid decorative illustration or 3D effects.

## Components

### Hero masthead and navigation

Large uppercase DIN magazine title and uppercase navigation are placed directly over the full-bleed lead image in white.

### Lead editorial feature

A centered condensed uppercase feature title, small serif credit line, and simple plus affordance overlay the hero photograph.

### Story card

Editorial image followed by a compact uppercase headline and short Cochin description, arranged in a multi-column white grid.

### Feature image band

Wide photographic story breaks up the card feed, with its headline and brief credit set over the image.

### Load-more link

Centered, uppercase condensed text with an underline, presented as a text-led continuation control on white.

### Black editorial footer

A full black closing band places small white site links near the edges and a centered underlined issue callout.

### Measured component styles

- **Primary button** (“Go to previous slide”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Cochin
- **Link** (“MONCLER X MYTHERESA A Scottish Renaissan”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Cochin
- **Navigation item** (“HOME FASHION ART DECODING BEAUTY STUDIO ”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Cochin

## Do

- Use full-bleed editorial photography for lead stories.
- Set mastheads and primary navigation in uppercase condensed sans.
- Pair display type with a literary serif for story copy.
- Keep the story feed on a clean white canvas.
- Use image edges and open space instead of card borders.
- Reserve black section backgrounds for strong editorial transitions.

## Don't

- Do not introduce unmeasured brand accent colors.
- Do not add shadows, gradients, or elevated card treatments.
- Do not place the hero inside a rounded container.
- Do not let decorative UI compete with the photographs.
- Do not make editorial descriptions resemble product interface labels.
- Do not use gray as a general-purpose accent beyond the media context.

## Agent prompt

Build a new editorial page in the Exhibition Magazine visual style. Use Gallery White (#ffffff) for the reading canvas and story feed, Editorial Ink (#000000) for text and a decisive closing band, and Photo Mist (#a8a8a8) only where a muted media field is appropriate. Lead with edge-to-edge fashion or culture photography, overlaying an oversized uppercase condensed masthead and simple uppercase navigation in white. Use condensed sans for display headlines, a contrasting literary serif for story titles and descriptions, and tracked uppercase labels for compact metadata. Arrange stories as a tight editorial image grid interrupted by occasional wide image features. Keep cards unboxed and the UI flat: no shadows, gradients, or invented accent colors. Finish with a sparse black footer and a centered underlined issue link.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width photographic lead with oversized masthead and navigation overlaid; feature title centered over the image. | previous/next slide controls, story title link, carousel position indicators | full-bleed photography, white uppercase condensed type, centered feature overlay, minimal plus affordance |
| 2 | footer | Two-column black footer with small edge-aligned links and a centered, underlined issue callout. | editorial and legal navigation, social links, issue destination | solid black background, small white links, large centered underlined title |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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