Inclusive Design System by Vanessa ChangInclusive Design System by Vanessa Chang
Inclusive Design SystemVanessa Chang
Cover image for Inclusive Design System
I build scalable design foundations where accessibility is the default, not an afterthought. Drawing on my background in Learning Science at Carnegie Mellon, I create an inclusive Figma library of up to 15 core components. This service ensures your team has a technically compliant, cognitively optimized toolkit that maintains accessibility as your product scales.

What's included

Accessible Foundations
A core system including WCAG-compliant color palettes, typography scales, and spacing tokens.
Library of Up to 15 Core Components
Custom-built Figma components (Buttons, Inputs, Modals, etc.) featuring fully defined interactive states, including the critical Focus state for keyboard users.
Design Token Architecture
A semantic naming system for styles that ensures consistency between design and development.
Accessibility Usage Guide
A "How-to" guide in Figma or Notion explaining the ARIA requirements and usage rules for each component.
Handoff Template
A reusable Figma template for your team to ensure every new feature includes the necessary accessibility specs.
FAQs
A standard UI kit focuses on visual consistency. An Inclusive Design System ensures every component is technically compliant (keyboard-ready and screen-reader friendly) and cognitively optimized. We build accessibility into the foundation so you don't have to spend thousands "fixing" it later.
I focus on the Design and Documentation side. I provide the "Source of Truth" in Figma with the exact technical specs, ARIA labels, and interaction logic your developers need. This ensures the design is technically sound before a single line of code is written.
The standard package includes up to 15 core components (like Buttons, Inputs, Modals, and Navigation). These "building blocks" cover roughly 90% of most product interactions. If you need a more extensive enterprise library, we can discuss a custom scope.
Yes. Whether I am building from scratch or refactoring your current library, the goal is the same: providing a fully compliant, documented foundation. "Updating" an existing system often involves a deep audit of your current components to identify and fix hidden accessibility gaps, ensuring they meet WCAG 2.1 AA standards without requiring a total redesign.
Starting at$4,000
Duration4 weeks
Service provided by
Vanessa Chang Pittsburgh, USA
Inclusive Design SystemVanessa Chang
Starting at$4,000
Duration4 weeks
Cover image for Inclusive Design System
I build scalable design foundations where accessibility is the default, not an afterthought. Drawing on my background in Learning Science at Carnegie Mellon, I create an inclusive Figma library of up to 15 core components. This service ensures your team has a technically compliant, cognitively optimized toolkit that maintains accessibility as your product scales.

What's included

Accessible Foundations
A core system including WCAG-compliant color palettes, typography scales, and spacing tokens.
Library of Up to 15 Core Components
Custom-built Figma components (Buttons, Inputs, Modals, etc.) featuring fully defined interactive states, including the critical Focus state for keyboard users.
Design Token Architecture
A semantic naming system for styles that ensures consistency between design and development.
Accessibility Usage Guide
A "How-to" guide in Figma or Notion explaining the ARIA requirements and usage rules for each component.
Handoff Template
A reusable Figma template for your team to ensure every new feature includes the necessary accessibility specs.
FAQs
A standard UI kit focuses on visual consistency. An Inclusive Design System ensures every component is technically compliant (keyboard-ready and screen-reader friendly) and cognitively optimized. We build accessibility into the foundation so you don't have to spend thousands "fixing" it later.
I focus on the Design and Documentation side. I provide the "Source of Truth" in Figma with the exact technical specs, ARIA labels, and interaction logic your developers need. This ensures the design is technically sound before a single line of code is written.
The standard package includes up to 15 core components (like Buttons, Inputs, Modals, and Navigation). These "building blocks" cover roughly 90% of most product interactions. If you need a more extensive enterprise library, we can discuss a custom scope.
Yes. Whether I am building from scratch or refactoring your current library, the goal is the same: providing a fully compliant, documented foundation. "Updating" an existing system often involves a deep audit of your current components to identify and fix hidden accessibility gaps, ensuring they meet WCAG 2.1 AA standards without requiring a total redesign.
$4,000