SYSTEM Cited by 1 source

Zalando Design System tokens

Zalando Design System (ZDS) tokens are Zalando's cross-platform styling-variable library — the equivalent of CSS custom properties but available across web + iOS + Android via StyleX.

Exposed as @zds/tokens/tokens.stylex and imported in component library code:

import { tokens } from "@zds/tokens/tokens.stylex";

const styles = css.create({
  primaryStyle: {
    backgroundColor: tokens.colorBackgroundDefault,
    borderWidth: tokens.borderWidthS,
    borderColor: tokens.colorBorderSecondary,
    borderStyle: "solid",
  },
});

Each token (colour, font size, border width, spacing, etc.) resolves to the right per-platform value:

• Web: compiled to CSS variables in the static CSS file StyleX emits.
• Native (iOS + Android): resolved to platform-native style primitives at build/runtime.

Role in the cross-platform stack

ZDS tokens are the theming layer for Zalando's cross-platform design-system component library. They sit beneath the react-strict-dom-driven HTML subset; components consume tokens for their styling. This means a single component definition (e.g. <DefaultMessage />) produces the correct Zalando-branded styling on every platform — no per-platform CSS/theme duplication.

See concepts/design-token-cross-platform-theming for the design principle.

Seen in

• sources/2025-10-02-zalando-accelerating-mobile-app-development-with-rendering-engine-and-react-native — canonical first source. Example import shows tokens.colorBackgroundDefault etc. being consumed in a cross-platform BaseMessage component.

Related

• systems/stylex
• systems/react-strict-dom
• concepts/design-token-cross-platform-theming