---
version: alpha
name: "Supreme"
description: "Anti-design retail system for Supreme — pure black canvas, Courier New at every size, and a single red box logo as the only decorative object."

colors:
  # Surface / canvas
  background: "#000000"
  surface: "#0a0a0a"

  # Text / ink
  ink: "#ffffff"
  ink-secondary: "#e0e0e0"
  on-background: "#ffffff"
  on-surface: "#ffffff"

  # Brand accent — the box logo red, confirmed in hover/focus deltas
  primary: "#ed1c24"
  on-primary: "#ffffff"
  # was rgba(0,0,0,0) → rgb(255,0,0) from interactive delta — Google format requires hex
  primary-hover: "#ff0000"

  # Navigation / interaction states
  # was rgba(0,0,0,0) transparent → rgb(255,0,0) on hover — Google format requires hex; flattened red
  nav-hover-bg: "#ed1c24"
  nav-hover-text: "#ffffff"

  # Structural
  border: "#1a1a1a"
  border-subtle: "#111111"
  # was rgba(255,255,255,0.08) — Google format requires hex; flattened on black
  border-ghost: "#161616"
  focus-ring: "#ed1c24"

  # Shadow
  # was rgba(0,0,0,0.8) — Google format requires hex; deepened near-black
  shadow-soft: "#080808"

typography:
  display-hero:
    fontFamily: "Courier New, Courier, monospace"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  display:
    fontFamily: "Courier New, Courier, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-section:
    fontFamily: "Courier New, Courier, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Courier New, Courier, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: 0px
  body-large:
    fontFamily: "Courier New, Courier, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: 0px
  body:
    fontFamily: "Courier New, Courier, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: 0px
  nav-link:
    fontFamily: "Courier New, Courier, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: 0px
  button-ui:
    fontFamily: "Courier New, Courier, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Courier New, Courier, monospace"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  timestamp:
    fontFamily: "Courier New, Courier, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px

spacing:
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  xl: 40px
  2xl: 48px
  3xl: 128px

rounded:
  none: 0px
  sm: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  button-ghost-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  nav-item:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 2px 0px
  nav-item-hover:
    backgroundColor: "{colors.nav-hover-bg}"
    textColor: "{colors.nav-hover-text}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 2px 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 2px 4px
  logo-box:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.none}"
    padding: 8px 16px
---

# Supreme Design System

## Overview

Supreme's website is not a failure of design — it is design as refusal. The canvas is pure black (`{colors.background}`) from edge to edge, no surface lift, no gradient, no textured overlay. A single centered object breaks the void: the box logo in `{colors.primary}` red, "Supreme" set in Futura Bold Italic inside a flat red rectangle, an image so reproduced that seeing it here on your screen still registers as a physical encounter. Below the logo, Courier New lists the navigation vertically in lowercase white. The date and time in New York city blink beneath the logo like a dispatch from the brand's SoHo HQ. This is a site that has refused to update its design language for decades and, by doing so, has made that refusal into the most powerful design decision in streetwear.

The typography is entirely Courier New, a monospaced system font available on every device since the early days of computing. This is not a budget constraint. Supreme is one of the most financially powerful brands in fashion. Courier New is a statement: the site looks like it was built in 1994, and it will look the same in 2034. The type scale runs from 20px for the timestamp headline down to 10px for captions — all in the same weight (400), all in the same family. The system doesn't differentiate by typeface or weight. Hierarchy is created solely through size and the spatial structure of a list.

The only colour in the entire interface is the box logo red (`{colors.primary}`). It appears in three places: the logo box, the footer "terms" badge, and the navigation link hover state — where each link's background flips from transparent to saturated red as the cursor passes over it. That hover interaction is Supreme's entire UI animation language. No transitions, no easing curves, no motion. The color change is instant. The effect is confrontational, almost violent — which is precisely the point.

**Key Characteristics:**
- Pure black canvas (`{colors.background}`) with no surface hierarchy — the void is the design
- Courier New weight 400 at every text size — monospaced refusal of typographic sophistication
- Single-column centered layout at all viewport sizes — anti-grid, monolithic
- The box logo (`{components.logo-box}`) in `{colors.primary}` red is the only decorative object on the page
- Navigation: vertical lowercase list, left-aligned at center, with instant red-fill hover (`{colors.nav-hover-bg}`)
- Real-time New York timestamp displayed below the logo — `{typography.timestamp}` at 13px
- No border-radius anywhere — `{rounded.none}` across every element; the system is purely rectilinear
- No shadows, no gradients, no animations, no scroll effects
- Social icons rendered as silhouettes in `{colors.ink}` white on the black canvas
- Footer "terms" label uses the same `{colors.primary}` red box treatment as the wordmark — the only element that inherits the logo's form language
- Breakpoints at 767px/768px (mobile), 800px, 960px, 1024px, 1728px — a surprisingly dense scale for what looks like a brutalist single-column page

