Fieldnote Design System

Fieldnote's analytics platform had grown through three separate product teams. Each maintained its own buttons, tables and colour palette, and customers moving between modules felt like they were switching products.

Design systems lead

Inconsistent components slowed every release. Designers rebuilt the same patterns, engineers maintained parallel implementations, and accessibility fixes made in one module never reached the others.

I began with a full interface audit, cataloguing every variant of each component across the product. Working with an engineer from each team, we agreed on a core set of foundations: colour, type, spacing and data-table patterns. We shipped them incrementally, one module at a time, instead of attempting a single big-bang migration.

We used design tokens as the single source of truth, shared between the design tool and the codebase. Components were built to meet WCAG contrast and keyboard requirements by default, so teams inherited accessibility rather than retrofitting it. A lightweight contribution model let any team propose a new pattern, with a fortnightly review to keep the library focused.

All three teams adopted the core library for new work, and the most-used components were migrated across the product. Designers reported spending far less time on repeated layout work, and accessibility issues fixed in the library now reached every module at once.

A design system is a product with its own users. The documentation site and office hours did more for adoption than the components themselves. I would start the contribution model earlier, since teams trusted the system more once they could shape it.