Color Guidance — Accessible, Branded, and Scalable Visual System

Project: Defined and implemented accessible, systematized color palettes and UI color mappings for Outlook, enabling consistent, branded, and inclusive visual experiences across Mail, Calendar and theming surfaces.

My Role

Design Lead defining comprehensive color guidance framework spanning brand palettes, dark mode, UI colors, and customizable calendar/category colors across platforms.

Opportunity

Led definition and implementation of comprehensive color guidance framework for Outlook’s visual evolution and system unification. This work informed dark mode guidance across Outlook and contributed to broader Microsoft 365 web initiatives.

Objective: Modernize visual design, ensure accessibility across all themes and modes, support personalization while maintaining brand cohesion.

Strategic Scope: Foundational to One Outlook effort, supporting design unification across Windows, Web, Mac, and Mobile surfaces. Balanced brand integrity, user choice, and technical feasibility.

Process

1. Core Palette Development: Defined accessible brand palette rooted in Fluent UI while optimizing for Outlook’s personality. Created neutral palette ensuring compatibility across all themes and modes.

2. UI Color Mapping: Developed comprehensive guidance connecting semantic color tokens to components (buttons, backgrounds, borders, text). Partnered with engineering for implementation validation.

3. Accessibility Integration: Conducted contrast testing across all themes ensuring WCAG 2.1 AA compliance. Incorporated support for full-bleed image theming and dynamic mode switching.

4. Customization Framework: Designed calendar and category color palettes supporting user customization while ensuring clear differentiation in high-density contexts.

5. System Documentation: Delivered detailed usage guidance and Figma libraries. Presented recommendations in leadership reviews for cross-functional alignment.

Results

Systemic Adoption: Color system implemented across Outlook’s modern endpoints, enabling scalable, consistent visual design aligned with Microsoft’s brand system.

Accessibility Excellence: All text and interactions pass accessibility standards across themes and modes, enhancing readability for millions while reducing support complaints.

User Empowerment: Calendar and category palettes provide accessible personalization options, improving daily usability and satisfaction.

Development Efficiency: UI color mappings accelerated engineering implementation and design-dev collaboration, reducing friction in cross-platform development.

Strategic Foundation: Became foundational layer for broader theming innovations including AI-generated themes, default theme efforts, and future roadmap initiatives.

Quality Impact & Cross-Team Influence: Established new standard for color accessibility and systematic thinking across Microsoft design teams.