After finalizing a complex, accessible color scheme with the Design Team at Flatiron School, it was nice to take a break and make some cover art for the Figma file 😌

I contributed the creative direction and overall architectural guidance for this design system. Our Principal Designer, Drew Koszulinski, executed the large majority of the components outlined in this post.

Foundations

These are the colors and fonts that drive the entire system. We chose a mix of Fira Sans and Fira Code as the work-horse fonts. Financier is referenced in these designs, but it was only used in marketing material.

For the rest of the framework, we used the Atomic approach, organizing the library into atoms, molecules, and organisms.

Atoms

The atoms in this library are all the little UI bits that make up bigger features.

Molecules

Comprised of combinations of atoms, the molecules provide actual utility to the end user.

At the time of designing this, the products at Flatiron School were broken up into a student-facing application called "Base" and an educator-facing application called "Guide".

Organisms

Organisms combine molecules to make repeatable patterns for whole features. Here we see several versions of media content as well as student progress indicators.