Creating a basic design system to modify per client — Shasta McBride

I created a dynamic design system in Figma that can be used as the basis for any new project and grow as needed.

View my design system in Figma

The file structure of the design system is the first consideration.

I ended up creating the most basic design system because my current project was only one client with about 10 web pages.

This entailed using a basic component library with a few unique components created for a few pages.

The other design system file structures had an emphasis on being dynamic and were considered and saved for future reference.

2. Next I settled on a color key by following the same color math from existing design systems (in this case Tailwind) but changing the saturation values so the colors were different but aligned from 50-900. I used the contrast plugin to determine and edit my color values so that they were all accessible. From there I made my color styles, gradients, and avatars.

3. From there I created my typography styles and scales, my container styles, and my grid and layout sizes.

4. Next I created my components utilizing atomic design, starting where possible with nested components and atoms.

5. From there I built out the main components of my standard component library using my design system styles and math to make the molecules and organisms.

A scholar’s digital library with unique context requirements

Defining Style and Easing Cognitive Load