Core Properties

DriveCentric had just gone through a rebrand with a new logo and other branding elements. Leadership was able to provide me with full control to evolve their brand guidelines into a fully functioning design system. Starting with properties like spacing, radius of shapes, shadows, and more, I began to lay out the structure for not only the design system but also how the system would be organized for easy handoff to devs and easy use for future designers.

Color

Creating colors in a design system involves developing a cohesive and versatile palette that reflects the brand's identity and enhances user experience. I looked to leverage the primary colors from the brand guide and then, expand this selection to include semantic colors and other accent colors that complement the primary choices and provide visual interest. Additionally, I included shades, tints, and neutrals for flexibility and accessibility. Through the process I wanted to ensure there's sufficient contrast, especially for text, to meet accessibility standards.

Typography

Again taking cues from the brand guidelines, I created an extensive set of typography tokens to be used in every product that DriveCentric has and will have. This will allow for easy implementation from dev but also flexibility for designers to use depending on the visual look and feel they wanted to establish.

Base Components

Once the core properties were created I moved on to base components essential to any product such as buttons, tags, chips, inputs and more. Each of these components had their own dedicated page in Figma with:

• Component

• Various states & sizes

• Properties

• Anatomy of the component

• Examples

Complex Components

After the base components were created, I began to create more complex components that were already being used in DriveCentric's product. This allowed me to slowly evolve the current disjointed design language to a more cohesive and advanced design language.

Results

With now 2 full-time designers on staff who are able to quickly create designs for new features or made adjustments to legacy features, DriveCentric is able to move at an even quicker pace. The dev team is in progress to build out the entire designs system in the dev ecosystem which will result in even quicker roll out of new products and features to continue to have DriveCentric be a leader in the market and beyond.