What is Supreme's primary brand color?

Supreme's brand voltage is the saturated red of the box-logo wordmark — visually somewhere around a fire-engine red, traditionally close to #da2128 in print. On the captured homepage the box-logo renders as a raster image rather than a CSS background fill, so the red value never lives in the token system itself. The page's measured CSS palette is just two tones — pure black #000000 as canvas and pure white #ffffff as text. This is the inverse of every other brand's approach: instead of declaring the brand color in CSS and letting it propagate, Supreme keeps the chromatic identity locked inside the logo image and renders the rest of the page as a duotone.

What typeface does Supreme use, and what should I use as a substitute?

Supreme runs Courier New across every text surface on the homepage — the timestamp at 13px / 400, the nine navigation links at 12px / 400, and the social-platform aria labels at 10px / 400. The fallback stack is Courier, monospace. There is no second typeface anywhere on the captured surface, and Courier New is the system monospace already shipped with macOS and Windows, so there is nothing to substitute. If you need an open-source mono with comparable mechanical-typewriter feel, IBM Plex Mono or Cousine transfer cleanly at the same sizes; Courier Prime is the closest free Courier-family alternative if you want a refined version of the same letterforms.

Why does Supreme have no hero image or headline on the homepage?

The homepage is deliberately reduced to a logo, a timestamp, and nine navigation links because Supreme treats the website as a transit hub rather than a marketing surface. Drops happen on Thursdays at 11am Eastern; the audience knows to navigate directly to /shop or to the seasonal lookbook. There is no need for the homepage to sell, because the cultural infrastructure around the brand (the queues outside the Lafayette Street store, the Instagram drop announcements, the resale market) does all the selling. The minimalism is also a status signal — refusing to do the homepage work that every other brand does is itself the brand statement.

Why does Supreme use Courier New for everything?

Courier New is the bureaucratic-document typeface — the typeface of receipts, IRS forms, terminal output, and zine photocopies. Using it across an entire fashion site is a refusal of the typographic conventions of luxury commerce, which tend toward bespoke display serifs (Hermès uses Didot, Chanel uses a custom Caslon) or geometric sans (most contemporary streetwear uses Helvetica or a Helvetica clone). Courier New positions Supreme outside both registers, closer to a fanzine or a band flyer than to a fashion house. The choice has stayed consistent since the early-2000s site, which gives it a heritage role inside the brand even though Courier New itself carries no luxury signaling.

Why is the canvas pure black instead of white?

The captured homepage is a pure #000000 canvas with pure #ffffff text and a saturated red box-logo image floating between them. The choice of black flips the dominant commerce convention — most fashion sites (Net-a-Porter, MR PORTER, Mr Beams) sit on a near-white canvas to let product imagery dominate. Supreme inverts the figure-ground: the page surface is the absence of product, and the box-logo on top is the entire content. Pure black also maximizes the chromatic intensity of the red logo (the lightness gap is widest against pure black) and reinforces the zine / terminal / underground reading that Courier New already establishes.

Can I use this DESIGN.md to build my own streetwear or zine-aesthetic site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Supreme's specific moves: pure-black canvas, Courier New across every tier, all-lowercase navigation, zero corner radius, and a deliberately content-less homepage. The tokens resolve cleanly — every hex, font name, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move that only carries with cultural authority is the empty homepage itself: a brand without Supreme's drop-culture infrastructure that ships a homepage with no hero will read as broken rather than as refusal. Use the typographic moves (Courier New monoculture, lowercase nav, zero rounding) without the empty-homepage gesture and you get the aesthetic without the failure mode.

Supreme Design System

Supreme's homepage as a DESIGN.md file — a pure black canvas, Courier New across every tier, lowercase navigation, and a centered red box-logo image.

About Supreme DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source supreme.com

E-commerce & Retail

Supreme's homepage is the anti-marketing homepage. The page is a pure black canvas; centered roughly one-fifth from the top sits the famous red box-logo wordmark as a 60x35-pixel raster image; directly beneath it, the current Tokyo time renders as `05/19/2026 05:35pm TYO` in 13px Courier New; beneath that, a stack of nine all-lowercase navigation links (news / spring/summer 2026 preview / spring/summer 2026 lookbook / shop / random / about / stores / contact / mailing list) sit at 12px / 400 with a 4px gap; and beneath the link stack, six monochrome social-platform glyphs (Instagram, YouTube, Facebook, Spotify, App Store, WeChat) align in a horizontal row. There is no hero image, no headline, no body paragraph, no scroll content, no CTA, no surface ladder, and no chrome of any kind below the social row. Where every other commerce site spends the homepage selling, Supreme spends the homepage refusing.

The DESIGN.md file packages this refusal into a machine-readable spec for React tooling. Inside: 2 color tokens (the pure-black canvas at frequency 11 and the pure-white text at frequency 87 — those are the only two values that exist on the surface), 6 typography tokens all running Courier New at 10-13px in weight 400, zero radius tokens (every element renders at 0px corners), 2 spacing tokens (a 4px inter-link gap and a 2px intra-cluster gap), and 11 component definitions covering the centered link stack, the masthead timestamp, the social-glyph row, the box-logo plate, and the implicit footer-equivalent that simply does not exist. The red box-logo color is observed visually but lives in the raster asset, so the captured CSS palette is two tones only.

Feed this file to Claude or Cursor and it reproduces Supreme's specific moves: pure black canvas instead of white, Courier New as the only typeface, all-lowercase navigation, zero corner radius, and the willingness to ship a homepage with no content beyond a logo and nine links. The one move worth borrowing only if your brand has the cultural authority Supreme has: the willingness to refuse the homepage entirely. Most brands need an interstitial layer of explanation. Supreme has spent thirty years training its audience to know that the lookbook drops Thursday and the shop opens at 11am Eastern, so the homepage can be a mailbox rather than a billboard.

What makes it distinct

Anti-marketing minimumno hero, no headline, no CTA, no scroll content; the homepage is just logo + timestamp + nine lowercase links
Courier New monocultureevery text surface runs Courier New 10-13px / 400 with normal letter-spacing; no second typeface anywhere
Box-logo as rasterthe red box-logo wordmark is an image asset rather than a CSS background fill, so the brand voltage sits outside the captured color palette
Lowercase navigationnine link labels (news / spring/summer 2026 preview / shop / random / about / stores / contact / mailing list) at 12px / 400, no caps, no chrome
Tokyo timestamp as mastheada live-updating timestamp (05/19/2026 05:35pm TYO) sits between the box-logo and the link stack; the only motion on the page

Live at supreme.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

supreme.com

Explore Supreme

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Supreme design system FAQ

Common questions about Supreme's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Supreme — official site

Supreme's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.