Building a design system

OVERVIEW

As our product ecosystem scaled, we needed a unified, token-driven design system to reduce inconsistencies and improve efficiency. This case study outlines the methodology behind building a structured system using clear naming conventions and layered token categorization.

Tokens were organized into four logical groups:

  1. Brand – core values like colour and typography

  2. Alias – contextual applications of brand tokens

  3. Mapped – semantic roles (e.g., surface/action)

  4. Responsive – adaptive rules for layout and spacing

Brand
Alias
Mapped
Responsive

Applying tokens to components.

Breakdown

Each token category is structured to enable optimal scalability across platforms and use cases.

TOKEN-AWARE UI ELEMENTS

Example components

Built for Everyone.

Accessible

Making accessibility a default standard across all components and modules.

Reusable Functional Modules.

Result

Components were assembled into reusable modules within our CMS, enabling page authors to build consistent yet flexible layouts across Amazon Jobs.

Back to