Skip to content

Fleet Space Design System

Fleet Space Design System Version 1.0 artwork showing Earth and the Fleet wordmark
Role Product Design Lead
Capability Design systems, Information architecture, Full-stack development
System Enterprise SaaS, Data platform

Introduction

A working design-system exploration developed alongside Fleet’s geoscience products, bringing reusable interface patterns, data-heavy components and interaction behaviours into a shared implementation.

The production design system spans about 2,400 components. This interactive example shows a small, selected set of patterns, and how I worked across design and code to establish them as the product evolved.

How the system works

From Figma foundations to working patterns

The library is connected to the way the product is designed and built: variables and component states inform implementation, while clear documentation makes patterns easier to reuse across a much larger system.

01 / Define

Start with foundations and states

Figma variables hold shared values across light and dark modes. Components make important states visible early, including focus, disabled, success and error.

Figma Variables panel showing the Input collection, light and dark modes, and grouped design variables
Shared variables and modes in Figma
Figma input component with default, filled, focused, disabled, success and error states
Input component states

02 / Check

Check contrast while setting the foundations

Check colour pairings as the palette and semantic variables take shape, so contrast issues can be resolved before those choices reach implementation.

Figma colour contrast checker displaying a contrast ratio and WCAG AA and AAA pass results
Checking a colour pairing against WCAG contrast targets

03 / Implement

Carry design decisions into code

A Figma plugin exports variable collections as structured JSON. The implemented input then applies those tokens to a real, accessible React component.

Figma Design Token Exporter with a collection selector for font, colour, spacing and input variables
Export a selected variable collection
Dark-mode text input component documentation with example fields, anatomy, and API details
Implemented component and usage guidance

04 / Document

Make the component clear to people and tools

Human-readable guidance explains use and validation ownership. A machine-readable contract records the supported API, and an implementation prompt points agents to both sources and the component itself.

Input component Markdown documentation showing a usage example, API table, and validation ownership
Usage and API documentation
JSON component contract defining the Input component properties, types, defaults, and behaviour
Machine-readable component contract
AI agent implementation prompt directing the agent to read the component contract, documentation, and source before coding
Prompt grounded in the component sources

Live design system documentation

Open full screen

The working result of this design and implementation process: a living, interactive reference for selected components, their states and usage guidance.

Selected examples only · The complete production library contains about 2,400 components.