The atomic component library is founded on elements like colour and typography that combine with padding and margin rules into core components such as fields and headers. These all lock up into complex component layouts such as tables and modals. Each layout may transition through specific states or sequences in UX design patterns.

The finished design system was built into Figma and XD for the product team and documented on Notion.

‍To accomplish usability, the design system: 

•. Reorganized all navigation using a two-tier system with page tabs;
•. Created consistent top and bottom toolbars for content and page actions;
•  Rewrote most text using language that tested well among users;
•  Implemented a consistent table-to-form page hierarchy for user flows;

And much more.