Color styles

Rather than defining a traditional style guide, I developed iota using a design-tokens system. Design tokens allow iota to be easily customizable, while also standardizing design variations.

Component library

Iota’s namesake is to emphasize the design system’s atomic design structure. Instead of building each UI component separately in a vacuum, I planned my workflow around designing the smallest most granular UI components first, and gradually nested them into more and more complex elements.

Patterns

To both reinforce Iota's best-practice guidelines and provide boilerplate UIs for new projects, I created a collection of common page and application examples. This also allows users to test colors, components, and sizing values holistically in the context of actual user interfaces.

Icons

Iota utilizes Tabler, an open-source icon library. These icons are organized into multiple levels of categories to help users navigate the collection through Figma's asset panel.