---
version: alpha
name: Jacky Winter
description: Editorial gallery confidence — a warm paper-white canvas with near-black ink, a single bright vermilion accent, oversized grotesque display type for show titles, and quiet underline-only links that let the artwork carry the color.
colors:
  # Canvas + ink
  background: "#fbf9f4"
  surface: "#ffffff"
  surface-soft: "#f3f0e8"
  ink: "#1a1815"
  ink-pure: "#000000"
  ink-secondary: "#57534c"
  ink-muted: "#8b857a"

  # Accent — the single bright move
  primary: "#ef3e2c"
  accent-hover: "#cf2f1f"

  # Interactive
  link: "#1a1815"
  link-hover: "#ef3e2c"
  focus-ring: "#ef3e2c"

  # Neutral scale
  gray-200: "#e4e0d6"
  gray-300: "#d6d1c4"
  gray-400: "#b3ac9d"
  gray-600: "#6b665c"

  # Status label tints
  now-showing-bg: "#fdeae6"
  now-showing-text: "#cf2f1f"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#fbf9f4"

  # Border + divider
  border: "#e4e0d6"
  divider: "#1a1815"

typography:
  display-hero:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -1.6px
  display-title:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -1.0px
  section-heading:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.6px
  show-title:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.4px
  artist-name:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-large:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  label-caps:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.2px
  meta:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

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

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

components:
  # Primary CTA — solid vermilion
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  # Secondary — ink outline on paper
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  # Underline text link — the default link treatment
  link-underline:
    textColor: "{colors.link}"
    typography: "{typography.body}"

  # Status pill — "Now Showing"
  badge-now-showing:
    backgroundColor: "{colors.now-showing-bg}"
    textColor: "{colors.now-showing-text}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  # Exhibition card — image + title + artist + dates
  card-exhibition:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  # Show title inside card
  card-title:
    textColor: "{colors.ink}"
    typography: "{typography.show-title}"

  # Artist + date meta line
  card-meta:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.meta}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 32px
    borderColor: "{colors.border}"

  # Newsletter input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.ink}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.primary}"

  # Section divider rule
  divider-rule:
    backgroundColor: "{colors.divider}"
    height: 1px
    width: 100%
---

# Jacky Winter Design System

## Overview

Jacky Winter Gallery is the exhibition arm of Melbourne's long-running illustration agency, and its website behaves like a well-edited art magazine: a warm paper-white canvas (`{colors.background}`), confident near-black ink (`{colors.ink}`), and a single bright vermilion (`{colors.primary}`) used like a printer's spot color. The restraint is deliberate — the gallery's job is to frame artwork, so the chrome stays quiet and lets the show imagery carry all the saturation. Color is a tool, not decoration.

The typographic personality is grotesque and editorial. Show titles and section headings run large in a geometric grotesque (Space Grotesk as the closest faithful stand-in) with tight negative tracking, giving titles a poster-like presence. Body copy stays in the same family at a comfortable reading size with relaxed line-height, so an exhibition statement reads like long-form editorial rather than UI text. There is no serif, no script — one family doing both display and reading work, which keeps the system coherent and unfussy.

The structural signature is the flat, square-cornered grid. Nothing is rounded except the small status pills; cards, images, buttons and inputs all sit on hard 0px corners, reinforcing the gallery-wall, hung-rectangle feeling. Links are underline-only and inherit ink — no buttons-for-everything — and hover simply swaps the ink for vermilion. A hairline ink rule divides major sections, the same way a print layout uses a rule between departments.

**Key Characteristics:**
- Warm paper-white canvas (`{colors.background}`) instead of pure white — it reads like stock, not screen
- A single bright vermilion accent (`{colors.primary}`) used sparingly as a spot color
- One grotesque family for both oversized display titles and body reading
- Tight negative tracking on large titles (-1.6px at hero) for poster presence
- Square 0px corners everywhere except small status pills
- Underline-only text links that swap to vermilion on hover
- Hairline ink rules (`{colors.divider}`) separating sections, print-magazine style
- Status labels ("Now Showing") as small caps pills, the only soft-cornered element

## Colors

