Surefront Design System

When I joined Surefront, the design system was essentially a set of core styles, components, and patterns isolated in Figma. One of my top priorities was to evolve it to be a more robust and consumable set of documentation that not only catalogued the parts of the system, but provided context for how and when to use them. On top of that, the new design system would be a living resource for the design, development, and marketing teams to reference the Surefront product design process — including our principles, personas, pre-flight checklists, and more. To pull it off, I leveraged Zeroheight to be the single source of truth for documentation, and synced Figma and Storybook components where applicable to support UI styles and design patterns. The final result was design.surefront.com (password-protected, only accessible internally) — a frequently updated resource available to the entire organization that was a one-stop shop for everything related to product design and development at Surefront.