---
version: alpha
name: Ben Venusa
description: Editorial wine-importer minimalism — warm off-white paper canvas, near-black ink, a single muted terracotta-wine accent, all-caps serif display headlines paired with a quiet sans body, photography-led layouts with near-zero chrome and generous whitespace.

colors:
  # Canvas + ink
  background: "#faf8f4"
  surface: "#ffffff"
  surface-soft: "#f3efe8"
  ink: "#1c1a17"
  ink-secondary: "#5a5650"
  ink-muted: "#8c877e"

  # Accent — muted wine/terracotta
  primary: "#7a2f2a"
  primary-hover: "#5e221e"
  accent-warm: "#b87333"

  # Lines + neutrals
  border: "#e3ddd2"
  border-strong: "#cfc7b8"
  gray-100: "#efeae1"

  # On-color
  on-primary: "#faf8f4"
  on-ink: "#faf8f4"

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: 1.5px
  section-heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: 1px
  card-title:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.5px
  eyebrow:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 2px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 1.5px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 40px
    borderColor: "{colors.border}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"
  card-producer:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.none}"
    padding: 16px 0px
  filter-chip:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border-strong}"
  filter-chip-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  eyebrow-label:
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface-soft}"
    typography: "{typography.body-small}"
    padding: 64px 40px
---

# Ben Venusa Design System

## Overview

Ben Venusa is the website of an importer of artisanal, micro-producer Italian wines, and its design system reads exactly like the brief: heritage-focused, photography-led, and deliberately quiet. The canvas is a warm off-white paper tone (`{colors.background}`) rather than clinical white — a small but defining choice that gives the whole site the feel of printed editorial stock. Text sits in a soft near-black (`{colors.ink}`) that never hits pure `#000`, preserving the warmth. There is almost no graphic embellishment; the producers' photography does the heavy lifting and the chrome stays out of its way.

Typographically the system runs on a two-voice contrast. Display copy uses a high-contrast serif (Cormorant Garamond as the closest faithful stand-in) set in generous, lightly letter-spaced all-caps for section titles like "THE GREAT WHITES OF ETNA" — the headlines feel like the cover of a wine annual. Underneath, a clean neutral sans (Inter) carries body copy, navigation, and metadata at restrained sizes with comfortable line-height. The pairing is the engine of the brand: serif for romance and heritage, sans for clarity and modern legibility.

Color is used with extreme discipline. The palette is essentially monochrome-warm — paper, ink, and a few greige neutrals for hairline borders — punctuated by a single muted wine/terracotta accent (`{colors.primary}`) reserved for eyebrows, hovers, and the occasional emphasis. Nothing is bright; saturation is intentionally low so the bottle and vineyard photography stays the loudest thing on the page.

Layout favors gallery-style producer grids, edge-to-edge imagery, and large pools of whitespace. Corners are square or barely rounded — this is print logic, not app logic. Borders are thin warm hairlines (`{colors.border}`); there are no drop shadows, no cards floating on tinted panels, no gradients.

**Key Characteristics:**
- Warm off-white paper canvas (`{colors.background}`) instead of pure white
- Two-voice type system: high-contrast serif display + neutral sans body
- All-caps serif headlines with positive letter-spacing — editorial, magazine-like
- A single muted wine/terracotta accent (`{colors.primary}`) used sparingly
- Square / minimally-rounded corners — print logic over app logic
- Thin warm hairline borders, no drop shadows, no gradients
- Photography-led layouts with gallery-style producer grids
- Generous whitespace and large vertical rhythm

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The warm off-white page canvas — the brand's base tone.
- **Surface** (`{colors.surface}`): Pure white for image frames and inputs that need to sit cleaner than the paper.
- **Surface Soft** (`{colors.surface-soft}`): Warm tint for alternating sections and footer text on dark.
- **Ink** (`{colors.ink}`): Primary near-black text and dark buttons — warm, never pure black.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions, metadata.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary detail, placeholders, fine print.

### Accent
- **Wine** (`{colors.primary}`): The muted terracotta-wine accent — eyebrows, hovers, emphasis. The only color with real chroma.
- **Wine Hover** (`{colors.primary-hover}`): Deeper wine for pressed/hover states.
- **Warm Brass** (`{colors.accent-warm}`): Occasional warm secondary for highlights and decorative detail.

### Lines & Neutrals
- **Border** (`{colors.border}`): Default warm hairline between sections and cards.
- **Border Strong** (`{colors.border-strong}`): Heavier border for inputs and active dividers.
- **Gray 100** (`{colors.gray-100}`): Subtle warm fill for inactive surfaces.

### On-Color
- **On Primary** (`{colors.on-primary}`): Paper-tone text on the wine accent.
- **On Ink** (`{colors.on-ink}`): Paper-tone text on dark ink buttons and footer.

## Typography