### Primary
- **Ink** (`{colors.ink}`): Headings, show titles, body text, nav. A warm near-black, never pure black.
- **Paper** (`{colors.background}`): The page canvas — a warm off-white that reads like art paper.
- **Surface White** (`{colors.surface}`): Pure white for image mats and input fields.

### Accent
- **Vermilion** (`{colors.primary}`): The single bright move — link hover, primary CTA, focus ring, active state. Used like a spot color, never as a fill across large areas.
- **Vermilion Hover** (`{colors.accent-hover}`): Darker pressed/hover state for the accent.

### Text Hierarchy
- **Ink Secondary** (`{colors.ink-secondary}`): Artist names, dates, supporting meta.
- **Ink Muted** (`{colors.ink-muted}`): Captions, fine print, disabled labels.

### Interactive
- **Link** (`{colors.link}`): Default underline link inherits ink.
- **Link Hover** (`{colors.link-hover}`): Swaps to vermilion on hover.
- **Focus Ring** (`{colors.focus-ring}`): Vermilion keyboard focus outline.

### Neutral Scale
- **Gray 200** (`{colors.gray-200}`): Borders, hairlines, card outlines.
- **Gray 300** (`{colors.gray-300}`): Stronger dividers, image frames.
- **Gray 400** (`{colors.gray-400}`): Placeholder text.
- **Gray 600** (`{colors.gray-600}`): Tertiary meta text.

### Status Tints
- **Now Showing Bg** (`{colors.now-showing-bg}`): Soft vermilion-tinted pill background.
- **Now Showing Text** (`{colors.now-showing-text}`): Pill label text.

### Structure
- **Border** (`{colors.border}`): Default 1px borders and card outlines.
- **Divider** (`{colors.divider}`): Full ink hairline rules between sections.

## Typography

### Font Family
- **Primary**: `Space Grotesk`, with fallbacks `Helvetica Neue, Arial, sans-serif`
- A single geometric grotesque carries both oversized display titles and body reading — no serif, no second family.

### 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` | 64px landing / feature title — poster presence |
| `display-title` | 44px exhibition page title |
| `section-heading` | 32px section titles (Now Showing, Past Shows) |
| `show-title` | 24px exhibition card title |
| `artist-name` | 18px artist line |
| `body-large` | 20px exhibition statements, lead copy |
| `body` | 17px standard reading text |
| `body-small` | 15px supporting copy |
| `nav-link` | 16px navigation + buttons |
| `label-caps` | 12px uppercase status / category labels |
| `meta` | 13px dates and fine print |

### Principles
- **One family, full range**: Space Grotesk does display and body work — coherence over contrast.
- **Tracking scales with size**: aggressive negative tracking at hero (-1.6px), relaxing to 0 at body.
- **Two weights**: 400 for reading, 500 for titles and labels. No heavy black, no italics for emphasis — size and color do that work.
- **Editorial measure**: body line-height stays generous (1.6–1.65) so statements read like print.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px; the scale opens up dramatically at the top (`{spacing.4xl}`–`{spacing.5xl}`) for gallery-wall breathing room between sections.

### Grid & Container
- Max content width: approximately 1280px
- Exhibition grids: 2–3 columns of cards, images dominant
- Generous vertical gutters between cards so each show reads as a hung piece
- Hairline ink rule (`{colors.divider}`) divides major sections

