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

# Volume · Design System

> Quiet typography, expansive visual storytelling

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

Volume pairs restrained, monochrome interface design with expansive imagery from books on visual culture. The homepage treats featured titles as immersive editorial covers, then returns to a quiet newsletter and utility-focused footer.

## North star

Keep the interface quiet and monochrome so full-bleed book imagery and editorial typography carry the experience.

## Overview

The visual system keeps the interface itself nearly monochrome: white is the main canvas, charcoal anchors dark sections and footer areas, and measured gray tones handle secondary text, borders, and the newsletter button. The vivid creams, blues, reds, and greens visible in the long hero imagery belong to the featured artwork and book photography, not to a general UI accent palette. Messina Sans is used throughout in light weights, with spacious, readable headlines and small uppercase labels that add a restrained publishing sensibility. The page is built around wide, full-bleed image features alternating with a white newsletter band and a dark footer. Overlay text sits directly over imagery rather than inside decorated cards. Generous open space and simple alignment give each title room to read, while hairline borders and flat controls keep the interface unobtrusive. The result makes the books and their artwork the strongest visual signals.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, header and newsletter background; also used for text over dark image and footer areas. |
| Charcoal Ink | `#272727` | `--color-charcoal-ink` | neutral | Main text and navigation ink, plus the inverse surface used for dark feature imagery and the footer. |
| Quiet Graphite | `#717171` | `--color-quiet-graphite` | semantic | Fine borders and subdued link text, including form outlines and footer details. |
| Soft Pewter | `#949494` | `--color-soft-pewter` | semantic | Muted footer and button text; the newsletter sign-up button uses it as its background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#272727` (Charcoal Ink) · `--color-text` → `#272727` (Charcoal Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#949494` (Soft Pewter) · `--color-border` → `#717171` (Quiet Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#272727` | `#ffffff` | 14.94:1 | AAA |
| `#ffffff` | `#272727` | 14.94:1 | AAA |
| `#949494` | `#ffffff` | 3.03:1 | AA-large |
| `#949494` | `#272727` | 4.92:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Messina Sans | `--font-body` | webfont | 300, 350 | Site-wide display, headings, body, navigation, labels, and controls. | DM Sans |

- **Messina Sans:** Light weights dominate; use airy sentence-case headlines and widely tracked uppercase labels and controls.

### Type scale — Custom (ratio ≈ 2.108, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 300 | 1.18 | 0 | — | Messina Sans | Oversized editorial headline treatment where featured content calls for emphasis. |
| h1 | 50px | 300 | 1.18 | -0.02em | — | Messina Sans | Primary title typography for featured books and page-level headings. |
| body | 18px | 350 | 1 | 0 | — | Messina Sans | Newsletter copy and supporting descriptive text. |
| caption | 14px | 300 | 1 | 0.07em | uppercase | Messina Sans | Small uppercase metadata and compact supporting labels. |
| button | 14px | 300 | 1 | 0.07em | uppercase | Messina Sans | Uppercase sign-up action text. |
| nav | 20px | 300 | 1.18 | 0 | — | Messina Sans | Header and account navigation links. |
| eyebrow | 14px | 300 | 1 | 0.07em | uppercase | Messina Sans | Uppercase section labels and short metadata. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 13, 15, 17, 19, 24, 30, 45, 60 px.
- Section rhythm 45px · element gap — · card padding — · max content width 1380px.

The page uses a single-column editorial flow, with full-bleed feature imagery spanning the viewport and a measured page max width of 1380px for contained content. Navigation forms a slim horizontal band; featured books stack vertically rather than appearing in cards. A white newsletter section interrupts the image sequence, followed by a three-column utility footer. Alignment is predominantly left-led, with comfortable density and clear breathing room between major blocks.

## Shape & elevation

- Radius: pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The interface is essentially flat: no measured shadows or gradients. Separation comes from alternating image fields, white canvas, and a charcoal footer. Controls use simple square-cornered outlines and restrained fills; the only rounded treatment measured is a pill-shaped radius scale, visible in image-overlay status labels rather than the main form controls.

