Does Vans have a brand voltage?

No — and that is the move. The captured page exposes seven color tokens, all of them structural: pure black #000000 at 528 occurrences (522 as border), near-black ink #262424 at 482 occurrences, pure white #ffffff at 71, near-white canvas #f3f3f3 at 48, plus three rarely-rendered neutrals. There is no accent color in the chrome. A light focus-ring blue #93c5fd is declared in the CSS as `--un-ring-color` (an UnoCSS utility variable) but never renders in the captured marketing surface. Every chromatic statement on the page comes from product photography — the Vans wordmark itself sits inside the photographic hero rather than as a separate brand chip. Most footwear brands hold a single bold voltage; Vans holds zero.

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

Vans's marketing site runs two families from the same FannDoren foundry set. FannDoren Condensed at 24-64px in weight 500 carries editorial display ('Memorial Day Sale', 'Summer Shoe Rotation', 'Best in Blue', product-collection titles). FannDoren Grotesque at 12-20px in weight 400-500 carries every nav link, product card metadata, body paragraph, and footer label. Arial is the declared fallback for both — `FannDorenCondensed, Arial, sans-serif` and `FannDorenGrotesque, Arial, sans-serif`. The closest open-source substitute for FannDoren Condensed is Oswald or Roboto Condensed at the same weights; for FannDoren Grotesque use Inter or Manrope. The display tier never goes below weight 500 or above weight 500 — the entire system runs medium across every step.

Why does Vans draw every card outline in pure black?

The system has no hairline-neutral tier. Pure black #000000 carries 522 of the 535 captured border occurrences — every product-card outline, every filter-chip border, every input-field outline, every section divider. The choice goes alongside the no-accent-color discipline: with no chromatic voltage in the chrome and no near-white hairline either, the page reduces its UI vocabulary to high-contrast geometry. The product image floats inside a 1px black frame; the filter pills draw the same 1px black border; the email-signup input edge is the same value. The result reads as a printed catalog or a skate-zine layout rather than as a standard e-commerce site.

What corner-radius scale does Vans use?

The radius scale is severe and binary. 2px appears 35 times across product cards, filter chips, image tiles, and the email-signup input. 4-5px appears on text inputs (the email field at 5px, search field at 4px). A fully-rounded 9999px pill appears 3 times — reserved for filter chips and the primary CTA pill on the email-signup band. There is no 8 / 12 / 16 / 20px tier. Either a surface is essentially square (2px is sharp enough to read as zero from a distance) or it goes fully round. The choice reinforces the catalog-page aesthetic: square-cornered cards in a grid, with the only soft surfaces being the chips and CTAs.

Can I use this DESIGN.md to build my own skate or footwear marketing 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 Vans's specific moves: pure-black border on every card and chip, no accent color in chrome, FannDoren Condensed-equivalent display at 64px / weight 500 with Grotesque-equivalent at 12-16px for everything else, severe 2px card rounding with a 9999px pill exception, and edge-to-edge photographic hero. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat worth flagging — the 'no accent color' move only reads as confidence if you have category-defining product photography to carry the chromatic load. On a brand without strong imagery the same chrome would read as undercooked or as a wireframe.

Vans Design System

Vans's marketing-site design system as a DESIGN.md file.

About Vans DESIGN.md

Curated by VansUpdated May 19, 2026Source vans.com

E-commerce & Retail

Vans's marketing site does what no other lifestyle-footwear brand attempts. The chrome is reduced to two colors: a near-white body floor #f3f3f3 and a pure-black hairline #000000 that carries 522 of the 535 captured border occurrences on the page. There is no accent voltage. There is no brand color in the nav, the buttons, the filters, or the footer. The wordmark sits inside the photographic hero — not above it as a separate brand chip — and every chromatic statement on the page comes from the product imagery and the photography of skaters wearing the product. Where Nike paints its hero in red-and-volt and where Adidas leans on the three-stripe black-blue, Vans gives the photographs the entire chromatic budget and leaves the chrome to disappear.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 7 color tokens drawn from the 8 raw values rendered on the captured page — pure black, near-black ink #262424 (482 occurrences), pure white, near-white canvas #f3f3f3 (48 occurrences), plus a light-mode focus-ring blue #93c5fd that ships in the CSS but never renders chromatic against a black-and-white surface; 9 typography tokens running FannDoren Condensed at 24-64px in weight 500 for display and FannDoren Grotesque at 12-20px in weight 400-500 for everything else; a severe 4-step radius scale of 2 / 4 / 5 / 9999px; and 14 component definitions covering the photographic-hero banner, the filter-chip pill row, the product-card grid, the email-signup band, and the two-column footer.

Feed this file to Claude or Cursor and it reproduces Vans's specific moves: black-and-near-white chrome with no accent voltage, edge-to-edge photographic hero with the wordmark inside the image, FannDoren Condensed reserved for editorial display, severe 2px card rounding, and the 9999px filter-pill exception. The one move worth borrowing only if you have a strong photography pipeline and a real-world brand: the willingness to give the chrome no chromatic voice at all. Most consumer brands cannot resist a CTA accent — Vans can, because the rubber-soled shoe on the page does all the work the chrome would otherwise do.

What makes it distinct

Pure-black border discipline#000000 carries 522 of 535 captured border occurrences with no second hairline tone; the system draws every card outline in 1px black
No accent color in chromechromatic work happens entirely inside product photography; the wordmark, nav, filters, and footer share the same two-color black-and-near-white voice
Two-family FannDoren splitCondensed at 64px / weight 500 for editorial display, Grotesque at 12-16px / weight 400-500 for body and metadata
Severe 2px radius35 of 43 captured surfaces sit at 2px; the only escape is a 9999px pill for filter chips and CTAs, a 4-5px middle on inputs
Edge-to-edge photograph herothe Memorial Day Sale banner spans the full viewport with overlaid wordmark and CTA; product imagery does every chromatic job the chrome refuses

Live at vans.com

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

vans.com

Explore Vans

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.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Vans design system FAQ

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

Vans — official site

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