Essentia Design System
Helping Orin scale their clientele to 2x in just a period of 2 months
Platform: Essentia Design System,
Industry: B2B Agency
Dated: June 2024
My Role: Design System, UI Design
Timeline: 3 Weeks
Creating a design system for a rapidly scaling design agency.
The founding idea of Orin Design Agency was to cater to startups and businesses looking for product design services for their businesses. The main challenge was to create a design system so that Orin can rapidly design experiences that resonate cohesion, quality and usability across all platforms. A design system will help the agency develop a long term style for their projects and also ensure there are minimum inconsistencies to their design.
There is also a case of reducing training and cross functional load across teams that work in collaboration to design, develop and execute their design decisions.
Project Summary
Objective
The primary objective was to create a design system library to help Orin scale their client base. The problem statement really was, "How can I help a design agency increase their output while maintaining the quality and cohesion in their finished designs?"
Impact
Deliverables
Design System Library with over 30 variable components and a full defined token library.
How did the atomic design principles help?
The foundations helped us curate the base elements such as the typography, the colors, icons, effects and elevations that will be used in combination to produce components. These components consist of buttons, button groups, modals, calendars and all the components that in combination make the larger components. And henceforth the templated sections.
So it all represents the basic model of an atom, that starts from the very base and the combination of different elements that create, literally everything.
WCAG 2.2
The design system was designed to have a WCAG 2.2 compliant accessibility. The colors used in all the elements have a contrast ratio of over 6. It was essential to make sure the agency designs meet the accessibility criteria throughout all the devices.
How did I name the tokens?
Putting it all together
Using the components I put together the remaining components for the design system, These components consist of accordions, modals, menus, profile sections, profile sections and other commonly used SaaS components.