## Colors

### Primary
- **Pure Black** (`{colors.background}`): The full canvas. Not dark gray — absolute zero. The site reads as a terminal or a monolith. Every page and every state begins here.
- **Near-Black Surface** (`{colors.surface}`): An almost-imperceptible lift for interactive hover states on product cards. Black leaning so far it registers only at the peripheral edge of perception.

### Brand Accent
- **Box Logo Red** (`{colors.primary}`): The only chromatic colour in the system. Applied to the wordmark box, the footer "terms" badge, and the full navigation link hover state. The red is classic Supreme: warm, saturated, derived from `#ed1c24` — closer to fire-engine than Ferrari. It is both the brand's most iconic asset and its only UI affordance colour.
- **Hover Red** (`{colors.primary-hover}`): The nav hover state red at full `#ff0000` saturation, as captured in the interactive deltas. /* estimated — confirmed from hover/focus color-shift delta */

### Text / Ink
- **Pure White** (`{colors.ink}`): All navigation links, the timestamp, body copy, social icon fills. Maximum contrast on the black canvas.
- **Light Gray** (`{colors.ink-secondary}`): Secondary supporting text — used for form labels, mailing list fine print, accessibility-adjacent copy that shouldn't compete with primary navigation.

### Structural
- **Navigation Hover Background** (`{colors.nav-hover-bg}`): The red fill that floods each navigation link row on hover. This is the single most visible interactive state in the entire system.
- **Focus Ring** (`{colors.focus-ring}`): Red outline on focused interactive elements, consistent with the brand accent.
- **Border** (`{colors.border}`): Near-black structural edge — barely visible against the canvas, used for input outlines and footer separators.

## Typography

### Font Family
- **Primary**: `Courier New`, with fallbacks: `Courier`, `monospace`
- **OpenType Features**: `"liga"` is active on heading-level text — standard ligature substitution enabled, though Courier New's ligature set is minimal.

*Note: Courier New is a system font available universally. No self-hosted files, no Google Fonts, no Adobe Fonts. The brand's intentional use of the OS default monospace typeface is itself a design statement. For implementations where exact fidelity is required, `Courier Prime` on Google Fonts is the closest web-optimized match.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Timestamp beneath the box logo (20px) — the largest text on the page |
| `display` | Section headings, product category labels in shop views |
| `heading-section` | Navigation link labels, sub-category headers |
| `heading-sub` | Product names in listing pages |
| `body-large` | Extended descriptions, editorial copy |
| `body` | Standard UI text, link labels |
| `nav-link` | The primary navigation list — news, shop, random, about, stores, contact, mailing list |
| `button-ui` | Form submission labels, interactive text in shop flow |
| `caption` | Footer legal text, image credits, size labels |
| `timestamp` | NYC live clock beneath the logo |

### Principles
- One typeface, one weight, one colour — all hierarchy is spatial, not typographic
- Monospace character width means text never reflows unexpectedly — every character occupies identical horizontal space, creating a grid-like column alignment
- No uppercase, no tracking manipulation — the copy sits at natural Courier New defaults
- 1.08 line-height on multi-line text is tighter than standard reading — it reads like terminal output, not editorial prose
- Courier New's perceived age is the point: every other fashion brand employs editorial grotesques or custom typefaces; Supreme's system-font choice registers as aggressive indifference

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 2px (dominant by count in extraction — 60 instances at 2px).

The spacing personality is maximally compressed. 2px governs the tightest gutters; the 128px far end of the scale handles the negative space around the box logo that gives it room to breathe on the black canvas. The layout is not generous — it is deliberate. Space is not used to signal luxury; it is used to isolate the logo and let the navigation list stand without distraction.

### Grid & Container
- Layout: single centered column at all viewports — no grid, no multi-column layout on the homepage
- Logo box centered horizontally at 144×43.5px (from extraction data — wordmark in header context)
- Navigation list: left-aligned, centered as a block, running vertically in 13px Courier New
- Max content width: approximately 800px before content relaxes to viewport edges in shop views
- Footer: centered social icons row, then a centered legal links strip

### Whitespace Philosophy
- The void around the box logo is the most important whitespace decision in the system — enormous negative space above and below the mark makes it read as a poster, not a navbar
- Navigation list has minimal inter-item spacing (2px base) — the links stack densely, like a printout
- The gap between logo and navigation is the only "generous" space on the homepage — approximately 40–48px

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Every element — the entire site is flat |
| Focus Ring | `1px solid {colors.focus-ring}` | Form inputs on keyboard focus |

