My role

As the sole designer to work on the design system, my responsibilities included:

• Setting up the Figma project and component naming structure
  

• Creating the underlying design token system
  

• Working directly with engineers to implement components and adopt best practices

Project timeline

Naming & Logo

All great design systems have a name, and Keel was to be no exception. In sticking with the nautical theme of NYSHEX, I settled on "Keel" as the name. On a ship, the keel is "the bottom-most structural member around which the hull of a ship is built." And since a design system is the structure on which a product is built, it fit perfectly.

Creating a consistent color palette

Based around the core brand color, I set out to create a new color palette that was both accessible, but also consistent between different colors at the same position in the ramp. To accomplish this, I used the Leonardo tool and manually tweaked contrast values to dial in a varied and consistent color palette.

Complete color palette

Split across 9 colors and each with at least 8 shades, a new palette was created that kept relative luminosity and saturation consistent across the same step in a different color.  This means that ColorOcean600 has the same relative brightness and saturation when placed next to an element with a color of ColorCoral600.

As you may notice, each color is nautically themed as well.As you may notice, each color is nautically themed as well. level. By using similar relative saturation and luminosity, none of the alerts stand out against each other in terms of color.

Color scale comparison

In the below example of an Alert component, the background of each alert has a 100 level background color, and the text and icons are 600 level. By using similar relative saturation and luminosity, none of the alerts stand out against each other in terms of color.

Grayscale comparison

When converted to grayscale, the uniform color ramp can be seen more clearly.

Keel's design tokens

To make component development easier, as well as support NYSHEX's goal of full white-label support for its customers, a full token architecture was created from scratch using Tokens Studio. Early on in the project, I met with the engineering team to define a token strategy and naming convention.

After much discussion (and leaning on my past experience with Quilt, we settled on a Global to Alias level token nomenclature.

Global tokens

While every token starts as a global token, some also end as global tokens. For the sake of ease of use, these tokens remained as global tokens and never received an alias token:

• Spacing (margin, gap and padding)
  

• Sizing (specifically declared width & height)
  

• Corner radius
  

Alias tokens

Alias tokens take global tokens and apply one level of specificity to them. We applied alias tokens to:

• Typography
  

• Color
  

• Border
  

Component token example

Exposure in Figma Dev Mode

Whitelabel support

Identified early on in the project was the absolute necessity for Keel and the tokens to support whitelabeling the app for NYSHEX's various carrier clients. To accomplish this, I built a "core" set of tokens that contained the tokens that would be consistent for all themes (such as spacing and sizing), and then a separate theme for each whitelabel that contained brand-specific colors and typography.

Below is a video showing whitelabel theme switching within Figma. Note: carrier names have been anonymized and the video is slightly sped up.

Whitelabel theme switching in Figma

Components

Below is a list of components such as Alert, Text Badge, Date Picker, and Stepper (which is the most complex component in Keel)