Soberlink UI

Before starting my first project at Soberlink, the Identity management project, I built a small design system to manage styles and components across future products. The goal was to start in Figma, then extend to a front-end component library in Vue powered by Storybook.

Soberlink lacked consumer-facing digital products beyond basic apps. The end-users—healthcare providers, lawyers, and clients—required an interface that looked trustworthy and professional. I established the visual foundation through typography and color.

I selected Adelle Sans for its excellent legibility and warm personality that complements the company's logotype, Eurostile. The typeface balanced professionalism with approachability, essential for our healthcare and legal audiences.

The color system started with a base color of #047EB6—a value close to the blue in our logo that has a passing AA Large contrast with white text. I used Colorbox to build out the other hues and values.

I set the 50 levels to have white text pass AA Large contrast. This made it easier to pair font colors with background colors without measuring contrast every time. The decision streamlined the design process while ensuring accessibility compliance.

For neutrals, I chose a slightly cool hue to complement our blue accent. The neutral palette has 1 more shade than the other colors because I often find I need a larger range of grays for backgrounds, borders, and text. The easing moves faster through middle tones, giving me smaller steps at the lighter and darker ends for subtle contrast between elements.

The yellow shades need refinement—by far the most difficult color to work with in maintaining both vibrancy and accessibility.

I started with primitive components, focusing on buttons and input fields. These formed the foundation, built in Figma with comprehensive variants and states. The structure allowed systematic expansion as product needs evolved.

The "just-in-time" component building approach proved effective—we built exactly what was needed without over-engineering unused elements.

If I approached a full color system again, I would explore using the CIELAB colorspace to achieve more uniform lightness across palettes. I would also invest more time upfront defining tokens and semantic naming. Rather than updating a color and wondering which components it affects, tokens would provide a clear map of color usage. This approach would also simplify theming for features like dark mode.