### Font Family
- **Display**: `Cormorant Garamond`, with fallbacks `Georgia, serif` — a high-contrast serif for headlines and producer titles.
- **Body / UI**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif` — neutral sans for reading and navigation.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | Hero statements ("A history of the future") |
| `section-heading` | All-caps editorial section titles |
| `card-title` | Producer / article card titles |
| `eyebrow` | Small all-caps labels above headings, wine-colored |
| `body-large` | Lead paragraphs, producer intros |
| `body` | Standard reading text |
| `body-small` | Metadata, secondary copy |
| `nav-link` | Navigation, buttons, filter chips (tracked all-caps) |
| `caption` | Photo credits, fine print |

### Principles
- **Two voices, strict roles**: serif announces (heritage, romance), sans informs (clarity, navigation). Never swap them.
- **All-caps with air**: section headings and nav use positive letter-spacing (1–2px) — the opposite of tech minimalism's negative tracking.
- **Restraint in weight**: serif stays at 500, sans at 400/500. No heavy bold — contrast comes from size and the serif itself.
- **Generous line-height** on body (1.6–1.7) for an unhurried, printed reading feel.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. The rhythm is large: section padding leans on `{spacing.3xl}`–`{spacing.4xl}` to give photography and whitespace room.

### Grid & Container
- Max content width approximately 1280px, with edge-to-edge hero and full-bleed imagery allowed
- Producer browsing uses a multi-column gallery grid of image-led cards
- Regional / type filters sit as a quiet row of pill chips above the grid

### Whitespace Philosophy
- **Editorial breathing room**: large vertical gaps between sections; the page never feels packed
- **Photography first**: copy yields to imagery; chrome is minimal so bottles and vineyards lead
- **Hairline separation**: sections divide via thin warm borders and spacing, not heavy panels

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Page, text blocks, most imagery |
| Hairline | `1px solid {colors.border}` | Cards, section dividers |
| Strong line | `1px solid {colors.border-strong}` | Inputs, active filters |

**Shadow Philosophy**: There is effectively no shadow system. Depth comes from warm hairline borders, square framing, and whitespace — a print sensibility, not a material one. Avoid drop shadows entirely.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, images, inputs — the default |
| `xs` | 2px | Barely-softened detail elements |
| `sm` | 4px | Small interactive elements when softening is needed |
| `md` | 6px | Rare, larger soft containers |
| `pill` | 9999px | Filter chips and tags only |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card-producer}`).

### Buttons
- **`button-primary`** — Dark ink fill, paper-tone all-caps tracked label, square corners. Hover shifts to wine (`{colors.primary}`).
- **`button-secondary`** — Paper background with a 1px ink outline, square corners.

### Navigation
- **`nav-bar`** — Paper background, all-caps tracked links, thin bottom border. Quiet and editorial.

### Cards
- **`card`** — White image frame with a warm hairline border, square corners.
- **`card-producer`** — Image-led producer tile: photo on top, serif title below, no panel chrome.

### Filters
- **`filter-chip`** — Pill chip with warm strong border, tracked all-caps label. Active state fills with ink.

### Inputs
- **`input`** — White surface, strong warm border, square corners, sans body text.

### Labels & Footer
- **`eyebrow-label`** — Small all-caps wine-colored label that sits above section headings.
- **`footer`** — Dark ink background with paper-tone text, generous padding.

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.background}`) — never pure white for the page
- Pair the serif for display with the sans for body, in strict roles
- Set headings in all-caps with positive letter-spacing (1–2px)
- Keep the wine accent (`{colors.primary}`) rare — eyebrows, hovers, emphasis only
- Default to square corners; reserve pills for filter chips
- Let photography lead; keep chrome to thin warm hairlines
- Keep weights restrained — size and the serif provide the contrast

### Don't
- Don't introduce bright or saturated colors that compete with the photography
- Don't use drop shadows or gradients — depth is borders and whitespace
- Don't use negative letter-spacing on the serif headlines
- Don't round button or card corners — this is print logic
- Don't set body in the serif or headlines in the sans
- Don't crowd sections; the large vertical rhythm is the brand

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column gallery, stacked nav into menu, reduced section padding |
| Tablet | 600–1024px | 2-column producer grid, condensed filter row |
| Desktop | 1024–1280px | Full multi-column gallery, edge-to-edge hero |
| Large | >1280px | Centered max width with generous warm margins |

### Touch Targets
- Nav links and filter chips keep comfortable tap padding despite small type
- Buttons use 14px vertical padding for adequate height

### Collapsing Strategy
- Hero serif scales down but keeps its positive tracking proportionally
- Navigation collapses to a menu toggle on mobile
- Producer grid: multi-column → 2-column → single column
- Section spacing: `{spacing.4xl}` → roughly `{spacing.2xl}` on mobile
- Full-bleed imagery maintains aspect ratio and edge-to-edge treatment

---

## Agent Prompt Guide

### Quick Color Reference
- Page background: Paper `{colors.background}`
- Heading + body text: Ink `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Accent (eyebrows, hovers): Wine `{colors.primary}`
- Borders: warm hairline `{colors.border}`
- Dark CTA / footer: `{colors.ink}`

### Example Component Prompts
- "Create an editorial hero on a warm off-white (`{colors.background}`) canvas. Eyebrow in 12px Inter all-caps, 2px tracking, wine color (`{colors.primary}`). Headline in 64px Cormorant Garamond weight 500, all-caps, 1.5px letter-spacing, color `{colors.ink}`. Body in 18px Inter, line-height 1.7, `{colors.ink-secondary}`."
- "Design a producer card: white image frame with 1px `{colors.border}` hairline, square corners, no shadow. Title below in 24px Cormorant Garamond weight 500. Region label in 13px Inter all-caps, 1.5px tracking, `{colors.ink-muted}`."
- "Build a filter row of pill chips: paper background, 1px `{colors.border-strong}` border, 13px Inter all-caps tracked label `{colors.ink-secondary}`. Active chip fills `{colors.ink}` with paper text."
- "Create a primary button: `{colors.ink}` fill, paper text, square corners, 14px Inter all-caps 1.5px tracking, 14px/28px padding. Hover fills `{colors.primary}`."

### Iteration Guide
1. Start from the warm paper canvas, never pure white
2. Serif announces, sans informs — keep the two voices in strict roles
3. All-caps display copy uses positive letter-spacing (1–2px)
4. Color stays monochrome-warm; the wine accent appears rarely and intentionally
5. Square corners and hairline borders everywhere; pills only for filter chips
6. Let photography be the loudest element — chrome recedes

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Ben Venusa. Brand names and trademarks belong to their respective owners.