Supreme Design System

Overview

Supreme's homepage refuses every marketing-page convention. Anti-marketing minimum: the page is a pure black canvas carrying nothing but a 60x35px red box-logo wordmark, a live Tokyo timestamp, nine all-lowercase navigation links, and a row of six monochrome social glyphs. There is no hero image, no headline, no body paragraph, no CTA, no scroll content, no surface ladder. Where Off-White opens with full-screen lookbook photography and Palace opens with skater-video b-roll, Supreme opens with the equivalent of a fluorescent-lit mail room. The minimalism is itself the brand statement — refusing to do the homepage work that every other commerce site does is a status signal that only carries with thirty years of drop-culture authority.

The chromatic system is two values. The captured CSS palette is {colors.canvas} (#000000) at frequency 11 and {colors.ink} (#ffffff) at frequency 87. The red of the box-logo — the brand's only chromatic moment — is rendered as a raster image rather than a CSS background fill, so it sits outside the token system entirely. This is the inverse of every other brand's approach: instead of declaring the brand voltage in CSS and letting it propagate to buttons, links, and accents, Supreme keeps the chromatic identity locked inside a single image asset and renders the rest of the page as a duotone. Buttons elsewhere on the site invert white-on-black or black-on-white; nothing on the homepage uses the red except the logo image itself.

Courier New monoculture: every text surface — the timestamp at {typography.display-md} (13px), the nine navigation links at {typography.nav-link} (12px), the social-glyph aria labels at {typography.caption} (10px) — runs Courier New at weight 400. There is no second typeface anywhere on the captured surface. Where streetwear peers run Helvetica monoculture (Stüssy, Palace) or display serif systems (Aimé Leon Dore), Supreme runs Courier New monoculture — the typeface of receipts, IRS forms, and zine photocopies. The choice positions the brand outside both luxury and contemporary-streetwear registers, closer to a fanzine or a band flyer than to a fashion house.

Key Characteristics:

• Pure two-tone duotone — {colors.canvas} (#000000) and {colors.ink} (#ffffff). The red box-logo lives in a raster asset, not in the token system.
• Courier New across every text surface at 10-13px / 400. The typeface of receipts, used here as the typeface of an entire luxury streetwear brand.
• Anti-marketing homepage — no hero image, no headline, no CTA, no scroll content, no footer below the social-glyph row.
• All-lowercase navigation labels — news / spring/summer 2026 preview / spring/summer 2026 lookbook / shop / random / about / stores / contact / mailing list at 12px / 400.
• Zero border-radius on every element — sharp 0px corners across the timestamp, link hit-targets, social glyphs, and the box-logo plate.
• Live Tokyo timestamp (05/19/2026 05:35pm TYO) as the only motion on the page — refreshes per minute, updates the brand's global routing implicitly.
• 4px inter-link spacing inside the nav stack — the only non-trivial spacing value declared by the system.
• Six monochrome social-platform glyphs in a horizontal row (Instagram, YouTube, Facebook, Spotify, App Store, WeChat) at 16px height — every platform mark flattened to white on black, no native brand colors.

Colors

• Canvas ({colors.canvas} — #000000): frequency 11. Used as text (5), background (1), border (5). The page floor and the active state of every interactive element. Pure black with no warm undertone, no near-black softening, no surface ladder — the homepage is literally a flat black rectangle with text floating in the centered safe zone.
• Ink ({colors.ink} — #ffffff): frequency 87. Used as text (43), background (1), border (43). The dominant text color across every surface — timestamp, navigation links, social-glyph fills, and any hover state that inverts (black text on a white surface). Pure white with no muted variant; the system has no ink-muted tier because there is no secondary text role to render.

Observed but untokenized

• Box-logo red: the famous Supreme red box-logo is rendered as a raster image (.png / .svg) rather than as a CSS background fill or currentColor SVG. The red is visually consistent with the print box-logo (close to #da2128 in spot color) but never appears in the captured CSS palette. This is intentional — keeping the brand voltage inside an image asset prevents accidental propagation of the red into buttons or links, which would dilute its scarcity.

Typography

Font Family

The system runs Courier New for every surface. The fallback stack walks Courier, monospace. There is no second typeface anywhere on the captured homepage — no display serif, no editorial sans, no second monospace. Courier New is the system monospace already shipped with macOS and Windows, so no font loading happens; the page renders the typeface instantly from the OS, which is consistent with the larger anti-decoration framing of the brand.

The use of Courier New as the entire typographic system is the homepage's most distinctive move. Courier New is the typeface of receipts, IRS forms, terminal output, and zine photocopies. Using it across a fashion site is a refusal of luxury-commerce typographic conventions (which tend toward bespoke display serifs or geometric sans) and a refusal of contemporary-streetwear conventions (which tend toward Helvetica or a Helvetica clone). The choice has stayed consistent since the early-2000s site, which gives it heritage standing inside the brand.

Hierarchy

Principles

Every text size sits between 10px and 13px. The widest type on the page is the 13px timestamp; the smallest is the 10px caption tier. Weight is 400 everywhere — there is no bold, no semibold, no italic. Letter-spacing is normal on every token; line-height tracks Courier New's default metrics (~1.08).

The deliberate refusal of typographic hierarchy is itself the move. Most commerce sites differentiate a display tier (hero headline) from a body tier (paragraph copy) by 3-5x size and 200-400 weight steps. Supreme uses a 1.3x size step (10px to 13px) and zero weight variation. The result reads as system output rather than as designed editorial — closer to a terminal status line than to a marketing page.

Note on Font Substitutes

Courier New is the system monospace already shipped with macOS and Windows; the fallback stack walks Courier, monospace, both of which are guaranteed to resolve locally. If you want an open-source alternative with the same letterforms re-drawn for screen, Courier Prime is the closest match. For a mechanical-typewriter feel with better hinting at small sizes, IBM Plex Mono at weight 400 transfers cleanly; for a tighter, more contemporary mono, Cousine is the closest free alternative.

Layout

Spacing System

• Base unit: 2px — the smallest measured gap, declared on the page as 0px 2px on the link-stack container.
• Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px.
• Dominant gap: {spacing.xs} (4px) — the vertical gap between each of the nine navigation links inside the centered stack.
• Hero padding (vertical): ~180px from the top of the viewport to the box-logo — the entire centered cluster sits roughly in the upper-third of the page, with empty black floor beneath the social-glyph row stretching to the bottom edge.
• Hero padding (horizontal): ~24px — but the centered cluster is so narrow (~250px wide) that the horizontal padding is invisible.

Grid & Container

• Max content width: ~250px — the navigation stack is narrower than a smartphone viewport. The page does not use a 12-column grid or a wide container; the entire layout is a centered single-column flex stack with each child sized to its content.
• Centered single-column layout: the box-logo, timestamp, link stack, and social-glyph row all align center-horizontal and stack center-vertical inside a roughly 250x500px safe zone.
• No grid, no columns, no responsive breakpoints visible: the page renders identically at every viewport — the centered cluster simply sits in the middle of whatever surface is available.

Rhythm

The page has a single rhythm: each element in the centered stack is separated by ~16px of black canvas. There is no atmospheric variation, no surface-color shift, no scroll-triggered band. The rhythm is dead-quiet — closer to a mail-room directory than to a designed editorial.

Elevation

The system has zero elevation. There are no shadows, no surface ladders, no hairlines, no border outlines, no layered z-index moves on the captured homepage.

• Flat (no shadow): every element on the surface.
• No surface ladder: the page has only one surface tone ({colors.canvas}). There is no surface-1 or surface-elevated tier because there is nothing on the page that needs to lift.
• No hairlines: the captured page has zero border occurrences. The wider site (shop pages, product detail) presumably introduces hairlines for product grids, but the homepage does not need them.

The absence of elevation is consistent with the larger anti-decoration framing — the page renders as a single flat plane with text floating in the middle.

Shapes

The radius scale is a single value: zero. Every element on the captured homepage uses {rounded.none} (0px) corners.

• {rounded.none} 0px — the box-logo plate, the timestamp baseline, the navigation link hit-targets, the social-glyph clickable areas, and the implicit form inputs (mailing list, search) all use sharp 0px corners.

There is no sm tier, no md tier, no pill tier. The captured CSS exposes no --rounded-* custom-property scale. The sharp-corner geometry is consistent with the larger refusal of decorative softening — corners stay architectural because the brand identity sits in a zine / fanzine / mail-room register, not in a 2020s SaaS register.

Components

body — Pure {colors.canvas} background, white text, Courier New body. The entire homepage is a single flex-column-center body with no wrapping section structure.

hero-section — Black canvas, ~180x24 top padding. Holds the centered cluster of box-logo + timestamp + link stack + social row.

box-logo — The famous Supreme box-logo rendered as a raster image (.png / .svg asset, not a CSS background). 60x35px size, centered, transparent surrounding plate. The single chromatic element on the page; the only departure from the duotone palette.

hero-heading — White text on the transparent hero, {typography.display-md} (13px / 400 Courier New). The live Tokyo timestamp (05/19/2026 05:35pm TYO) is the homepage's only h2 element and the only piece of dynamic content above the link stack.

body-paragraph — Default white text at {typography.body-md} (12px / 400). Reserved for any future body copy; not present on the captured homepage.

nav-stack — Centered single-column container holding the nine navigation links. {spacing.xs} (4px) vertical gap between children, {spacing.xxs} (2px) horizontal inset. Transparent fill; no border, no surface, no scroll.

nav-link — Transparent fill, white text at {typography.nav-link} (12px / 400), all lowercase. 4x0 padding, 0px corners. The hover treatment likely strikes through or color-shifts (the early Supreme site used a yellow hover) but is not visible on the static capture.

social-glyph-row — Horizontal row beneath the navigation stack, 16x0 padding, 44px height. Houses six platform glyphs (Instagram, YouTube, Facebook, Spotify, App Store, WeChat) at uniform white-on-black rendering.

social-glyph — White glyph at 16px height, 0x8 horizontal padding between siblings. Every platform mark flattened to monochrome white — no native Instagram gradient, no YouTube red, no Facebook blue.

button-primary — White {colors.ink} fill, black {colors.canvas} text, {typography.button-md} (12px / 400 Courier New), zero rounding, 8x16 padding, 32px height. Used on internal pages for "Add to bag" and "Sign up" — not present on the homepage.

button-secondary — Transparent fill, white text, 1px white border, zero rounding, 8x16 padding, 32px height. Used for cancel / back actions inside the checkout.

text-input — Black {colors.canvas} fill, white text, 1px {colors.ink} border, zero rounding, 8x12 padding, 32px height. Used in the mailing-list signup and search; absent from the captured homepage.

card — Black surface, white text, zero rounding, 16px padding. Used for product cards on the /shop index; absent from the homepage.

Do's and Don'ts

Do keep the homepage to the absolute minimum — logo, timestamp, navigation, social row. The anti-marketing minimum is the brand statement. Adding a hero image, a headline, or a "Shop the latest drop" CTA undoes thirty years of cultural positioning in a single change.

Do render Courier New across every text surface at 10-13px / 400. The monoculture is the typographic signature; introducing a second typeface (even Helvetica for body copy) breaks the zine / mail-room register.

Do keep the box-logo as a raster image asset rather than as a CSS background or an inline SVG with currentColor. Keeping the red voltage locked inside the image prevents accidental propagation into buttons or links, which would dilute the box-logo's scarcity.

Do keep navigation labels all-lowercase. The lowercase nav (news / shop / random / about) is part of the brand's typographic identity since the early-2000s site; switching to title case or all-caps reads as a different brand.

Don't render the navigation links as buttons with surface fills or border outlines. The system uses transparent-fill, no-border text links because the page is structured as a directory listing, not as a CTA stack. A border: 1px solid {colors.ink} treatment turns the directory into a button grid and breaks the mail-room reading.

Don't add a hover state that introduces the red box-logo color. The red sits inside the logo image and only there; using it on a link hover state propagates the brand voltage to the link tier and dilutes the scarcity. The early Supreme site used a yellow link hover precisely to avoid this — yellow has no semantic relationship to the brand red.

Don't introduce a corner radius anywhere — not 4px on the social glyphs, not 8px on the box-logo plate, not 2px on the navigation hit-targets. The sharp-corner geometry is the heritage move; even small rounding pulls the surface toward 2020s SaaS softness.

Don't scale type beyond the 10-13px range or introduce a weight variation. The page's deliberate refusal of typographic hierarchy is the move; bumping the timestamp to 18px or boldening the navigation labels breaks the system-output reading.

Known Gaps

• Box-logo color is untokenized: the red of the Supreme box-logo is the brand's load-bearing chromatic moment but lives inside a raster image rather than the CSS palette. The hex captured in the JSON is null for this color; visually it sits close to #da2128 in print but the rendered value is not measured.
• Internal page surfaces: this DESIGN.md captures the homepage only. The /shop, /news, /lookbook, and product-detail pages have their own grids and product-card systems not represented here.
• Hover and focus states: the captured static surface does not expose link or button hover treatment. Historical sites have used yellow / black-on-white inversion, but the current behavior is not measured.
• Form input error states: {component.text-input} carries an inferred resting state; the mailing-list signup and checkout error styling lives inside pages not captured here.
• Mobile breakpoints: the captured surface is 1440px desktop. The centered cluster is narrower than any phone viewport so the layout presumably renders identically across breakpoints, but no media-query values are exposed in the CSS.
• Motion: the Tokyo timestamp updates per minute and is the only motion on the page. The hover micro-interactions on the navigation links are not represented.
• Drop-day surfaces: every Thursday at 11am Eastern, Supreme runs a drop and the homepage briefly surfaces drop-specific imagery and product cards. These transient surfaces are not represented in the captured tokens.