Differnt cards for text, color, stroke, fill, and background variables.

Style Guide

A System for Consistency

I developed a style guide for consistency across web, social, presentations, and other company assets. The result was a cohesive look that fostered trust for new and existing clients.

Differnt cards for text, color, stroke, fill, and background variables.

Style Guide

A System for Consistency

I developed a style guide for consistency across web, social, presentations, and other company assets. The result was a cohesive look that fostered trust for new and existing clients.

Project Overview

A Unified Brand with a Streamlined Design System

Stand 8 faced challenges maintaining consistency in its visual identity across our website, social media, and sales material. With growing teams and multiple stakeholders, the company struggled to present a cohesive and professional image.

I created a new style guide that standardized design elements, ensuring consistent use of colors, typography, and styles across all mediums.

This gave us brand parity with competing managed service providers and instilled trust with prospective and existing clients.

Responsibilities

Style Guide

Prototyping

Semantic Tokens

Web Design

UX Design

Responsibilities

Style Guide

Prototyping

Semantic Tokens

Web Design

UX Design

Tools

Canva

Figma

Framer

PowerPoint

Team

Front-End Engineer

Jr. UX/UI Designer

Marketing Designer

The Problem(S)

Inconsistency across web, social, and sales assets

Brand identity lacked professionalism

Consistency became more challenging as team grew

Different assets felt disconnected from the brand

Inconsistent, Fragmented Brand

As our team grew and we expanded our digital presence, Stand 8 faced issues with inconsistent use of colors, text styles, and design components. These inconsistencies diluted our brand and created challenges in presenting a cohesive identity.

This hurt our chances of winning business from potential clients. Without a clear system in place, maintaining consistency across touchpoints became increasingly difficult.

We needed to unify our brand visuals and ensure a professional presentation at every customer interaction.

The Problem(S)

Inconsistency across web, social, and sales assets

Brand identity lacked professionalism

Consistency became more challenging as team grew

Different assets felt disconnected from the brand

Inconsistent, Fragmented Brand

As our team grew and we expanded our digital presence, Stand 8 faced issues with inconsistent use of colors, text styles, and design components. These inconsistencies diluted our brand and created challenges in presenting a cohesive identity.

This hurt our chances of winning business from potential clients. Without a clear system in place, maintaining consistency across touchpoints became increasingly difficult.

We needed to unify our brand visuals and ensure a professional presentation at every customer interaction.

Diffent pages on Stand 8.io that lack cohesion.

Diffent pages on Stand8.io that lack cohesion.

Diffent pages on Stand 8.io that lack cohesion.

Diffent pages on Stand8.io that lack cohesion.

Diffent pages on Stand 8.io that lack cohesion.

Diffent pages on Stand8.io that lack cohesion.

Different assets across marketing, presentations, linkedin, and sales material.

Assets across HubSpot, LinkedIn, and Sales that lack visual consistency.

Different assets across marketing, presentations, linkedin, and sales material.

Assets across HubSpot, LinkedIn, and Sales that lack visual consistency.

Different assets across marketing, presentations, linkedin, and sales material.

Assets across HubSpot, LinkedIn, and Sales that lack visual consistency.

Diffent pages on Stand 8.io that lack cohesion.

Diffent pages on Stand8.io that lack cohesion.

Different assets across marketing, presentations, linkedin, and sales material.

Assets across HubSpot, LinkedIn, and Sales that lack visual consistency.

Research

How to Create a Scalable, Accessible Style Guide

How to Create a Scalable, Accessible Style Guide

I researched design systems and style guides from companies like MUI, IBM, and Adham Dunnaway’s Practical UI framework. These systems provided a foundation for balancing simplicity and functionality.

I researched design systems and style guides from companies like MUI, IBM, and Adham Dunnaway’s Practical UI framework. These systems provided a foundation for balancing simplicity and functionality.

MUI design system

MUI has granular detail but would confuse a novice

MUI design system

MUI has granular detail but would confuse a novice

MUI design system

MUI has granular detail but would confuse a novice

MUI design system

MUI has granular detail but would confuse a novice

IBM Carbon design system

IBM Carbon is clean and easy to understand with orderly charts

IBM Carbon design system

IBM Carbon is clean and easy to understand with orderly charts

IBM Carbon design system

IBM Carbon is clean and easy to understand with orderly charts

IBM Carbon design system

IBM Carbon is clean and easy to understand with orderly charts

Practical UI design system screenshots

Adham Dunnaway's Practical UI gives enough without being overbearing

Practical UI design system screenshots

Adham Dunnaway's Practical UI gives enough without being overbearing

Practical UI design system screenshots

