Gazelle Design System

One language for every ride.

A living system of foundations, components, icons and guidance for building clear, recognisable Gazelle experiences.

Explore foundations Browse atoms
4 Foundations
3 Atoms
1,383 Icons

One shared source of truth.

Start exploring

Everything connects.

Begin with the layer that matches your task. Each part uses the same tokens, language and intent.

01 / Foundations Set the character. Color, typography, spacing and elevation create a consistent base. Explore foundations 02 / Atoms Build interactions. Production-ready controls turn decisions into dependable patterns. Browse atoms 03 / Icons Communicate clearly. A searchable, optically tuned library keeps every symbol precise. Open icon library 04 / Specs.md Keep it documented. Human- and agent-readable guidance keeps implementation aligned. Read the specs

From token to interface

Designed once.
Used everywhere.

  1. 01

    Define

    Foundations give every decision a shared name and value.

  2. 02

    Compose

    Atoms turn those decisions into accessible interactions.

  3. 03

    Deliver

    Specs keep design and code moving in the same direction.