**Shadow Philosophy**: Supreme has no elevation system. The site is two-dimensional — a poster laid flat. There are no cards that lift, no modals that float, no dropdowns with shadows. The design philosophy cannot accommodate depth because depth implies hierarchy, and Supreme's visual stance is that the box logo and the navigation are equals, both sitting on the same plane of absolute black. The only visual depth is metaphorical: the red box logo appears to project off the page because it is the single chromatic element in a monochrome environment.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every element — nav links, logo box, inputs, buttons, footer badges |
| `sm` | 2px | Reserved for social icon containers where platform icons carry their own border conventions |
| `pill` | 9999px | Not used in the current system |

The system is entirely rectilinear. No border-radius was captured by dembrandt — zero values in the `borderRadius` extraction block. The box logo is a perfect rectangle. The nav hover state is a perfect rectangle. The footer "terms" badge is a perfect rectangle. Rectangles are the only shape. This consistency is the system's single concession to formal discipline.

## Components

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

### Button variants

- **`button-primary`** — Flat red fill (`{colors.primary}`), white Courier New text, zero radius, minimal 4px/8px padding. Used for add-to-cart and checkout actions in the shop flow. No shadow, no hover animation delay — state change is instant.
- **`button-ghost`** — Transparent on black, white text. On hover, floods to `{colors.primary}` red instantly, matching the nav interaction pattern. The ghost-to-red fill is the system's universal hover language.

### Cards

Product cards inherit the `{components.card}` pattern: pure black fill, no border, no radius, no shadow. Photography sits directly on the black canvas. On hover, the card background shifts to `{colors.surface}` — a near-imperceptible darkening that signals focus without disrupting the flat plane. The red accent never appears on product cards; the only chromatic element remains the box logo.

### Inputs

Form inputs on the mailing list and shop pages use `{components.input}`: black fill, 1px `{colors.border}` outline, Courier New 13px, zero radius. On focus, the border sharpens to `{colors.focus-ring}` red — consistent with the brand's single-colour accent doctrine. Submit buttons adjacent to inputs use `{components.button-primary}`.

### Badges / Tags

The footer "terms" badge is the only badge in the system outside the box logo itself: `{colors.primary}` red fill, white Courier New 10px, zero radius. It applies the logo box treatment at micro-scale — the same red rectangle that identifies the brand appears on the legal text as an emphatic signal of which links carry consequences. A precise, dark-humoured detail.

### Navigation

The vertical navigation list is the homepage's primary content. Nine links in 13px Courier New — news, spring/summer 2026 preview, spring/summer 2026 lookbook, shop, random, about, stores, contact, mailing list — stack flush left in a centered column. Default state: `{colors.ink}` text on transparent black. Hover state: full `{colors.nav-hover-bg}` red flood fills the link row; text shifts to `{colors.nav-hover-text}` white. The transition is instantaneous — no easing, no duration. Below the nav: social platform icons (Instagram, YouTube, Facebook, Spotify, Line, Weibo, WeChat) rendered in white silhouette.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the absolute canvas — do not introduce off-black, charcoal, or dark gray as a "softer" alternative
- Apply `{colors.primary}` exclusively to the box logo, the nav hover state, and the footer "terms" badge — preserve its extreme scarcity
- Set all text in `{typography.body}` or its size variants — Courier New weight 400, always, no exceptions for headings
- Keep all corners at `{rounded.none}` — zero radius is a non-negotiable system constraint
- Let the nav hover state be instantaneous — no transition-duration, no easing curve; the snap is part of the brand character
- Use the vertical list format for primary navigation — no horizontal nav bar, no mega-menu, no dropdown panels
- Display the NYC timestamp below the logo when building the homepage shell — it is a functional brand element, not decoration
- Reserve generous negative space around the box logo — the isolation is load-bearing

### Don't
- Don't introduce a second typeface alongside Courier New — not even for the logo wordmark; Futura Bold Italic lives inside the box logo as a graphic, not a system font choice
- Don't add border-radius to any element — even 1px or 2px would visually contradict the system
- Don't use `{colors.primary}` red outside the three sanctioned contexts; adding it to CTAs, labels, or decorative elements dilutes the box logo's authority
- Don't add hover transitions or animation easing — the instant state change is the interaction grammar
- Don't introduce elevation: no drop shadows, no cards that lift, no layered surfaces
- Don't use a multi-column layout for primary navigation — the vertical list is the stance
- Don't use uppercase or letter-spacing on body or nav text — Courier New at natural defaults is the voice
- Don't apply the system without the box logo as a centerpiece; every other element is context for that object

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <767px | Logo scales down, nav list condenses, social icons reflow |
| Mobile Large | 767–768px | Standard mobile breakpoint boundary |
| Tablet Small | 768–800px | Navigation margins adjust |
| Tablet | 800–960px | Social icon spacing, footer link reflow |
| Desktop | 960–1024px | Full desktop layout, logo at 144px width |
| Large Desktop | >1728px | Wide viewport — content stays centered, void expands |

