Douglas Design System

Past

When I joined UP42 there was no design system in place. On the design side there was only an outdated and broken Figma library and lots of everyday components that lived within the product initiatives in which they were created. On the code side, frontend was in the middle of a massive transition from Vue to React and that only made problems worse.

Teams were re-inventing components and patterns each initiative, color values were hard-coded and varied from team-to-team, and that caused end-to-end turbulence with each feature which was costing us immense amounts of time, energy, and goodwill.

The solution to these problems was to create a comprehensive design system that codified processes and patterns and lessened the delta between design and code. We called our system "Douglas" after the incomparable Douglas Adams.

Present

• Figma
• Storybook
• React

Now, that picture is practically inverted. Design and code sit in much closer alignment, anchored by a state-of-the-art Figma library, a primitive + semantic token system, and a refactored React component library. Additionally, accessibility became a central focus with every new component.

Today, Douglas is being used daily across product, engineering, design, and marketing.

That being said, it's not perfect. The clearest example is the tokens themselves: in places they're too prescriptive, locking in semantic decisions before the patterns had fully settled. That rigidity solves one problem.

Future

The next chapter of the Douglas Design System addresses that problem directly. We are moving to OKLCH so we can create unified color experiences programmatically to guarantee accessibility and visual hierarchy regardless of semantic meaning. This is also meant to better aid the creation of color themes for new modes and white labeling.

• Figma
• Storybook
• React
• +
• Claude

The further horizon is design that begins with LLMs. Douglas was never built to be machine-readable, and that's the work ahead: a version of the system that models can consume and compose with directly and efficiently.