Design Systems, Brand Identity

Style Guide & Component Library

A set of reusable styles and components in Figma to ensure consistency and efficiency.

Summary

When we began working with this client, they did not have a design system for their internal products so there wasn’t good consistency and the design team was spending too much time recreating and searching for existing components and styles. To solve for this, I created a comprehensive style guide and component library in Figma to be used across the products. The system of 110+ styles and 170+ components was used daily by 4 designers and 2 software developers, significantly improving design efficiency and consistency.

My Role

  • Organized existing components and styles

  • Expanded to create a comprehensive library

  • Assigned meaningful and searchable names

  • Published in Figma for easy access by design and development teams

  • 110+

    Styles

  • 170+

    Components

  • 4

    Products

Style Guide

Colors

Primary Colors

The primary color palette is used across all the interactive elements such as CTA’s, links, inputs, active states, etc.

Red
#CC0000

Blue
#CC0000

Black
#121212

White
#FFFFFF

Shades and Tints

Red

#FFE0E0

#FFA3A3

#FF2929

#B30000

#4D0000

#EAEDFC

#93A5F0

#3D5EE3

#1D3FCA

#0C1B57

#FCFCFD

#F6F7F8

#E6E9ED

#BFC8D0

#495662

#FFC2C2

#FF6666

#CC0000

#800000

#190000

Blue

#BFC9F6

#6982E9

#284CE0

#152D90

#04091D

Grey

#F9FAFA

#F3F4F6

#E0E4E8

#7E8F9F

#181D21

Typography

Typeface

Hierarchy

Grid System

Icons

Black

Interface

Communication

Notes & Files

Status

General

White

Interface

Communication

Notes & Files

Status

General

Components

Buttons

Button Sizes

Button States

Fields

Field Sizes

Text Fields

Dropdowns

Text Boxes

Selections

Toggle Switch

Checkbox

Radio

Slider

Date Picker

Navigation

Tabs