Drop #346 (2023-10-04): Design Time

the design system ecosystem; Storybook; Color Ramps For Design Systems

Tis been a spell since we've focused solely on the “design” side of things, so today we go on a journey from the meta to the micro as we look at design systems as a whole, then a few tools to help build various elements of a design system.

TL;DR

This is an AI-generated summary of today's Drop.

• This section discusses the anatomy of a mature design system ecosystem for organizations, outlining various layers such as core design system, technology-specific layer, recipe layer, smart components layer, and product layer. It emphasizes the importance of a layered approach for orchestrating design across teams and products within a company. Gall's Law

• Storybook is introduced as a popular open-source tool for developing, testing, and documenting UI components in isolation. It supports various frontend frameworks and provides an isolated environment for UI development, speeding up the process and ensuring each component works as intended. The post also provides a well-done walkthrough for getting started with Storybook.

• The section shares a guide on creating color ramps for use in design systems. The process involves starting with brand colors, adjusting lightness and saturation, and ensuring accessibility by checking contrast ratios. This creates a solid foundation of colors that can be applied systematically across products and interfaces.

---

the design system ecosystem

This article outlines the anatomy of a mature design system ecosystem for organizations. While it's aimed at larger orgs, I think the principles in it may be of use to anyone looking to develop a shareable design system standard (personal, or for an org).

You may not realize that you “need” a design system, but having one can help you focus on getting stuff done, vs constantly being in “experiment” mode (I may be describing myself right now). We have outstanding designers at work, and it has been a privilege to see how a design system gets built. In fact, without even knowing that this law existed, it was obvious (in retrospect) that our internal team abides by it:

A complex system that works is invariably found to have evolved from a simple system that worked. A complex system designed from scratch never works and cannot be patched up to make it work. You have to start over with a working simple system.
– Gall's Law

The author describes various design system ecosystem layers, including:

• a core design system layer, which contains the common, organization-wide UI building blocks for both design and development;

• an optional technology-specific layer, which contains framework-specific and native implementations of those common UI components;

• an optional recipe layer, which contains composed UI components to be used consistently across specific contexts (like a product or product family), but aren’t reusable across the entire organization;

• an optional smart components layer, which contains UI components wrapped in logic, functionality, or other smarts to make the integration of common components and services easier for product developers; and,

• a product layer – the actual websites and apps that we ship.

“Recipes” allow product teams autonomy while adhering to standards, and “smart components” provide common functionality, so teams can focus on more important work. A “reference website” gathers all assets in one place for guidance.

The author recommends relying on web components for building reusable UI code; and, a “storybook” (more on a tool for that in the middle section) helps with development, testing, and documentation. Products then consume design tokens, components and recipes through framework packages.

This layered approach provides a robust way to orchestrate design across teams and products within a company.

I don't want to steal any more thunder from the post, since it goes into tons of detail and should be an invaluable resource to help you (or your team/org) create almost anything.

Storybook

Storybook (GH) is a popular open-source tool for developing, testing, and documenting UI components in isolation. It supports various frontend frameworks, including React, Vue, and Angular, and is widely used by thousands of teams for UI development, testing, and documentation. While I mention those super popular, ginormous frameworks, there is support for Lit, and it's fairly CSS system agnostic.

Fundamentally, it provides an isolated environment for developing and designing UI components outside of your application. This allows coders to work on components individually without affecting the rest of the application, accelerating development and ensuring that each component works as intended. It has a wide range of add-ons and plugins that extend and customize its functionality, and also auto-generates documentation from stories, making it easier for teams to adopt existing UI patterns.

I considered doing a walkthrough, but they've got one that is very well done, and if you (like me) prefer Lit, adapting it is pretty straightforward:

$ npm create vite@latest sblit --template lit
$ cd sblit 
$ npx -p @storybook/cli sb init --type web_components

and you'll get a new browser window with the guide and full instructions/help.

Fair warning: this will require some dedicated learning cycles, but you'll spend less time (in the future) on boilerplate code, and manual duplication of efforts if you do make said temporal investment.

Color Ramps For Design Systems

This post provides guidance on how to create color ramps for use in design systems (which is good, given the title of the article). Color ramps transition colors smoothly from light to dark and are used to generate a catalog of color primitives. The process involves starting with defined brand colors, adjusting the lightness at each step to create a range of values, and refining the saturation as needed. Accessibility is ensured by checking contrast ratios between colors. The same steps are then repeated to generate additional color ramps for all other colors in the palette. New colors can easily be added by duplicating an existing ramp and shifting the hue values. Following these steps creates a solid foundation of colors that can be applied systematically across products and interfaces.

It sounds simple, but you do need to take into account accessibility, differences in how devices display pixels, and how to handle ramps across all the brand colors you have. It's a great checklist with lots of small, but useful, details to keep bookmarked.

FIN

For those experiencing autumn colors, this might be a good opportunity to experiment with Storybook by creating a fall color palette using the ramp guidance in the last section. ☮️