What is Converse's primary brand color?

Converse's entry surface uses no chromatic brand voltage. The captured location selector is pure black (#000000) canvas with pure white (#ffffff) text and outlined display headlines — a two-tone duotone. The wider site CSS exposes 10+ secondary chromatic variables (Bilbao green #138410, Violetred #f63789, Royal Purple #633bb1, Bondi Blue #00a1b3, Lima green #7ed321) wired into :root as --bilbao, --violetred, --royalpurple, --bondiblue, --lima — but these are reserved for product detail pages, collection bands, and merchandising chips, not the entry chrome. The brand-voltage role is carried by the star-chevron wordmark and the outlined Druk Wide display, not by a color.

What typefaces does Converse use, and what should I use as a substitute?

Converse runs Druk Wide for display at 50px / 700 uppercase — wired in CSS as --font-family-drukwide and rendered on the entry surface with a white stroke and no fill, the move that defines the brand's typographic identity. Proxima Nova carries every other surface: 18px / 600 for sub-display labels, 16px / 400 for body links and country names, with a 1.31 line-height ratio across the system. Druk Wide is a licensed Commercial Type face. The closest open-source substitute is Bowlby One or Anton at the display tier — both transfer the ultra-condensed wide proportions. Inter at the same weights substitutes cleanly for Proxima Nova at 14-18px body sizes.

Why are Converse's display headlines outlined instead of filled?

The outlined Druk Wide treatment is the brand's signature move at the entry tier. A filled bold display headline would read as generic e-commerce shout; the stroke-only outline reads as ink-stamp or heritage marquee lettering — closer to a vintage band poster or a Chuck Taylor canvas patch than to a SaaS hero. The technique also lets the headline forms breathe at 60-100px against the pure black canvas without overwhelming the country-link content beneath each one. The fill weight is preserved (the strokes are thick enough to read at 100px) but the negative space inside each letter carries the canvas through, keeping the type feeling architectural rather than declarative.

Why does Converse use pure black on the entry surface?

The captured country-language selector is pure #000000 with pure #ffffff text — no near-black, no warm undertone, no surface ladder. The selector is a transitional surface (a user passes through it for a moment to pick a region), so it functions as a stripped-down brand statement rather than as a content surface. Pure black + outlined display + the star-chevron wordmark is the minimum kit needed to read as Converse. Product detail pages below this surface return to a white canvas with chromatic accents from the wider palette, so the black entry is the brand-voltage moment of the entire user flow.

What is Converse's corner-radius philosophy?

The captured entry surface has zero border-radius across every element — outlined display headlines, country links, the wordmark, and the centered sub-label all use sharp 0px corners. The CSS exposes no radius custom-property scale at the :root level either. This rejection of soft modern rounding is the heritage-streetwear move: corners stay sharp because the brand is rooted in 1908 basketball-shoe heritage, not in 2020s SaaS softness. Where Nike and Adidas have moved their digital surfaces toward 8-16px rounding, Converse keeps the entry chrome architectural and crisp.

Can I use this DESIGN.md to build my own heritage-streetwear 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 Converse's specific moves: pure-black entry canvas instead of white, outlined Druk Wide-style display rather than filled, Proxima Nova body, and zero corner rounding. The tokens resolve cleanly — every hex, font name, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the outlined-display move only carries if your display face has enough stroke weight (Druk Wide, Bowlby One, Anton) — applying it to a normal-width sans like Inter produces hollow lettering that loses the heritage feel.

Converse Design System

Converse's marketing system as a DESIGN.md file — a black canvas carrying outlined Druk Wide display headlines, Proxima Nova body, and a wider product palette of 12 chromatic CSS…

About Converse DESIGN.md

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

E-commerce & Retail

Converse's country-language selector — the surface a US visitor lands on when arriving from a non-localized URL — does something almost no global sneaker brand does at the entry tier. The page is a full-bleed black canvas with four region headlines (AMERICAS, EUROPE, ASIA PACIFIC, AFRICA) rendered in 60-100px outlined Druk Wide, white stroke on the black floor with no fill, sitting in a four-column row at the top of the viewport. The star-chevron wordmark anchors the upper-left corner; a single small "Select Location & Language" label centers above the headline row in Proxima Nova at 18px / 600. Where Nike and Adidas open with full-screen product video and hero imagery, Converse opens with type as monument — the headline forms ARE the page composition, and every country name below them sits as plain unstyled link text in pure white.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 13 color tokens captured from the entry surface and the wider site CSS — a two-tone duotone of pure black and pure white that carries the location selector, plus 10 secondary chromatic variables (Bilbao green, Violetred pink, Royal Purple, Bondi Blue, Lima green, Buttercup yellow, Flamingo orange) held in `:root` and reserved for product detail pages, collection bands, and merchandising chips. Three typography tokens span Druk Wide for outlined display at 50px / 700 uppercase, Proxima Nova at 18px / 600 for sub-display labels, and Proxima Nova at 16px / 400 for body. Spacing runs on a 4px base; the single dominant gap value across the captured page is 12px.

Feed this file to Claude or Cursor and it reproduces Converse's specific moves: outlined Druk Wide display rather than filled display, black canvas rather than the white-canvas convention of consumer e-commerce, sharp corners with zero rounding, and Proxima Nova as the universal body voice. The token references resolve cleanly — `{colors.canvas}` for the pure-black floor, `{colors.ink}` for the pure-white text, `{typography.display-xl}` for the 50px outlined headline tier. The one move worth borrowing for any heritage-streetwear or sneaker brand is the outlined-display treatment: it reads as ink-on-leather stamp rather than as digital chrome, which is the warmth lever Converse leans on instead of a chromatic accent.

What makes it distinct

Outlined display as signatureDruk Wide headlines render at 60-100px in stroked white with no fill, the typographic move that defines the entry surface
Two-tone entry chromepure black canvas and pure white text carry the location selector; the wider 12-color palette is reserved for product surfaces
Star-chevron wordmark anchored top-leftthe 1908 monogram sits at 26px in the nav band with no surrounding chrome, no tagline, no surface fill
Proxima Nova workhorse bodyevery running label, country name, and link sits at 16px / 400 with a 1.31 line-height ratio across the page
Sharp-corner geometry throughoutzero border-radius on the captured surface, the heritage-streetwear move that rejects soft modern rounding

Live at converse.com

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

converse.com

Explore Converse

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

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Converse design system FAQ

Common questions about Converse'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.

Converse — official site

Converse'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.