---
version: alpha
name: Zissou
description: Editorial monochrome restraint — custom Z Sans and Z Serif on a near-white canvas, soft-black ink (#1b1b1b), a warm sand neutral family, near-zero radii, and a single muted-red accent reserved for emphasis. Mono labels in CWL Mono with wide tracking.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f8f8f8"
  surface-warm: "#eae5e0"
  ink: "#1b1b1b"
  ink-pure: "#000000"

  # Warm neutral family
  warm-500: "#b5b0a7"
  warm-400: "#b2b2b2"

  # Accent — muted red, emphasis only
  accent: "#cc4444"
  accent-bright: "#ef4444"

  # Neutral scale
  gray-700: "#242424"
  gray-600: "#666666"
  gray-500: "#858585"
  gray-400: "#999999"
  gray-300: "#d4d4d4"
  gray-200: "#e4e4e4"
  gray-100: "#ebebeb"
  gray-50: "#f1f1f1"

  # Lines + dividers
  border: "#e4e4e4"
  border-soft: "#ececec"

  # On-color
  on-ink: "#ffffff"
  on-accent: "#ffffff"

typography:
  display:
    fontFamily: "Z Serif, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.5px
  heading:
    fontFamily: "Z Sans, Helvetica Neue, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.5px
  sub-heading:
    fontFamily: "Z Sans, Helvetica Neue, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: -0.16px
  serif-lead:
    fontFamily: "Z Serif, Georgia, serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  body:
    fontFamily: "Z Sans, Helvetica Neue, sans-serif"
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Z Sans, Helvetica Neue, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label-mono:
    fontFamily: "CWL Mono, Courier New, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 1.6px
  caption:
    fontFamily: "Z Sans, Helvetica Neue, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.16px
  mono-body:
    fontFamily: "CWL Mono, Courier New, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px

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

rounded:
  none: 0px
  micro: 1px
  xs: 2px
  sm: 3px
  md: 4px
  lg: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 10px 20px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
    borderColor: "{colors.border}"

  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 10px 20px

  link-mono:
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"

  badge:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.xs}"
    padding: 3px 8px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.border}"

  card-warm:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    padding: 16px 24px
    borderColor: "{colors.border-soft}"

  divider:
    backgroundColor: "{colors.border}"
    height: 1px
---

# Zissou Design System

## Overview

Zissou is an exercise in editorial restraint. The canvas is near-white (`{colors.background}`) and the type is set in soft black (`{colors.ink}`) — a warm `#1b1b1b` that reads as ink on paper rather than pixels on glass. There is no chrome competing for attention: the page behaves like a well-set printed spread, where typography and generous whitespace carry the entire experience and color is rationed to almost nothing.

The typographic system is the brand. Two custom typefaces do the work — **Z Sans**, a clean grotesque used for headings, navigation, and body copy, and **Z Serif**, a literary serif (with an italic cut) used for leads and display moments. Supporting them is **CWL Mono**, a monospace reserved for small uppercase-feeling labels with wide letter-spacing — the system's "technical voice." Monument Grotesk also ships in the bundle as a secondary sans. The result is an editorial register: serif for the lyrical, sans for the structural, mono for the captioned.

What keeps Zissou from feeling cold is its neutral family. Beyond the achromatic grays runs a warm sand thread — a beige surface (`{colors.surface-warm}`) and a muted taupe (`{colors.warm-500}`) — that softens panels and badges with a paper-like warmth. The one chromatic note is a muted red (`{colors.accent}`), held in reserve for emphasis, errors, or a single deliberate highlight. Radii are nearly nonexistent (1–4px), reinforcing the squared, printed-page geometry.

**Key Characteristics:**
- Custom Z Sans (grotesque) + Z Serif (literary, with italic) as the typographic core
- CWL Mono for small wide-tracked labels — the "captioned" technical voice
- Soft-black ink (`{colors.ink}`) on near-white, paper-not-screen warmth
- A warm sand neutral thread (`{colors.surface-warm}`, `{colors.warm-500}`) among the grays
- Single muted-red accent (`{colors.accent}`), rationed for emphasis only
- Near-zero radii (1–4px) — squared, editorial geometry
- Whitespace and type hierarchy carry the design; minimal borders and no decoration

## Colors

### Primary
- **Soft Black** (`{colors.ink}`): Headings, body text, primary marks. Warm, not pure black.
- **Pure White** (`{colors.background}`): Page and surface canvas.
- **True Black** (`{colors.ink-pure}`): Reserved hard-contrast contexts.

### Warm Neutrals
- **Warm Surface** (`{colors.surface-warm}`): Sand-beige panels, badges, warm cards.
- **Warm 500** (`{colors.warm-500}`): Muted taupe — secondary warm text and lines.
- **Warm 400** (`{colors.warm-400}`): Cool-leaning gray pairing partner.

### Accent
- **Accent Red** (`{colors.accent}`): Emphasis, errors, single highlight moments only.
- **Accent Bright** (`{colors.accent-bright}`): Brighter error/alert variant.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Strong secondary ink.
- **Gray 600** (`{colors.gray-600}`): Body-secondary, muted copy.
- **Gray 500** (`{colors.gray-500}`): Tertiary text, captions.
- **Gray 400** (`{colors.gray-400}`): Placeholder, disabled.
- **Gray 300–50** (`{colors.gray-300}`–`{colors.gray-50}`): Lines, dividers, subtle fills.

### Lines
- **Border** (`{colors.border}`): Default hairline dividers and card outlines.
- **Border Soft** (`{colors.border-soft}`): Lightest separators.

