Design System Inspiration of Zalando

1. Visual Theme & Atmosphere

Zalando is Europe's large online fashion and lifestyle platform. Robert Gentz and David Schneider founded it in Berlin in 2008, launching from a shared Torstraße apartment that also served as office and warehouse. Free delivery and up to 100 days to return set it apart early on. Its corporate boilerplate now counts 62 million active customers and more than 7,000 brands across 29 markets, served through Zalando, ABOUT YOU and Lounge by Zalando.

On 9 September 2024 Zalando announced a new brand positioning around "style confidence". It launched with the autumn/winter campaign "What Do I Wear?", together with a refreshed identity: a more vibrant orange, a modern wordmark, and a custom font designed to improve accessibility. The press release credits the agency Kurppa Hosk, which describes the work as a typeface superfamily, a palette anchored by a more vibrant orange, and a new wordmark. That font is ZalandoSans, a variable typeface with weight and width axes, which the brand site describes as dynamic and versatile.

The storefront is black and white. Orange #ff4c00 is the brand and the logo, not the button colour: the primary action is a black pill, and navigation is white pills that grey on hover. The site is flat — its shadow tokens are inset rings, not elevation.

What makes it worth reading:

• A rebrand you can see in the cascade. The base tokens on :root are the older theme. A second file, tokens-lagom-stage-1-border-radius-3.13.27.css, overrides them inside @scope (:root). It sets pill and card radii, ZalandoSans as the font, bold at 650, and new state greys. What renders is the override.
• Deprecation on the surface. Eighteen --deprecated-color-* tokens stay beside the semantic ones. The red changed in the migration (#d9000c → #da0410), and the old blue #0d6dff has no successor.
• Purple is the interactive colour. --color-text-interactive is #6328e0, separate from the brand orange and from the sale red.

Primary tasks

• Browse categories and brands; search; open a product.
• Sign up for the newsletter; manage an account and returns.

2. Color Palette & Roles

Measured with getComputedStyle on zalando.de: 360 root custom properties, all first-party ZDS. There is no Tailwind, MUI or other framework namespace. Current values come from the rebrand layer. Where the base theme differs, its value is listed as legacy.

Brand and ink

• Brand (#ff4c00) — --color-background-brand, --color-text-brand. The logo and brand accents.
• Primary (#000000) — --color-text-primary, --color-border-primary. The primary button and the ink. 694 of about 700 coloured text nodes sampled are black, and so are 9 of 10 <p> elements.
• Foreground (#000000) — body text.
• Canvas (#ffffff) — --color-background-default.
• Interactive (#6328e0) — --color-text-interactive, --color-border-interactive.

State greys (rebrand layer)

• Hover (#d2d8dd) — --color-background-hover; the primary button's hover. The same grey is --color-border-secondary, the carousel arrow border.
• Pressed (#b9c0c6) — --color-background-pressed.
• Tertiary (#f1f1f1) — --color-background-tertiary; the navigation pills' hover.
• Secondary (#5c6169) — --color-background-secondary; dark grey surfaces.
• Focus — --color-background-focus #0000004d (black at 30%), the same in both layers.

Status

Negative / sale #da0410 · Positive #00875a.

Legacy values still shipped

The base theme has hover #efeff0, pressed #d0d1d3 and secondary #66676e. The deprecated layer adds red #d9000c and blue #0d6dff. On the page measured, the rendered greys match the rebrand values, not these.

3. Typography Rules

Font family

ZalandoSans — one variable woff2 (wght 100–900, wdth 50–200%), self-hosted at mosaic02.ztat.net/zds/assets/fonts/. It is loaded (document.fonts), and <p> copy and the menu links compute to ZalandoSans, Helvetica, sans-serif. The rebrand layer points --font-family-sans-serif and --font-family-serif at it; the base theme still names HelveticaNow and Tiempos. Those two are declared as @font-face and did not load on the pages measured. The navigation pills and the black primary button compute to a bare sans-serif, so ZalandoSans does not reach them.

Scale

104 --typography-* tokens, each with size, line height, weight, width and letter spacing:

Letter spacing tightens with size (h1 -0.025rem, jumbo1 -0.045rem). The rebrand layer lowers --font-weight-bold to 650.

4. Component Stylings

Measured on zalando.de, focus read under a real Tab key, and a hover counted only when :hover matched.

• Navigation pill — Damen, Herren, Kinder: #ffffff / #000000, radius 9984px, 36px, 6px 18px, 16px/400. Hover and press grey it to #f1f1f1. Focus draws Chrome's auto ring.
• Primary button — a black pill: #000000 / #ffffff, 9984px, 48px, 12px 24px, with a 0 0 0 1px inset ring. Hover flips it to #d2d8dd with a black label, and press darkens it to #b9c0c6. Focus replaces the fill with rgba(0,0,0,0.3), and no outline is drawn.
• Search field — transparent, black text, no radius, 40px. Nothing measured changes on hover or focus; any affordance lives on a wrapper this probe did not read.

Radius

The base theme's --component-*-border-radius tokens are all 0px, and its --border-radius-v2-* are 0px too. The rebrand layer sets v2: s 4px · m 8px · l 12px (product cards) · round 9984px (pills).

5. Layout Principles

• --grid-columns 12 · --grid-gutter 16px · --grid-margin 32px · --grid-max-width 1280px.
• Spacing: --spacing-3xs 4px, 2xs 8px, xs 12px, s 16px, m 24px, l 36px, xl 48px, 2xl 64px.

6. Depth & Elevation

Flat. The 28 --box-* tokens are inset rings — inset 0 0 0 1px and 2px for focus, hover, pressed, selected and status — and bottom-only insets for tab underlines. No drop shadow was found in the tokens or on the page.

7. Do's and Don'ts

Do

• Keep actions black and white; use orange #ff4c00 for the brand.
• Use full pills (9984px) for buttons and navigation, 12px for cards.
• Use the grey ramp #d2d8dd → #b9c0c6 for button hover and press.

Don't

• Don't read the base :root values as current — the rebrand layer overrides them.
• Don't use #6328e0 as a brand colour; it marks interactive text.
• Don't add drop shadows.

8. Responsive Behavior

Not measured. Desktop 1440×1000 only.

9. Agent Prompt Guide

Quick Color Reference

#ff4c00 brand · #000000 ink and primary · #ffffff canvas · #d2d8dd hover · #b9c0c6 pressed · #f1f1f1 pill hover · #5c6169 dark grey · #6328e0 interactive · #da0410 sale

Example Component Prompts

• "A 48px black pill button, white 16px/400 label; hover #d2d8dd with a black label, press #b9c0c6, focus a 30% black fill."
• "A row of 36px white navigation pills, 16px/400 black labels, hover #f1f1f1."

10. Voice & Tone

Not assessed as authored voice.

11. Brand Narrative

Zalando grew from a Berlin apartment in 2008 into a platform across 29 markets. Its 2024 repositioning moves it from an e-commerce pioneer toward a destination for style, with a warmer, more vibrant orange, a new wordmark and its own typeface. The design system was already in place: the engineering blog described ZDS in 2022 as tokens, electrons, atoms, molecules and organisms, with adoption close to 100% after more than two years. A 2024 post described themes that can be switched on per page. The live site shows that mechanism at work: a staged token file layered over the old theme, carrying the rebrand's pills, font and greys.

12. Principles

• Black acts, orange signs. Actions in black and white; orange for the brand.
• Round and flat. Full pills and inset rings, no elevation.
• Themes over rewrites. New values arrive as a token layer on top of the old.

13. Personas

Not researched. No persona claim is made from a UI capture.

14. States

Hover: pills grey to #f1f1f1; the primary turns #d2d8dd. Press: #b9c0c6 on the primary. Focus: a 30% black fill on the primary, the browser's ring on navigation pills, and nothing on the search field. No disabled state was observed.

15. Motion & Easing

Overlay geometry and transitions are tokenised (--drawer-*, --flyout-*, --modal-*). Their timing was not measured.

Tier 1 sources: https://www.zalando.de/ (live homepage — 360 root custom properties read via getComputedStyle, rebrand token layer read from its stylesheet, ZalandoSans loaded, three components measured at rest, hover, pressed and focus, captured 2026-09-26); https://brand.zalando.com/ (Zalando brand site — ZalandoSans and brand guidelines; nonsense path returns a different, non-content response, read 2026-09-26); https://engineering.zalando.com/posts/2022/07/an-introduction-to-the-zalando-design-system.html (Zalando Engineering, 21 Jul 2022 — ZDS layers, adoption close to 100%, read 2026-09-26); https://engineering.zalando.com/posts/2024/05/theming-the-zalando-design-system.html (Zalando Engineering, 14 May 2024 — themes, read 2026-09-26); https://corporate.zalando.com/en/fashion/zalando-unveils-new-brand-positioning-focus-quality-lifestyle-and-inspiration-updates-brand (Zalando press release, 9 Sep 2024 — new positioning, orange, wordmark, custom font; agency Kurppa Hosk, read 2026-09-26); https://corporate.zalando.com/en/about-us/our-history (Zalando history — founded Berlin 2008 by Robert Gentz and David Schneider, read 2026-09-26); https://www.kurppahosk.com/work/zalando (Kurppa Hosk case study — typeface superfamily, vibrant orange, new wordmark, read 2026-09-26)