Design System Case Study - Part 2
An example of how to build intentional design by first creating a system of design variables

I started this example theme with 9 color variables, including surfaces (light/dark), brand colors (primary/secondary), and highlight colors.

An example of how two typefaces can create a broad typography theme that builds visual hierarchy

This shows all the possible combinations of surface color and type (typeface, size, weight) that meet at least the AA level of WCAG compliance. While not all the examples shown here will be part of the final design system, this is a tool for choosing accessible pairings.