## Imagery

Large, edge-to-edge artwork and photography are the defining feature: an illustrated book cover, a cinematic waterside photograph, a dark product shot of a book object, and a close-up typographic archive scene. Text overlays sit low and to the left, with white or dark text chosen for contrast. Treat color-rich artwork as content imagery, not as a site-wide UI palette.

## Components

### Top navigation

White horizontal header with a small emblem, widely separated navigation groups, and understated uppercase links; nav typography is light Messina Sans.

### Featured book panels

Full-bleed image-led panels with large, left-aligned title overlays and short availability or preorder metadata.

### Status labels

Compact pill-shaped funding, remaining-copy, and availability labels placed directly over featured imagery.

### Newsletter form

Large editorial invitation above a bordered email field; the measured input uses a 1px #717171 border and the sign-up button uses #949494 with white uppercase text.

### Footer

Charcoal inverse surface with three utility columns, subdued text, country selector, and a small return-to-top control.

### Measured component styles

- **Primary button** (“SIGN UP”): background #949494 · text #ffffff · radius 0px · padding 18.8px 60px · 300 14px Messina Sans · uppercase
- **Link** (“Folium Taehyoung Jeon 4% funded 10 days ”): transparent background · text #717171 · radius 0px · padding 0px · 300 20px Messina Sans
- **Input** (“Åland Islands EUR Albania ALL Andorra EU”): transparent background · text #cdcccc · border 1px solid #717171 · radius 0px · padding 0px 13px · 300 20px Messina Sans
- **Navigation item** (“Your account”): transparent background · text #ffffff · radius 0px · padding 0px · 300 20px Messina Sans

## Do

- Let featured book imagery span the full viewport width.
- Keep interface surfaces predominantly #ffffff and #272727.
- Use light Messina Sans-style typography for headings and navigation.
- Place concise title and availability metadata over image panels.
- Keep newsletter controls rectangular, thin-bordered, and understated.
- Use generous breathing room between editorial sections.

## Don't

- Do not turn the artwork palette into default UI accent colors.
- Do not wrap every featured title in a card.
- Do not add gradients, shadows, or decorative elevation.
- Do not use heavy display weights or dense, compact text.
- Do not make navigation visually louder than the featured books.
- Do not replace the monochrome footer with a bright section.

## Agent prompt

Build a new Volume-style publishing page with a quiet monochrome interface and image-led editorial flow. Use Gallery White (#ffffff) for the main canvas and newsletter area, Charcoal Ink (#272727) for primary text and dark inverse surfaces, Quiet Graphite (#717171) for hairlines and subdued links, and Soft Pewter (#949494) sparingly for muted controls. Use a light sans-serif close to Messina Sans, with spacious sentence-case headlines and small tracked uppercase labels. Arrange large full-bleed book or visual-culture imagery in a single-column sequence; place titles and concise availability details directly over the image. Insert a restrained newsletter band and finish with a dark utility footer. Keep controls flat, borders fine, and layout airy. Treat vivid artwork colors as content, not reusable interface accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Single-column sequence of two full-bleed image features with left-aligned overlays. | Featured title discovery, Funding and availability cues, Preorder prompt | Full-bleed artwork, Overlay title, Compact pill labels |
| 2 | newsletter | White, single-column band with a large invitation above a bordered email field and sign-up button. | Email capture, Launch and offer updates | Large editorial copy, Thin field border, Muted sign-up button |
| 3 | gallery | Two more full-bleed editorial image features stacked vertically in a single column. | Book discovery, Availability messaging, Purchase prompt | Dark product photography, Archival imagery, Left-aligned overlay copy |
| 4 | footer | Charcoal footer with three utility columns, an upper return control, and a bottom brand and region row. | Account and policy navigation, Email contact, Region selection, Back to top | Inverse dark surface, Three-column links, Subdued text, Outlined utility control |

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