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 between teams, and that caused end-to-end turbulence with each feature, which was costing us immense amounts of time, energy, and goodwill.

The solution I offered to these problems was to create a comprehensive design system that codified processes and patterns and lessened the delta between design and code. I 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 and semantic token system, and a refactored React component library. Additionally, accessibility became a central focus with every new component.

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

That being said, it's not perfect. For example, the semantic tokens are sometimes too prescriptive, baking in semantic decisions before the patterns were fully matured.

Future

The next chapter of the Douglas Design System addresses that problem directly with a redesigned semantic token layer and the implementation of the OKLCH colorspace. This way we can create unified color experiences programmatically to guarantee accessibility and visual hierarchy regardless of semantic meaning. This also aids the creation of color themes for new modes and white labeling.

• Figma
• Storybook
• React
• +
• Claude

As the industry moves toward design and code that begins with LLMs, Douglas needs to be redocumented to make it more machine-readable. This is the work ahead: to build a version of the system that models can consume and compose with directly and efficiently.