Complex Variable Design Systems

At Strata Identity I created multiple Figma based design systems including variables for managing dark and light modes at the flip of a menu. I also created a React developer specific version containing only currently live elements in multiple states that were highly commented and descriptive.

Design Elements

All great design systems begin with the elements: icons, buttons, toggles, forms, inputs, selects, tables, pills, cards, menus - the list is long and every element counts. I created and maintained an entire library of elements across various versions of our application. Organizing, designing and prototyping every last pixel. All of the design system elements are created as primitives and have linked variants for hover, click, focus, select, etc.

Variables (Dark and Light Mode)​

To speed up our design process and to further extend the capability of our design systems I implemented a variables based color system. Giving us both the ability to switch color modes instantly and gain granular control over what exact colors are used in dark mode and/or light mode. This was eventually extended to include a third state for which exact colors were currently in use by the development team on our live application.​

Developer Ready Design Systems

I created and maintained multiple Figma based design systems including a React developer specific version. We called this version Mercury and it contained only currently live elements in multiple states, highly commented and descriptive. This system provided engineering with what they needed in a much more adaptable method that enabled faster and simpler updates they could immediately interact with.

Process Milestones

  1. Creating and iterating on pixel-perfect design elements from scratch; icons, buttons, menus, fields, radios, switches, sorts, inputs, selects, toggles, pills, tags, and every other kind of visual asset required.  

  2. Creating and refining color palettes and creating variable-based color systems for instant consistency and control in dark and light modes.

  3. Creating and maintaining a back-end-friendly developer-ready design system.

  4. Providing development and engineering what they need for a constantly maintained and updated live product, this includes custom and need-to-have-now direct requests.

  5. Supporting internal teams with clean design elements and standards via a design system.

Available for work.

720-320-1030
taikahn@gmail.com