---
version: alpha
name: 099 Supply
description: Stark monospace minimalism — a black-on-white (and white-on-black) catalog grid where everything is set in a single mono typeface, corners are sharp, chrome is invisible, and dual-state hover imagery does all the talking. Interface as terminal printout.
colors:
  # Canvas + ink (light mode is the default reading surface)
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f5f5f5"
  ink: "#0a0a0a"
  ink-pure: "#000000"

  # Inverse (dark catalog surface — the brand ships both)
  ink-inverse: "#ffffff"
  surface-inverse: "#0a0a0a"

  # Muted / secondary ink
  ink-secondary: "#6b6b6b"
  ink-muted: "#999999"

  # Hairlines + dividers
  border: "#e5e5e5"
  border-strong: "#0a0a0a"

  # Single restrained interactive accent
  primary: "#0a0a0a"
  link: "#0a0a0a"
  link-hover: "#6b6b6b"

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

typography:
  brand-mark:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.5px
  display:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -0.5px
  heading:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  body:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-small:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.46
    letterSpacing: 0px
  label:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.5px
  caption:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.5px

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

rounded:
  none: 0px
  micro: 2px
  xs: 4px
  pill: 9999px

components:
  # Plain-text link (the primary interactive primitive)
  link:
    textColor: "{colors.link}"
    typography: "{typography.body}"
  link-hover:
    textColor: "{colors.link-hover}"
    typography: "{typography.body}"

  # Solid ink button — used sparingly for the one real CTA
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 10px 20px

  # Outline / ghost button — hairline box, text inside
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 10px 20px
    borderColor: "{colors.border-strong}"

  # Catalog product card — borderless, image-led, square corners
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 0px

  # Caption row under a card (name / action links)
  card-caption:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    padding: 8px 0px

  # Hairline-bottom top bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.brand-mark}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  # Text input — single hairline, square
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 12px
    borderColor: "{colors.border-strong}"

  # Mono label / tag
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 2px 6px

  # Inverse surface block (the dark catalog mode)
  surface-inverse-block:
    backgroundColor: "{colors.surface-inverse}"
    textColor: "{colors.ink-inverse}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 24px
---

# 099 Supply Design System

## Overview

099 Supply reads like a catalog printed from a terminal. The entire interface is set in a single monospace typeface, laid on a pure-white canvas with near-black ink, and stripped of every conventional UI affordance — no shadows, no rounded corners, no decorative color. What's left is a tight grid of product thumbnails and plain-text links, where the typography itself becomes the brand. The numeric mark "099" and the counting sequences scattered through the page lean into the monospace conceit: every glyph occupies the same cell, so the layout aligns like a fixed-width printout.

The system is fundamentally achromatic. There is no accent hue — `{colors.ink}` on `{colors.background}` carries everything, and the only "color" event is the inversion to a dark catalog surface (`{colors.surface-inverse}` with `{colors.ink-inverse}` text). The brand ships paired light/dark product imagery for exactly this reason, so a hoodie can sit on white or on black and still feel native to the system. Restraint is the entire identity; the design is loud precisely because it refuses to decorate.

Interaction is handled almost entirely by plain text and by dual-state imagery. Links are bare words that shift to a muted gray (`{colors.link-hover}`) on hover; product tiles swap to a second image asset on hover rather than animating or lifting. There is no card chrome to speak of — products bleed edge to edge in their cells, captioned by a small mono label below. Where a real boxed control is needed (a CTA, an input), it's a hairline rectangle with sharp `{rounded.none}` corners, never a pill or a soft card.

This is minimalism as a system constraint rather than a style choice. Because every text element shares one mono family and one of two weights, hierarchy comes from size and spacing alone. The grid does the structural work; whitespace does the breathing; the monospace does the talking.

**Key Characteristics:**
- A single monospace typeface across the entire interface — brand, headings, body, captions
- Achromatic black-on-white with a deliberate inversion to white-on-black (dual catalog modes)
- Zero border-radius everywhere — sharp corners are the rule (`{rounded.none}`)
- No shadows, no card chrome — products bleed edge-to-edge in their grid cells
- Dual-state hover imagery (separate light/dark and hover asset swaps) instead of motion or elevation
- Plain-text links as the dominant interactive primitive; muted-gray hover
- Hairline dividers (`{colors.border}`) and the occasional hairline box are the only structural lines
- Mono numeric/counting motifs as a recurring brand signature

## Colors