Adham Dunnaway's Practical UI gives enough without being overbearing

Practical UI design system screenshots

Adham Dunnaway's Practical UI gives enough without being overbearing

By analyzing their approach to scalability and accessibility, I was able to adapt these principles to Stand 8’s needs.

With lots of different teams making material (solutions, operations, sales) I wanted the style guide to provide cohesion and be easy to follow, without feeling overbearing.

I kept the system simple, outlining simple styles for text color, backgrounds, fill, stroke, icons.

Focusing on a few key elements made it easier for "non-designers" to use the system.

Design Process

Playing with Colors

I began by auditing STAND 8’s existing colors and limiting the palette for simplicity while ensuring accessibility.

I created wireframes and mockups in Figma to test these colors and design components across breakpoints.

After refining components and sections, I transferred the style guide to Framer to see how it performed on live web pages.

By testing and adjusting the colors upfront, it ensured that system would work across different mediums.

Stand 8 conpleted design system

First, I took Practical UI's base and applied Stand 8's colors, adding shades where necessary.

Stand 8 conpleted design system

First, I took Practical UI's base and applied Stand 8's colors, adding shades where necessary.

Stand 8 conpleted design system

First, I took Practical UI's base and applied Stand 8's colors, adding shades where necessary.

Stand 8 conpleted design system

First, I took Practical UI's base and applied Stand 8's colors, adding shades where necessary.

Solution

A Unified, Accessible Style Guide

The final style guide was a simple, adaptable solution that provided clear guidelines for color, typography, and components.

This system was implemented across the website, LinkedIn, sales material, and presentations.

The use of the system resulted in a more cohesive and professional brand identity, enhancing both internal workflow and external perception. It helped everyone in the company uphold the brand.

Key Successes

Clear, flexible style guide

Cohesive visual identity

Improved credibility & professionalism


Key Challenges

Review process is difficult in a time crunch

The final style guide was a simple, adaptable solution that provided clear guidelines for color, typography, and components.

This system was implemented across the website, LinkedIn, sales material, and presentations.

The use of the system resulted in a more cohesive and professional brand identity, enhancing both internal workflow and external perception. It helped everyone in the company uphold the brand.

Key Successes

Clear, flexible style guide

Cohesive visual identity

Improved credibility & professionalism


Key Challenges

Review process is difficult in a time crunch

Sections of the style guide establishing guidelines for color usage.

Stand 8's completed Style guide for text, colors, and background

Sections of the style guide establishing guidelines for color usage.

Stand 8's completed Style guide for text, colors, and background

Sections of the style guide establishing guidelines for color usage.

Stand 8's completed Style guide for text, colors, and background

Sections of the style guide establishing guidelines for color usage.

Stand 8's completed Style guide for text, colors, and background

Screenshot of style guide implemented across assets.

Style guide implemented across case studies, sales sheets, and web

Screenshot of style guide implemented across assets.

Style guide implemented across case studies, sales sheets, and web

Screenshot of style guide implemented across assets.

Style guide implemented across case studies, sales sheets, and web

Screenshot of style guide implemented across assets.

Style guide implemented across case studies, sales sheets, and web

Visual Cohesion & Efficiency

The style guide improved visual consistency across all platforms, creating a cohesive and professional brand identity.

It streamlined workflow, reducing revisions and enhancing cross-team collaboration. Accessibility standards were also met, ensuring WCAG 2.2 compliance.

The style guide scaled effortlessly, adapting to new projects while maintaining design integrity, resulting in a unified brand presence across STAND 8’s website, social media, and sales materials.

This would help our brand compete against more established service providers and win new business from prospective clients.

Results

Improved efficiency for the design and ops teams

WCAG 2.2 accessibility standards were met

System scaled, adapting to new projects and content

Brand perceived as more trustworthy and professional

Improved efficiency for the design and ops teams

WCAG 2.2 accessibility standards were met

System scaled, adapting to new projects and content

Brand perceived as more trustworthy and professional

Visual Cohesion & Efficiency

The style guide improved visual consistency across all platforms, creating a cohesive and professional brand identity.

It streamlined workflow, reducing revisions and enhancing cross-team collaboration. Accessibility standards were also met, ensuring WCAG 2.2 compliance.

The style guide scaled effortlessly, adapting to new projects while maintaining design integrity, resulting in a unified brand presence across STAND 8’s website, social media, and sales materials.

This would help our brand compete against more established service providers and win new business from prospective clients.

Results

Improved efficiency for the design and ops teams

WCAG 2.2 accessibility standards were met

System scaled, adapting to new projects and content

Brand perceived as more trustworthy and professional

Up Next