## Typography

### Font Family
- **Sans**: `Z Sans`, fallbacks `Helvetica Neue, sans-serif`
- **Serif**: `Z Serif`, fallbacks `Georgia, serif` (italic cut available)
- **Mono**: `CWL Mono`, fallbacks `Courier New, monospace`

### Hierarchy

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

| Token | Use |
|---|---|
| `display` | Z Serif display moments, large statements |
| `heading` | Z Sans section headings |
| `sub-heading` | Secondary headings |
| `serif-lead` | Z Serif lead paragraphs, pull quotes |
| `body` | Standard reading text (16.5px) |
| `body-small` | UI text, buttons |
| `label-mono` | CWL Mono wide-tracked labels, eyebrows |
| `caption` | Metadata, fine print |
| `mono-body` | Monospace technical copy |

### Principles
- **Serif for the lyrical, sans for the structural**: Z Serif carries leads and display; Z Sans carries headings, navigation, body.
- **Mono as caption voice**: CWL Mono with wide tracking (~1.6px) marks technical labels and eyebrows.
- **Light hierarchy**: weights stay 300–500; no heavy bold. Contrast comes from family and size, not weight.
- **Negative tracking on display**: headings tighten to -0.5px; body sits at neutral tracking.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, opening to large editorial gaps (`{spacing.3xl}`–`{spacing.4xl}`) between sections.

### Grid & Container
- Centered single-column editorial measure for reading; restrained max width
- Generous top and section padding — the page reads like a printed spread
- Hairline `{colors.border}` dividers instead of boxed containers

### Whitespace Philosophy
- **Whitespace is the layout**: separation comes from space and rules, not fills or shadows.
- **Paper warmth**: occasional `{colors.surface-warm}` panels break the white without introducing color.
- **Rationed color**: the muted red appears at most once per view — emphasis, never decoration.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Page, text blocks |
| Hairline | 1px `{colors.border}` | Cards, dividers, inputs |
| Warm Panel | `{colors.surface-warm}` fill | Highlighted regions |

Depth is essentially absent — Zissou is a flat, printed-page system. Separation is achieved with hairlines and warm fills, not shadow.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Squared editorial blocks |
| `micro` | 1px | Inline marks |
| `xs` | 2px | Badges, small spans |
| `sm` | 3px | Buttons, inputs |
| `md` | 4px | Cards |
| `lg` | 6px | Larger containers |
| `pill` | 9999px | Rare pill elements |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Soft-black fill, white text, 3px radius.
- **`button-secondary`** — White with hairline `{colors.border}`.
- **`button-accent`** — Muted-red fill for the rare emphasis CTA.

### Labels & Badges
- **`link-mono`** — CWL Mono, wide tracking, for nav and eyebrows.
- **`badge`** — Warm sand fill, mono label, 2px radius.

### Cards
- **`card`** — White, hairline border, 4px radius.
- **`card-warm`** — Sand-beige fill, no border.

### Inputs
- **`input`** — White, hairline border; focus deepens border to `{colors.ink}`.

### Navigation
- **`nav-bar`** — White header, CWL Mono links, soft hairline below.

## Do's and Don'ts

### Do
- Pair Z Serif (lyrical) with Z Sans (structural) and CWL Mono (labels)
- Keep the canvas near-white and ink soft (`{colors.ink}`, not pure black)
- Use warm neutrals (`{colors.surface-warm}`) to add warmth without color
- Ration the accent red to a single emphasis per view
- Keep radii near zero (1–4px) for printed-page geometry
- Let whitespace and hairlines do the separating

### Don't
- Don't introduce heavy bold weights — stay 300–500
- Don't use color decoratively; the red is for emphasis only
- Don't add shadows or large radii — the system is flat and squared
- Don't crowd the page; whitespace is the design
- Don't set body text in the mono — mono is for labels and captions

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced section gaps |
| Tablet | 600–1024px | Wider measure, retained editorial spacing |
| Desktop | >1024px | Full centered measure, maximum whitespace |

### Collapsing Strategy
- Display serif scales down but keeps tight tracking
- Section spacing (`{spacing.4xl}`) compresses toward `{spacing.2xl}` on mobile
- Navigation mono links collapse to a menu
- Warm panels remain full-bleed across sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Pure White `{colors.background}`
- Heading/body text: Soft Black `{colors.ink}`
- Secondary text: Gray 600 `{colors.gray-600}`
- Warm panel: `{colors.surface-warm}`
- Accent (emphasis only): `{colors.accent}`
- Border: `{colors.border}`

### Example Component Prompts
- "Editorial hero: near-white background. Lead in Z Serif 32px weight 400, letter-spacing -0.5px, `{colors.ink}`. Eyebrow above in CWL Mono 12px, letter-spacing 1.6px, `{colors.gray-500}`."
- "Card: white, 1px `{colors.border}`, 4px radius, 24px padding. Title in Z Sans 24px weight 500; body in Z Sans 16.5px weight 400, `{colors.gray-600}`."
- "Warm callout: `{colors.surface-warm}` fill, no border, 4px radius. Mono badge in CWL Mono uppercase tracking 1.6px."

### Iteration Guide
1. Serif for lyrical/display, sans for structure, mono for labels — never blur the roles
2. Soft black on near-white; reach for warm neutrals before any color
3. Accent red is rationed — at most one emphasis per view
4. Keep radii 1–4px and avoid shadow; the page is a printed spread
5. Weights live 300–500; contrast comes from family and size

---

## 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 Zissou. Brand names and trademarks belong to their respective owners.