### Primary
- **Ink** (`{colors.ink}`): Near-black primary text, links, the brand mark, and strong hairlines. Carries nearly all contrast.
- **Background** (`{colors.background}`): Pure white default canvas and card surface.
- **True Black** (`{colors.ink-pure}`): Reserved for the deepest fills where absolute black is wanted.

### Inverse Surface
- **Surface Inverse** (`{colors.surface-inverse}`): The dark catalog mode background — the brand's only "second theme."
- **Ink Inverse** (`{colors.ink-inverse}`): White text on the dark surface.

### Secondary Ink
- **Ink Secondary** (`{colors.ink-secondary}`): Captions, secondary labels, hover state on links.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary metadata, placeholder text, counting motifs at low emphasis.

### Hairlines
- **Border** (`{colors.border}`): Light dividers, nav underline, subtle separation.
- **Border Strong** (`{colors.border-strong}`): Hairline boxes on inputs and outline buttons (ink-weight).

### Interactive
- **Primary** (`{colors.primary}`): The single solid CTA fill (ink).
- **Link** (`{colors.link}`): Plain-text links — ink-colored, no underline by default.
- **Link Hover** (`{colors.link-hover}`): Muted gray shift on hover.

### Surface Tint
- **Surface Soft** (`{colors.surface-soft}`): Faint gray fill for mono badges/tags.

## Typography

### Font Family
- **Primary (and only)**: A monospace family — `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`. The site uses one fixed-width face for every role; the closest widely-available Google equivalent to its clean grotesque-mono character is JetBrains Mono.
- **OpenType Features**: Fixed advance width is the whole point — numerals align in columns, enabling the counting-sequence motifs.

### Hierarchy

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

| Token | Use |
|---|---|
| `brand-mark` | The "099 SUPPLY" wordmark in the nav |
| `display` | Largest page/section statements |
| `heading` | Section and product-group headings |
| `body` | Standard reading text and links |
| `body-small` | Card captions, dense rows |
| `label` | Button text, uppercase-ish mono labels |
| `caption` | Smallest metadata, counting sequences |

### Principles
- **One family, two weights**: Everything is monospace at weight 400 (read) or 500 (announce). Hierarchy is size and spacing, not typeface or color.
- **Tracking is near-neutral**: Mono already spaces evenly; only the display tier pulls slightly negative (`-0.5px`) and small labels add a touch of positive tracking (`0.5px`) for legibility.
- **Numerals as identity**: The fixed advance width is used expressively — counting strings and the numeric "099" mark read as brand, not filler.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is roughly 8px, scaling up to generous catalog gutters (`{spacing.3xl}`–`{spacing.4xl}`) between major sections.

### Grid & Container
- A multi-column thumbnail grid is the core layout — uniform cells, consistent gutter, products bleeding edge-to-edge within each cell.
- Captions sit directly beneath each tile in `{typography.body-small}` / `{typography.caption}`.
- Top bar: brand mark left, plain-text nav links right, separated from the grid by a `{colors.border}` hairline.

### Whitespace Philosophy
- **Catalog breathing room**: Whitespace separates rows and sections; there are no boxes or shadows to do that work.
- **Edge-to-edge imagery**: Product images fill their cells with no inner padding — the grid gutter is the only gap.
- **Quiet chrome**: The only persistent line on the page is the nav hairline; everything else floats on white.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Everything by default — grid cells, text |
| Hairline | `1px solid {colors.border}` | Nav underline, dividers |
| Hairline Box | `1px solid {colors.border-strong}` | Inputs, outline buttons |

**Depth Philosophy**: There is essentially no elevation system. The design refuses shadows and gradients entirely; separation comes from whitespace and the occasional ink hairline. "Depth" on product tiles is faked by the dual-state image swap on hover, not by lifting the element.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | The default — sharp corners on cards, buttons, inputs, images |
| `micro` | 2px | Rare softening if ever needed |
| `xs` | 4px | Reserved |
| `pill` | 9999px | Reserved (effectively unused — pills contradict the system) |

## Components

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

### Links
- **`link`** — The primary interactive primitive. Bare ink-colored mono text, no underline by default, shifts to `{colors.link-hover}` on hover.

### Buttons
- **`button-primary`** — Solid ink fill, white mono label, square corners. Used sparingly for the one real CTA.
- **`button-outline`** — Hairline ink box, ink text, square corners. The ghost alternative.

