Launching Hotdesk

We recently released two new components; a modal and a password input. But more importantly, these components are the first to use our new design tokens, and officially marks the launch of Hotdesk, the design system behind Coherent.

With these newly designed components we’ve introduced a collection of design tokens for variables like color, spacing, corner-radius, and effects like opacity and background blur. We’re using a system of primitives, aliases (for color) and tokens to give ourselves the flexibility to make fairly discreet changes in the future, but enough rigidity to ensure styles remain consistent throughout our components.

I’ve worked closely with our developer over the past few months to ensure that design tokens they serve design and development without introducing too much friction into our setup. We need to keep maintenance to a minimum, but also needed a way to improve our design consistency going forward, and we felt that design tokens offered a good solution to both

We’ve introduced these design tokens on a small scale for now, only adding the tokens we needed for the modal and password-input redesign. As a small team, it wasn’t practical to establish a complete library of tokens right from the start, but because of the way they’ve been set up, it’ll be easy to add new ones, and update existing ones as needed going forward

I wish I had a flashy website to show off our design system documentation, but it’s unfortunately not something we currently have the resources to build or maintain. Nevertheless, I want to shoutout all the folks working on design system documentation - you’ve helped me so much to wrap my head around design tokens. I’ve looked at so many existing systems over the last few months but there were a few I kept coming back to

Nord - Nordhealth

Paste - Twilio

Atlassian Design System

Base - Uber

I’m really proud of the work that’s gone into this, and I’m really excited for what it’s going to mean for design at Coherent long into the future