back

hatch headless ds

The headless ds was my largest project yet. It was our approach at Boldheart (formerly hatch) to create a universal component-driven system for design and front end development. Our ambitious goal was to cut development time by a third, leaving us more time to do QA.

The headless ds consists of three parts:

  1. A design system
  2. A react component library
  3. Workflows inbetween

1. The design system

A component's journey starts in Figma. Each component contains a lot of variables: colors and sizes vary from client to client. Using Tokens Studio, we are able to save those so-called design tokens and are able to create new token-based themes for new clients. The tokens can be converted to CSS variables, which we then use in the component library.

Additionally to Figma, we use Zeroheight for design documentation. It proved to be a really practical tool for design handover to developers.

The dropdown component in our design system documentation at ZeroheightThe dropdown component in our design system documentation at Zeroheight

2. The React component library

This is the heart of what I worked on. The focus in our component library is flexibility. Built-in scripts generate component boilerplate that promotes adding documentation and frontend tests.

We use Storybook to document and test our components. A set of hand-crafted addons make sure that we are in line with the design vision.

The DataTable component in our component system documentation using StorybookThe DataTable component in our component system documentation using Storybook

3. The workflows

We incorporated a whole bunch of tools into our system:

Structure diagram of all platforms that are being used by the headless dsStructure diagram of all platforms that are being used by the headless ds

To make sure everything works well, we interconnected all of them. Design tokens are automatically converted to CSS variables. Task status updates are visible directly in our storybook. New component library versions are released to our private npm registry automatically on each commit to main (which is quite often).

We also introduced workflows to promote development habits, using GitHub Actions. We automated visual regression tests across all themes and run linters on PRs, to name some.

Many of our tools work together using the headless ds middleware - a Remix application that fetches data from all kinds of sources and displays it together. Eg. the status page displays information from multiple ClickUp tickets and links to design and development resources:

Middleware status page showing a list of all components and their statusesMiddleware status page showing a list of all components and their statuses

New components are added on the go, during the development of client projects. To simpilify this process and invite other devs to add maintainable generalized components to the headless ds instead of very specific ones directly to the client projects, we offer project generation scripts that clone and link the headless ds to new frontend projects as part of our internal command line tool, hatch cli.

The Team

I am blessed to have worked on this together with a incredibly talented team.

Salvatore Anastasia is the head behind the design system. He is the reason why everything looks so good and works so well together. Design systems are usually created by a whole team of designers, so the work that he did alone is outstanding.

Neji Ghazouani worked on the dev side with me. He even wrote his final thesis on the headless ds, which makes me very proud.

Additional thanks go to my boss Julian Willner for believing my vision.

back