### Cards
- **`card`** — Borderless, image-led, `{rounded.none}`. No padding; the image fills the cell.
- **`card-caption`** — Small mono caption row beneath the tile (name + action links like "Customize" / "Preview").

### Inputs
- **`input`** — White surface, single `{colors.border-strong}` hairline, square corners, mono text.

### Navigation
- **`nav-bar`** — Brand mark left, plain-text links right, `{colors.border}` hairline bottom.

### Distinctive Components
- **Dual-state product tile**: Hover swaps to a second image asset (e.g. a hover render or a light↔dark pairing) instead of animating or elevating.
- **Inverse block**: A full white-on-black surface (`{components.surface-inverse-block}`) — the brand's dark catalog mode, shipped as a first-class surface rather than a theme toggle afterthought.
- **Mono badge**: Faint-gray fixed-width tag for metadata.

## Do's and Don'ts

### Do
- Use one monospace family for every text role — brand, headings, body, captions
- Keep the palette achromatic: ink on white, with the dark inverse as the only "second color"
- Use `{rounded.none}` — sharp corners everywhere
- Let product imagery bleed edge-to-edge in grid cells with no card chrome
- Use plain-text links with a muted-gray hover as the default interactive element
- Use dual-state hover imagery instead of shadows, lifts, or motion
- Ship paired light/dark product assets so items sit native on either surface

### Don't
- Don't introduce a second typeface — the mono monoculture is the identity
- Don't add accent colors; the system has no hue
- Don't round corners or add pills — square is the rule
- Don't use drop shadows, gradients, or elevation to separate elements — use whitespace and hairlines
- Don't box product tiles in cards — they bleed into the grid
- Don't underline links by default; rely on the ink color and hover shift
- Don't fight the fixed advance width — lean into numeral alignment as a feature

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single or two-column grid, tighter gutters |
| Tablet | 600–1024px | 2–3 column thumbnail grid |
| Desktop | 1024–1440px | Full multi-column catalog grid |
| Large | >1440px | Wider gutters, centered max content width |

### Touch Targets
- Plain-text links get adequate vertical spacing for tapping
- Buttons use comfortable mono-label padding (10px vertical)
- Grid cells are large tap targets; hover swap degrades gracefully to the default image on touch

### Collapsing Strategy
- Catalog grid: multi-column → 2-column → single column
- Nav: brand mark + links stay inline; links may stack or condense on the smallest widths
- Section spacing compresses from `{spacing.4xl}` toward `{spacing.2xl}` on mobile

### Image Behavior
- Product images maintain aspect ratio and edge-to-edge cell fill at all sizes
- Dual-state hover assets are desktop-first; touch shows the primary asset
- Light/dark paired assets follow the active surface

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Ink `{colors.ink}`
- Background: Pure White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink `{colors.ink}` (secondary uses `{colors.ink-secondary}`)
- Divider: `1px solid {colors.border}`
- Link: Ink `{colors.link}`, hover `{colors.link-hover}`
- Inverse surface: `{colors.surface-inverse}` with `{colors.ink-inverse}` text

### Example Component Prompts
- "Build a catalog grid: pure white background, multi-column thumbnail grid, products bleeding edge-to-edge in each cell, sharp corners, no shadows. Caption each tile below in 13px JetBrains Mono, color `{colors.ink-secondary}`. On hover, swap to a second image asset and shift caption links to `{colors.link-hover}`."
- "Create a nav bar: white background, '099 SUPPLY' wordmark left in 14px JetBrains Mono weight 500 with 0.5px tracking, plain-text links right in ink, `1px solid {colors.border}` bottom hairline, 16px/24px padding."
- "Design a primary button: solid `{colors.ink}` fill, white text, 12px JetBrains Mono label, `{rounded.none}` square corners, 10px 20px padding. Ghost variant: white fill, ink text, `1px solid {colors.border-strong}` hairline box."
- "Build an inverse block: full `{colors.surface-inverse}` background, `{colors.ink-inverse}` mono text, square corners — the dark catalog surface."

### Iteration Guide
1. Everything is monospace — never reach for a second family
2. Corners are always square (`{rounded.none}`); pills and rounded cards break the system
3. No shadows or gradients — separate with whitespace and ink hairlines only
4. Color is binary: ink-on-white or white-on-ink; there is no accent hue
5. Hover = image swap + muted-gray link, never lift or motion
6. Lean into fixed-width numerals as a brand signature

---

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