What is Zalando's primary brand color?

The extraction captured one brand-layer color: violet #6328e0, which fills the footer band of the geo-selector page and is marked layer: 'brand' in the extraction. This is the only non-structural hex in the captured page — the four structural colors (pure black #000000, near-black #1a1a1a, white #ffffff) account for all text and border occurrences. Zalando's widely-recognized orange flame logo renders as an SVG mark and did not surface in the CSS token system. The brand's main-storefront pages likely expose the orange as a CSS color on CTAs and sale chips, but that surface was not captured by the extractor.

What typefaces does Zalando use, and what are good substitutes?

Zalando's captured page runs two typefaces. Tiempos — a Klim Type Foundry editorial serif — carries the headline tier at 40px / weight 400 / -0.4px tracking for the geo-selector h1, and also appears at 16px / weight 400 / -0.16px for body copy. HelveticaNow — a Monotype update to Helvetica — handles every utility surface at 14px / weight 400 and appears as the nav-link and country-selector label type. For Tiempos substitutes, Tiempos Text (the companion text-optimized cut) works at the 16px body tier; GT Sectra or Freight Display Pro are editorial serifs with comparable structure at the 40px display size. For HelveticaNow, standard Helvetica or Inter at weight 400 substitute cleanly.

What corner-radius scale does Zalando use?

The captured page declares no borderRadius values above 0px across any scanned element. Every CTA, country selector tile, and label block renders as a hard rectangle. The flag images themselves are circular (rendered via overflow: hidden on circular containers), but the container geometry comes from the img's natural circular flag mask, not from a border-radius token. This rectilinear approach is consistent with Zalando's structural siblings in European fashion retail — ZARA also runs a near-zero radius scale — and distinguishes the category from US apparel brands that lean on 8–12px pillowed cards.

How does Zalando divide Tiempos and HelveticaNow across the interface?

The split is strict: Tiempos covers h1 display (40px / weight 400) and body paragraph text (16px / weight 400), while HelveticaNow covers every link, label, and utility surface at 14px / weight 400. There is no weight 700 tier on either family in the captured surfaces — the heaviest moment is the 40px Tiempos at weight 400, which relies on size rather than weight for display emphasis. HelveticaNow's 14px / 400 is the same weight as body Tiempos, meaning the family switch rather than a weight shift is what differentiates the two voices. This is closer to the editorial serif-grotesque pairing at SSENSE than to the single-family systems at ZARA or H&M.

Can I use this DESIGN.md to build a fashion marketplace geo-selector or landing page?

Yes — the file is structured for Claude, Cursor, or any AI tool that reads the Google Labs DESIGN.md spec. Feed it in and the agent reproduces the captured moves: Tiempos serif at 40px for the page h1, HelveticaNow sans at 14px for nav links and utility labels, pure black ink on a white canvas, violet (#6328e0) reserved for the footer band, and 0px corners on every surface. The token references resolve without invention — `{colors.ink}` for body text, `{colors.violet}` for the footer, `{typography.display-xl}` for the 40px headline. Note that this spec covers the geo-selector landing, not the main storefront; the product grid, sale chips, and CTA button colors from the main Zalando shopping experience are not captured here.

Zalando Design System

Zalando's design system captured as a DESIGN.md file.

About Zalando DESIGN.md

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

E-commerce & Retail
Marketplaces

Zalando's geo-selector landing makes the category's standard typographic trade explicit in one screen. The page carries a single h1 in Tiempos — the editorial serif at 40px / weight 400 with -0.4px tracking — and then hands everything else to HelveticaNow sans at 14px / weight 400. No hybrid sizes, no overlapping of the two families. Tiempos belongs to the headline tier; HelveticaNow belongs to the utility tier. Where ZARA (Inditex's main European rival) goes further and strips the serif from every surface except campaign cover lettering, Zalando keeps the serif as a structural heading voice and reserves it for the largest typographic moment on the page. The result is a page that reads as retail-editorial rather than as pure fashion magazine — a distinction that reflects Zalando's broader-demographic positioning.

The DESIGN.md file packages the captured system into a machine-readable spec for React tooling. Inside: 13 color tokens drawn from a near-monochrome structural palette plus a single brand-layer violet (#6328e0) used as the footer canvas fill. Typography resolves to 11 tokens spanning Tiempos at two display sizes (40px display, 16px body) and HelveticaNow at four utility sizes. The radius scale is single-value: 0px across every captured element. Spacing anchors on 8px. The component set covers the top-nav bar, the geo-selector h1, country-tile links, footer band, newsletter input, and primary CTA block — the surfaces visible in the extracted page.

Feed this file to Claude or Cursor to reproduce Zalando's captured moves — Tiempos serif reserved for the display tier, HelveticaNow sans for every utility surface, zero rounding, and the violet footer band as the single chromatic departure from an otherwise ink-on-white system. One structural caveat: the extractor landed on the geo-selector page rather than the main storefront, so the orange flame logo that Zalando's brand materials feature prominently lives in SVG and was not captured as a CSS token. The Known Gaps section flags what a storefront-page extraction would add.

What makes it distinct

Serif-sans editorial splitTiempos carries the 40px geo-selector headline while HelveticaNow handles every 14px nav link and utility label, two voices dividing display from chrome
Violet footer voltage#6328e0 fills the footer band as the sole brand-layer color on the captured page; the orange flame logo lives in SVG and sits outside the CSS token system
Zero rounding systemno borderRadius value above 0px appears in the extraction; every CTA, country tile, and label block renders as a hard-edged rectangle
8px dominant spacingthe captured spacing list records 8px at 54 occurrences, making it the module that organizes the flag-grid rhythm and label padding
Near-black ink ladder#000000 at frequency 164 and #1a1a1a at frequency 16 form a two-step text hierarchy; the near-black carries navigational and ancillary label roles

Live at zalando.com

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

zalando.com

Explore Zalando

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.

Other

Specialty colors.

Zalando design system FAQ

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

Zalando — official site

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