

I conducted an audit of all the existing separate components for top navigation bars across marketing and product

Logo size audit (left) and my new sizing structure exploration (right)

Our logo component before (left) and after (right) my standard sizing and light/dark mode work




Design system technical documentation

Originally, our icon components and the export frames were kept in two separate files

The existing icon library was messy, redundant, and inefficient and required keeping two different files up to date

Our new consolidated icon library after my reorganization process

I took advantage of Figma's auto layout feature to organize all of the icons into rows and categories

Each icon row now houses the DS component, export version, editable linework version, and alternate icons considered. I color-coded the different versions to make them easy to distinguish and hid all but the DS component to prevent confusion.

Original light mode color palette alongside the dark mode color palette I created, which included my recommended structural changes to be applied to both modes in order to enable 1:1 switching