---
version: alpha
name: Unpack
description: Editorial design-gallery minimalism — PP Neue Montreal display paired with Geist, a near-monochrome black/white canvas, tight 10px (0.625rem) base radius, and gallery-grade whitespace that lets the showcased work carry all the color.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f9fafb"
  ink: "#181818"
  ink-pure: "#000000"
  ink-secondary: "#383838"
  ink-muted: "#2a2a2a"

  # Accent — editorial, used sparingly
  primary: "#181818"
  accent-green: "#0d542b"

  # Neutral scale
  gray-900: "#181818"
  gray-800: "#242424"
  gray-700: "#383838"
  gray-100: "#f9fafb"

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

typography:
  display-hero:
    fontFamily: "ppNeueMontreal, Geist, ui-sans-serif, system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.6px
  display-large:
    fontFamily: "ppNeueMontreal, Geist, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -1.2px
  section-heading:
    fontFamily: "ppNeueMontreal, Geist, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.8px
  card-title:
    fontFamily: "ppNeueMontreal, Geist, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Geist, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Geist, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Geist, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  mono-label:
    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.2px

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

rounded:
  none: 0px
  micro: 3px
  xs: 4px
  sm: 8px
  md: 10px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
    borderColor: "{colors.gray-100}"

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 16px
    borderColor: "{colors.gray-100}"

  card-showcase:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.gray-100}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
    borderColor: "{colors.gray-100}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.gray-100}"
---

# Unpack Design System

## Overview

Unpack is a curated gallery of digital design work, and its own interface follows the cardinal rule of any good gallery: the walls are quiet so the art can speak. The canvas is pure white (`{colors.background}`) with near-black ink (`{colors.ink}`) — a deliberate `#181818` rather than true black, softening the contrast just enough to read as editorial rather than stark. The showcased screenshots and case studies bring every hue on the page; the chrome stays achromatic and gets out of the way.

The typographic pairing is the system's signature. Headlines run in PP Neue Montreal, a contemporary grotesque with a confident, slightly condensed personality and gentle negative tracking that reads as curated and design-literate. Body and UI text fall to Geist, the neutral workhorse, with Geist Mono reserved for small labels and metadata. This split — an expressive display face over a neutral reading face — is exactly how an editorial product signals taste without shouting.

Geometry is restrained and consistent. The base radius is 10px (`0.625rem`), nudging up to 16px (`1rem`) for larger surfaces and showcase cards, with a tight 3px reserved for inline chrome. Borders, where they appear at all, are hairline neutral tints (`{colors.surface-soft}`) — the page leans on whitespace and alignment for structure, not lines and boxes. Spacing is generous and rhythmic, giving each case study room to be considered on its own.