### Touch Targets
- Navigation links are the primary touch target — 13px type with 2px padding yields tight tap areas; the full-width hover zone compensates on desktop but mobile requires users to tap precisely
- Social icons at the bottom of the nav are small (approximately 20×20px) — standard Supreme: functional, not accessibility-optimized

### Collapsing Strategy
- Homepage layout does not collapse in the traditional sense — it was never multi-column; single-column centered from the start
- On narrow viewports, the box logo maintains its identity as a centered image; navigation list remains vertically stacked
- Footer social icons reflow from a single row into a wrapped 2×3 or 3×3 grid below ~480px

### Image Behavior
- The box logo is an SVG — scales without pixelation at any viewport size
- Product photography in shop views uses `object-fit: cover` for consistent aspect ratios
- No lazy-loading or progressive enhancement visible in the extraction; homepage is intentionally content-light

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand accent: `{colors.primary}`
- Nav hover background: `{colors.nav-hover-bg}`
- Focus ring: `{colors.focus-ring}`
- Border: `{colors.border}`

### Example Component Prompts

- "Build the Supreme homepage shell. Canvas: full-viewport `{colors.background}` black. Centered vertically and horizontally: the box logo — a `{colors.primary}` red rectangle (`{components.logo-box}`) containing 'Supreme' in Futura Bold Italic white. Below: NYC timestamp in Courier New 13px weight 400 (`{typography.timestamp}`) `{colors.ink}` white. Below the timestamp: vertical nav list in `{typography.nav-link}` — 'news', 'shop', 'about', 'stores', 'contact', 'mailing list' — each link default black background, white text; on hover, background floods instantly to `{colors.nav-hover-bg}` red (`{components.nav-item-hover}`). No transitions. No border-radius. No shadows."
- "Create a Supreme-style product card on `{colors.background}`. No border, no radius, no shadow, no padding. Full-bleed product photography top. Below: product name in Courier New 13px weight 400 (`{typography.body}`) in `{colors.ink}`. Price in `{typography.caption}`. Card hover: background shifts to `{colors.surface}` instantly. The red accent does not appear on product cards."
- "Design a Supreme footer strip on `{colors.background}`. Row of social icons in `{colors.ink}` white silhouette (Instagram, YouTube, Facebook). Below: legal link row — 'terms' rendered as `{components.badge}` (`{colors.primary}` red fill, `{colors.on-primary}` text, `{rounded.none}`, `{typography.caption}`); 'privacy', 'faq', 'accessibility' as plain `{colors.ink}` Courier New `{typography.caption}` links. All centered. No border separating footer from body."
- "Build a Supreme mailing list signup form. Background: `{colors.background}`. Email input: `{components.input}` — black fill, 1px `{colors.border}` outline, Courier New 13px (`{typography.body}`), zero radius, 4px 8px padding. Focus: border snaps to `{colors.focus-ring}` red instantly. Submit button: `{components.button-primary}` — `{colors.primary}` fill, white Courier New text, zero radius. No easing on any state change."
- "Replicate the Supreme nav hover interaction. Each nav link `<a>`: `display: block`, `color: {colors.ink}`, `background: transparent`. On `:hover`: `background-color: {colors.nav-hover-bg}`, `color: {colors.nav-hover-text}`. No `transition` property — the change is frame-immediate. Font: Courier New 13px weight 400 (`{typography.nav-link}`). Padding: 2px 0px. Links are left-aligned inside a centered column."

### Iteration Guide

1. Start with `{colors.background}` filling the entire viewport — a literal black void, no elements, no margins visible.
2. Place the box logo (`{components.logo-box}`) dead center. This is the site. Everything else is annotation around it.
3. Set all type in `{typography.body}` (Courier New 13px weight 400) by default; scale size up for display contexts using `{typography.display-hero}` — but never change the weight or family.
4. The single accent rule: `{colors.primary}` touches exactly three things — the logo box, the footer "terms" badge, and the nav hover background. Nothing else.
5. Remove all border-radius from every element. Set `border-radius: 0` globally.
6. Remove all transitions and animations. Every interactive state change is instantaneous.
7. The system's visual power comes from the contrast between the absolute black field and the singular red object. Any additional colour or decoration reduces that power proportionally.

---

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