What is PUMA's primary brand color?

PUMA's marketing site has no CSS-rendered brand color. The only chromatic voltage on the page comes from product photography — shoes, apparel, and campaign imagery in orange, pink, electric blue, and neon green tones that change seasonally. The button and nav system runs on near-black (#191919) and white (#ffffff) exclusively. This is distinct from brands like Nike (volt yellow accents) or Adidas (trefoil blue in the nav) — PUMA delegates color entirely to the product, so the token system contains no primary brand-color entry.

What typeface does PUMA use and what should I substitute?

PUMA uses FFDINforPuma — a custom variant of the DIN Engschrift condensed geometric sans-serif commissioned for the brand. It appears at weight 400 for body copy and 700 for headings, buttons, and category labels. Uppercase tracking (0.32px) is applied to navigation links and category headers. The closest open-source substitute is DIN Condensed at bold weight; if that is unavailable, Barlow Condensed at 700 reproduces the tightly-spaced, sport-utility feel. Inter or Roboto at the same weights are not close substitutes — they lack the condensed geometry that defines the brand voice.

What corner-radius philosophy does PUMA use?

PUMA's radius scale is almost flat. The default for buttons, form inputs, and content cards is 2px — closer to square than rounded. The only departure is a 9999px full pill used for category-tag chips and quantity badges, and an 8px value for modal surfaces. The 2px default is a deliberate edge-sharpness signal: it reads as sport-precision rather than the friendly-consumer rounding (8–16px) that Nike and New Balance use, and it clearly differentiates from the fully-pill approach of Gymshark and Lululemon. Adding 4–8px to PUMA buttons would immediately read as off-brand.

How does PUMA structure its type hierarchy?

PUMA uses FFDINforPuma across every tier with weight and size as the only variation axes. Hero h1 runs at 40px / weight 700, section headings at 20–32px / 700, sub-sections at 18px / 700 (sometimes with uppercase transform), body paragraphs at 16px / 400, and captions at 12px / 400. The distinctive typographic move is uppercase text-transform applied to navigation links and category-section headers — 16px / 700 / 0.32px tracking is the canonical nav-link treatment. There is no separate display family or serif tier; the condensed DIN does everything.

Can I use this DESIGN.md to build a sportswear e-commerce 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 PUMA's specific moves: near-black #191919 primary buttons at 2px radius, white canvas sections with light-gray #e5e7eb hairlines, FFDINforPuma-equivalent condensed sans at weight 700 for headings, and uppercase-tracked nav links. One important caveat: the design works because product photography carries the color. If your product imagery is low-quality or inconsistently lit, the near-zero brand chrome will read as sparse rather than confident. The system is optimized for high-quality product shots on a white-to-near-black canvas.

PUMA Design System

PUMA's e-commerce design system as a DESIGN.md file.

About PUMA DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source us.puma.com

E-commerce & Retail

PUMA's US storefront is a study in photographic delegation — the brand trusts product photography to carry every chromatic responsibility and keeps every CSS-rendered surface in a two-tone near-black and white. The hero heading "SHOWTIME" runs in white at 40px FFDINforPuma weight 700 over a gradient-banner that is itself a product composition (shoes in warm orange, pink, and electric blue tones). Scroll past the hero and every section is white canvas with near-black type, light gray hairline borders, and images doing all the emotive work. Where Nike uses a thick white-on-black type treatment with occasional volt yellow accents, and Adidas leans on a blue-threaded nav, PUMA keeps the chrome down to a binary and lets the product photography generate the brand personality per-season.

The DESIGN.md file captures the system into a machine-readable spec for React and AI tools. Inside: 14 color tokens covering the near-black ink and button surface, the white canvas, two gray mids for secondary text and hairlines, and pure black for shadow and hard-border moments; 12 typography tokens running FFDINforPuma from 40px hero h1 through 12px captions — the only two-axis variation being size and weight (400 for body, 700 for headings and CTA labels), with uppercase tracking appearing on navigation links and category headers; 5 radius tokens anchored at 2px; 8 spacing values on a 4px/8px base; and 16 component definitions covering the primary button, ghost button, top nav, hero heading, product card, and category-tab strip.

Feed this file to Claude or Cursor and it will reproduce PUMA's specific moves: near-black fill primary buttons with 2px radius instead of the pill or 8px rounding that most sportswear e-commerce defaults to, all-caps uppercase nav links with 0.32px tracking, and white canvas sections where the only non-neutral element is a product image. The most transferable lesson from this system is the discipline of zero brand-chrome color — it means the palette never clashes with seasonal product colorways, which in sportswear change every six to eight weeks.

What makes it distinct

Photography-voltage systembrand color is absent from the chrome; every chromatic moment on the page comes from product images, not CSS fills
FFDINforPuma at condensed weight 700the custom DIN variant drives every heading tier, with uppercase + 0.32px tracking on nav links and category labels as the sole typographic accent
2px default radiusbuttons, inputs, and cards all sit at 2px, placing PUMA closer to sharp-edge fashion brands (Zara, Supreme) than to the pill-first Nike or Adidas
Absolute binary palettenear-black (#191919) and white (#ffffff) carry 339 of the 416 total color occurrences; mid-gray hairlines handle the rest
Product-only colorthe hero gradient is generated by product imagery (shoes in orange-pink-blue tones); the page chrome contributes zero chromatic pixels

Live at us.puma.com

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

us.puma.com

Explore PUMA

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.

PUMA design system FAQ

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

PUMA — official site

PUMA's public US storefront — 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.