Creating a Unified Digital Style Guide

Bridging the Gap: Building Our First Digital Style Guide from Scratch

Prior to this initiative, our organization had no official style guide for digital platforms — only legacy materials created for print. This resulted in inconsistencies across web interfaces, ad hoc design choices, and a lack of clear standards for buttons, typography, forms, and color usage.

I led the effort to design and document a comprehensive, ADA-compliant digital style guide, enabling consistency, scalability, and faster collaboration between design, development, and marketing teams.

Without a shared digital design system, we faced:

  • Inconsistent UI elements across products and platforms

  • Duplicate work and slower handoffs

  • Accessibility issues due to lack of tested contrast and structure

  • No clear rules for mobile vs. desktop behavior

  • Frustration from engineers and content creators.

“Everyone was designing in a silo. No one was sure what the ‘right’ button or color was.”

  • Establish a cohesive design language for all digital products

  • Define rules and components for use across web and mobile

  • Ensure accessibility (ADA/WCAG compliance)

  • Enable faster onboarding and cross-functional alignment

Get everything aligned

  • UX/UI Design Lead

  • Design Systems Architect

  • Visual & Interaction Standards

  • Accessibility Implementation

  • Collaboration with Dev & Brand teams

My Role

The designed solution

To address the gap, I created a robust digital style guide that:

  • Extended the print brand into accessible, responsive digital design

  • Standardized reusable components and states (buttons, links, forms)

  • Defined a scalable color system and type hierarchy

  • Balanced flexibility for future growth with enforceable consistency

  • Aligned with WCAG/ADA accessibility requirements

Buttons & States

  • Primary & Secondary CTAs with default, hover, pressed, and disabled states

  • Minimum sizing for accessibility (150px wide minimum, 4px corner radius)

  • Defined spacing & padding (e.g., 2.4x horizontal font size)

Link Behavior

  • Hyperlinks vs. Inline links

  • Pressed and disabled states

  • Carat spacing and vertical alignment

Color Palette

  • Primary, secondary, and CTA-specific colors

  • Hex codes included for developer handoff

  • Contrast guidance for ADA compliance

Typography

  • Open Sans system for body, headlines, and links

  • Defined usage by context (e.g., semibold for actions, regular for body)

  • Proprietary “Energy” typeface usage and fallback options

Forms

  • Input fields, dropdowns, calendar selectors

  • Error states with iconography and labels

  • Consistent 4px radius matching buttons for harmony

  • Unified UI across web applications and marketing pages

  • Reduced design and dev turnaround time due to reusable components

  • Easier onboarding for new designers and developers

  • Improved accessibility and ADA compliance confidence

  • Increased user trust through visual and behavioral consistency

Design systems are about more than visual polish — they’re about communication, clarity, and trust. By translating a brand from static print to flexible digital interfaces, we created a foundation that scales with our teams and products.

Results & Reflections