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.
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 Stand8.io that lack cohesion.
Diffent pages on Stand8.io that lack cohesion.
Diffent pages on Stand8.io that lack cohesion.
Assets across HubSpot, LinkedIn, and Sales that lack visual consistency.
Assets across HubSpot, LinkedIn, and Sales that lack visual consistency.
Assets across HubSpot, LinkedIn, and Sales that lack visual consistency.
Diffent pages on Stand8.io that lack cohesion.
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 has granular detail but would confuse a novice
MUI has granular detail but would confuse a novice
MUI has granular detail but would confuse a novice
MUI has granular detail but would confuse a novice
IBM Carbon is clean and easy to understand with orderly charts
IBM Carbon is clean and easy to understand with orderly charts
IBM Carbon is clean and easy to understand with orderly charts
IBM Carbon is clean and easy to understand with orderly charts
Adham Dunnaway's Practical UI gives enough without being overbearing
Adham Dunnaway's Practical UI gives enough without being overbearing
Adham Dunnaway's Practical UI gives enough without being overbearing
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.
First, I took Practical UI's base and applied Stand 8's colors, adding shades where necessary.
First, I took Practical UI's base and applied Stand 8's colors, adding shades where necessary.
First, I took Practical UI's base and applied Stand 8's colors, adding shades where necessary.
First, I took Practical UI's base and applied Stand 8's colors, adding shades where necessary.
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
I experimented and adjusted colors in light and dark mode to ensure accessibility.
Here's the style guide applied to marketing lead magnets.
Style guide applied to case studies
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
Stand 8's completed Style guide for text, colors, and background
Stand 8's completed Style guide for text, colors, and background
Stand 8's completed Style guide for text, colors, and background
Stand 8's completed Style guide for text, colors, and background
Style guide implemented across case studies, sales sheets, and web
Style guide implemented across case studies, sales sheets, and web
Style guide implemented across case studies, sales sheets, and web
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