**Key Characteristics:**
- Near-monochrome black/white canvas — `{colors.ink}` (#181818), not pure black, over pure white
- PP Neue Montreal for display headlines, Geist for body/UI, Geist Mono for labels
- Tight, consistent radius system anchored at 10px (`{rounded.md}`)
- Gallery-grade whitespace; structure from alignment, not borders
- Hairline neutral tints (`{colors.surface-soft}`) instead of hard CSS borders
- Editorial restraint — color comes from showcased work, never the chrome
- Mono labels for categories and metadata

## Colors

### Primary
- **Unpack Ink** (`{colors.ink}`): Primary text, headings, dark CTA fill. Near-black #181818 for editorial softness.
- **Pure White** (`{colors.background}`): Page background, card surfaces, button text on dark.
- **True Black** (`{colors.ink-pure}`): Reserved for maximum-contrast moments.

### Ink Scale
- **Ink Secondary** (`{colors.ink-secondary}`): Secondary text, hover fill on dark CTA. (#383838)
- **Ink Muted** (`{colors.ink-muted}`): Muted body copy. (#2a2a2a)
- **Gray 800** (`{colors.gray-800}`): Deep neutral surfaces. (#242424)

### Surface
- **Surface Soft** (`{colors.surface-soft}`): Subtle card tint and hairline border substitute. (#f9fafb)

### Accent
- **Accent Green** (`{colors.accent-green}`): Rare positive/status accent — used sparingly, never as chrome.

## Typography

### Font Family
- **Display**: `PP Neue Montreal`, fallback `Geist, sans-serif`
- **Body / UI**: `Geist`, fallback `ui-sans-serif, system-ui, sans-serif`
- **Monospace**: `Geist Mono`, fallback `ui-monospace, SFMono-Regular, Menlo, monospace`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 56px PP Neue Montreal hero headline |
| `display-large` | Large section openers |
| `section-heading` | Feature/section titles |
| `card-title` | Case-study and card headings |
| `body-large` | Intros, lead paragraphs (Geist) |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, nav |
| `button-ui` | Buttons, links |
| `caption` | Metadata, small labels |
| `mono-label` | Category tags, technical labels (Geist Mono) |

### Principles
- **Expressive over neutral**: PP Neue Montreal announces; Geist reads. Never invert the roles.
- **Negative tracking on display**: Headlines carry gentle negative letter-spacing (-1.6px at 56px) for a curated, condensed feel.
- **Mono for taxonomy**: Geist Mono labels mark categories and metadata — the editorial filing system.
- **Weight discipline**: 500 for display and UI, 400 for reading. Bold is avoided.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps to `{spacing.3xl}` (64px) and `{spacing.4xl}` (96px) for gallery whitespace between sections.

### Grid & Container
- Centered content column with generous gutters
- Showcase grid: responsive 2–3 column case-study cards
- Hero: single-column, left or centered, with heavy top padding

### Whitespace Philosophy
- **Gallery emptiness**: Large vertical rhythm between sections lets each piece of work breathe.
- **Structure without lines**: Alignment and spacing carry hierarchy; borders are hairline tints at most.
- **Color comes from the content**: The chrome stays monochrome so showcased work supplies all the saturation.

## Components

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

### Buttons
- **`button-primary`** — Unpack Ink fill, white text, `{rounded.md}`. The default CTA.
- **`button-secondary`** — White surface with hairline `{colors.surface-soft}` border.

### Pills & Badges
- **`badge`** — Soft-tint surface, mono label text, full pill. Used for category tags.

### Cards
- **`card`** — White surface, `{rounded.lg}`, hairline border, generous internal padding.
- **`card-showcase`** — Soft-tint surface holding a full-bleed screenshot; chrome stays neutral so the work carries color.

### Inputs
- **`input`** — White surface, hairline border, `{rounded.sm}`.

### Navigation
- **`nav-bar`** — White header, Geist 14px weight 500 links, hairline bottom border.

## Do's and Don'ts

### Do
- Use PP Neue Montreal for headlines and Geist for everything else
- Keep the chrome monochrome — let showcased work supply color
- Use `{colors.ink}` (#181818) rather than pure black for editorial softness
- Anchor radii at `{rounded.md}` (10px); use `{rounded.lg}` for larger surfaces
- Lean on whitespace and alignment for structure
- Use Geist Mono for category and metadata labels

### Don't
- Don't introduce brand colors into UI chrome
- Don't swap the display/body roles of the two fonts
- Don't use heavy CSS borders — hairline tints only
- Don't crowd sections — gallery whitespace is the point
- Don't use bold weights; 500 is the display/UI maximum

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single-column stack, reduced padding |
| Tablet | 640–1024px | 2-column showcase grid |
| Desktop | 1024–1440px | Full 3-column grid, max content width |
| Large | >1440px | Centered with generous margins |

### Collapsing Strategy
- Hero: 56px display scales down, keeps negative tracking proportionally
- Showcase grid: 3-column → 2-column → single column
- Navigation: horizontal links → menu toggle
- Section spacing: 96px → 48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Unpack Ink `{colors.ink}`
- Background: Pure White `{colors.background}`
- Heading text: Unpack Ink `{colors.ink}`
- Body text: Ink Muted `{colors.ink-muted}`
- Border: hairline `{colors.surface-soft}`

### Example Component Prompts
- "Hero on white: headline in PP Neue Montreal 56px weight 500, letter-spacing -1.6px, color `{colors.ink}`. Subtitle in Geist 18px weight 400, color `{colors.ink-muted}`. Dark CTA (`{colors.ink}`, 10px radius, 10px 20px padding)."
- "Showcase card: soft-tint `{colors.surface-soft}` surface, 16px radius, full-bleed screenshot, mono category badge (`{typography.mono-label}`, pill, soft-tint bg)."
- "Navigation: white header, Geist 14px weight 500 links in `{colors.ink}`, hairline `{colors.surface-soft}` bottom border."

### Iteration Guide
1. Keep chrome monochrome — color belongs to the showcased work
2. PP Neue Montreal announces, Geist reads — never invert
3. Anchor radii at 10px; 16px for large surfaces
4. Hairline tints, never hard borders
5. Geist Mono uppercase-ish labels for taxonomy

---

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