---
name: Vol
description: "A masterclass in editorial minimalism, using extreme typography lightness and generous whitespace to create a premium feel."
version: alpha

colors:
  background: "#ffffff"
  primary: "#272727"
  secondary: "#717171"
  neutral: "#949494"
  bg-quiet: "#949494"
  muted-soft: "#cdcccc"
  line: "rgba(39,39,39,0.15)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 50px
    lineHeight: 1.2
    fontWeight: 300
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 300
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A refined editorial platform for design books and curated products with a clean, monochromatic aesthetic.

*A high-end independent publishing house with a gallery-like presentation.*

## Colors

High-contrast monochromatic base relying on white space and typography for hierarchy.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#272727`)** — uses `ink` token
- **Secondary text (`#717171`)** — uses `ink-soft` token
- **Muted (`#949494`)** — uses `muted` token
- **Borders (`rgba(39,39,39,0.15)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans

- Extremely light weights (300) for all primary typography.
- Large, generous tracking on uppercase navigation and labels.
- Tight negative letter-spacing for large display typography.

## Layout

Full-width photographic hero followed by a centered, spacious grid for product or editorial content.

*Rhythm:* Generous vertical whitespace between major content blocks to emphasize a calm, editorial pace.

## Elevation & Depth

- Borders: Thin 1px solid borders in dark ink on a light background.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Pill-shaped with generous padding and 1px borders, or solid black with white text.
- **card:** Clean layouts dominated by large imagery and minimal text overlays.
- **chip:** Pill-shaped status tags with uppercase text.
- **input:** Clean rectangular fields with clear labels.
- **hero:** Full-bleed photographic background with light, large serif or sans-serif text overlaid.

## Do's and Don'ts

**Don't:**
- Don't use saturated neon colors — screenshot shows a strictly monochromatic, high-contrast palette.
- Don't use heavy, bold font weights — screenshot shows a consistent use of light weights (300) for all text.
- Don't use small, cramped spacing — screenshot shows generous vertical whitespace between sections.
- Don't use complex gradients — screenshot shows solid white backgrounds and flat photographic elements.
- Don't use aggressive drop shadows — screenshot shows completely flat surfaces without any depth effects.
- Don't use playful, rounded display fonts — screenshot shows refined, light-weight sans-serif and transitional typography.

---

## System Prompt (paste into AI agent)

```
A refined editorial and publishing platform (vol.co) featuring a minimalist, monochromatic design. The design DNA is built on a high-contrast palette of white (#ffffff) and deep ink (#272727), supported by a secondary gray (#949494). Typography is consistently light-weight (300), utilizing humanist-sans and transitional-serif categories. Key rules: maintain extreme whitespace, avoid bold font weights, and reject any saturated neon colors or complex gradients. The interaction model is calm, using smooth 0.2s ease-in-out transitions for all standard UI elements.
```