E-commerce & Retail design systems

87 DESIGN.md files for E-commerce & Retail brands, among them adidas, Aesop, Aimé Leon Dore, Allbirds, Alo Yoga and Arc'teryx. Each holds one brand's colors, typography, corner radii, spacing and components as tokens.

E-commerce & Retail is one of 29 categories. A brand can sit in more than one: the category page lists every system tagged E-commerce & Retail, and each links to its own page with the full file.

Meta has the most components of the E-commerce & Retail files, 38. Lululemon has the widest palette, with 27 color tokens.

No. Each DESIGN.md describes the look of a brand's public website. It is not official, and the brands have not endorsed it; their names and logos belong to them.

Open the brand's page for its full palette. A few primaries in E-commerce & Retail: adidas #000000, Aesop #242424, Aimé Leon Dore #000000 and Allbirds #000000.

Every file lists its colors as quoted hex values with names such as `primary`, `canvas` and `ink`. The finder on /design also searches by color word, so you can look for the E-commerce & Retail systems that use a given hue.

Copy a brand's `primary`, background and ink tokens into your CSS variables (`--primary`, `--background`, `--foreground`). adidas is a good place to start: its page shows its palette next to its components.

Set the family under `--font-sans` (or `--font-heading`) in your `@theme` block, then reuse the DESIGN.md's sizes, weights and line heights. Load the font with `next/font` or a stylesheet, as you would any other.

Arial (4 systems), Helvetica Neue (4 systems) and Helvetica Now Text (3 systems). Counts are the E-commerce & Retail files that use the family in a type token.

Cartier has the most type tokens of the E-commerce & Retail files, 15: a full scale from display sizes to captions.

Keep the sizes, weights and spacing from the DESIGN.md and set the family to an open font. Some brands use proprietary families that need their own license.

Pick the brand on this page, then give its DESIGN.md to your agent with the component you want, such as a pricing table or a navbar. The agent builds it from the brand's component tokens, so a E-commerce & Retail look carries into your own code.

By the shape of their components, the E-commerce & Retail files split 52 sharp, 18 soft, 16 mixed and 1 pill. A brand's page shows its corner radii and a live mockup in use.

Meta defines 38 components, the most in E-commerce & Retail. Each lists properties such as its background, text color, type and corner radius as references to the other tokens, so an agent can build it directly.

Copy the radius token into `--radius` and the colors into your CSS variables. The shadcn/ui components read them, so a Button and a Card take on the E-commerce & Retail brand's look.

Open a brand in E-commerce & Retail, download its DESIGN.md or copy it as Markdown, and give it to Claude Code, Cursor or another agent with a prompt such as "build this page in the style of the DESIGN.md". The agent reads the tokens and writes matching components.

Yes. The 87 E-commerce & Retail files are free to download or copy, with no account.

Yes: the files are plain Markdown, so take the tokens you like from two of them. Treat them as starting points for your own brand, not as the brands' assets.

The main directory has 29 categories, such as Developer Tools & IDEs, AI & LLM Platforms and Productivity & SaaS. See /design/category/e-commerce-and-retail for this one; the other category pages are linked at the bottom of this page.