### Whitespace Philosophy
- **Gallery breathing room**: large vertical padding between sections (`{spacing.4xl}`+), images given air.
- **Image-first**: chrome recedes; the artwork thumbnail is the loudest element on every card.
- **Print rhythm**: ink hairlines and consistent gutters echo a magazine grid.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page background, text blocks, images on paper |
| Hairline (Level 1) | `1px solid {colors.border}` | Card outlines, input borders, dividers |
| Ink Rule (Level 1b) | `1px solid {colors.divider}` | Section separators |
| Focus (Accessibility) | `2px solid {colors.focus-ring}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: There is essentially no shadow system — the design is flat by intent. Separation comes from the paper-vs-white surface contrast, hairline rules, and whitespace, exactly like a gallery wall or a printed page. Images sit directly on paper with no frame chrome beyond an occasional hairline.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — cards, buttons, inputs, images |
| `xs` | 2px | Subtle inline elements |
| `sm` | 4px | Small containers if needed |
| `md` | 6px | Larger soft containers (rare) |
| `pill` | 9999px | Status labels only ("Now Showing") |

## Components

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

### Buttons
- **`button-primary`** — Solid vermilion, white text, square corners. The single saturated CTA.
- **`button-secondary`** — Paper background with a 1px ink border; hover inverts to ink fill.
- **`link-underline`** — The default link: underlined, inherits ink, swaps to vermilion on hover.

### Badges
- **`badge-now-showing`** — Small uppercase pill, soft vermilion tint, the only rounded element.

### Cards
- **`card-exhibition`** — Image-dominant card, square corners, hairline border optional. Title (`show-title`) over artist + date meta line.

### Inputs
- **`input`** — White field, 1px ink border, square corners. Focus border turns vermilion.

### Navigation
- **`nav-bar`** — Paper header, ink links in `nav-link`, underline-on-hover. Hairline bottom border.

### Dividers
- **`divider-rule`** — Full-width 1px ink rule between major sections.

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.background}`) — not pure white — as the default surface
- Reserve vermilion (`{colors.primary}`) for a single spot move: hover, CTA, focus
- Keep corners square (0px) everywhere except status pills
- Let exhibition imagery carry the saturation; keep chrome neutral
- Use underline-only links that swap to vermilion on hover
- Separate sections with ink hairline rules, print-magazine style
- Set titles large with tight negative tracking for poster presence

### Don't
- Don't add a second accent color — one vermilion is the whole palette
- Don't round cards, buttons, or images
- Don't introduce shadows or floating elevation — the system is flat
- Don't use pure black (`{colors.ink-pure}`) for body text — warm ink keeps it paper-like
- Don't fill large areas with vermilion — it is a spot, not a background
- Don't add a serif or second display family — one grotesque does everything

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column card stack, tighter section padding |
| Tablet | 600–1024px | 2-column exhibition grid |
| Desktop | 1024–1280px | 3-column grid, full whitespace |
| Large | >1280px | Centered max-width, generous margins |

### Touch Targets
- Buttons use 14px vertical padding for comfortable tap area
- Nav links spaced generously in the header
- Status pills sized for legibility, not tapping

### Collapsing Strategy
- Hero title scales down but keeps proportional negative tracking
- Navigation collapses to a menu toggle on mobile
- Exhibition grid: 3 → 2 → 1 column
- Section spacing compresses from `{spacing.4xl}` toward `{spacing.2xl}` on mobile

### Image Behavior
- Exhibition thumbnails served responsively (multiple widths, WebP, q=85)
- Images sit flush on paper with square corners at all sizes
- Aspect ratios preserved; images dominate each card

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Paper `{colors.background}`
- Heading + body text: Ink `{colors.ink}`
- Accent / CTA / hover: Vermilion `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border / hairline: `{colors.border}`
- Section rule: `{colors.divider}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts
- "Create a gallery landing hero on paper-white (`{colors.background}`). Title at 64px Space Grotesk weight 500, line-height 1.02, letter-spacing -1.6px, color `{colors.ink}`. Subtitle at 20px weight 400, `{colors.ink-secondary}`. A square-cornered vermilion CTA (`{colors.primary}`, white text, 14px 28px padding)."
- "Design an exhibition card: white image mat, square corners, optional 1px `{colors.border}` outline. Show title 24px Space Grotesk weight 500 in `{colors.ink}`, artist + date meta line 13px in `{colors.ink-secondary}`. A 'Now Showing' pill: `{colors.now-showing-bg}` bg, `{colors.now-showing-text}` text, 9999px radius, 4px 12px padding, 12px uppercase weight 500."
- "Build a newsletter input: white field, 1px solid `{colors.ink}` border, 0px radius, focus border `{colors.primary}`. Square vermilion subscribe button next to it."
- "Add a section divider: full-width 1px solid `{colors.divider}` rule with `{spacing.4xl}` padding above and below."

### Iteration Guide
1. Default surface is warm paper, not white — the off-white is the identity
2. Vermilion is a spot color — one move per view, never a large fill
3. Square corners everywhere; only status pills are rounded
4. One family (Space Grotesk): 500 for titles/labels, 400 for reading
5. Negative tracking scales with size — strongest at hero, none at body
6. Depth is flat — separation is paper-vs-white, hairlines, and whitespace

---

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