Building and Managing Libraries and Design Systems for Accessibility, Efficiency, and Scalability.

• Accessibility
• Branding
• Development
• Graphic Design
• UI + UX

Over the past several years, I have led and contributed to the creation, evolution, and governance of multiple enterprise-scale design systems. These systems supported complex products used by large organizations, internal teams, and external customers, often across multiple brands and white-label implementations.

In parallel, I built and maintained a personal design library to continuously practice and refine system thinking. This library acts as a proving ground for accessibility-first decisions, scalable token structures, component APIs, and documentation patterns that translate directly into enterprise environments.

This case study highlights how I approach design systems holistically. From visual foundations and components to documentation, file organization, accessibility checks, and developer handoff.

Framing the Problem.

Challenge

Across multiple enterprise projects, design systems were fragmented, inconsistently documented, and difficult to scale, with accessibility, file organization, and hand-off practices varying widely between teams.

Solution

I led and contributed to building standardized, accessible design systems supported by clear component structures, Figma organization, documentation, and repeatable processes, validated through real enterprise work and my own evolving design library.

Context and Scope

I have worked on multiple enterprise design libraries across ITX and client engagements. These systems varied in maturity and scale, from early foundational efforts to large, legacy ecosystems requiring standardization and cleanup.

Common challenges included:

• Inconsistent component usage across teams
• Fragmented Figma file structures
• Limited or outdated documentation
• Accessibility gaps in existing UI patterns
• Difficulty onboarding new designers and developers

My role often involved setting standards, creating shared libraries, improving documentation, and aligning design and engineering workflows.

Personal Design Library as a Systems Lab

Alongside client work, I created a personal design system to intentionally stress-test ideas that are difficult to explore inside production environments.

This library was designed with:

• Accessibility as a baseline, not an afterthought
• White-label brand-ability and theme flexibility
• Token-driven foundations that scale
• Practical alignment with front-end development patterns
• Clear component APIs and usage guidance

Many patterns refined here later informed real enterprise systems.

Design System Structure and Taxonomy

This system currently includes coverage for:

Data Entry

Inputs, checkboxes, radios, selects, pickers, forms, sliders, toggles, and upload patterns.

Layout Components

Headers, footers, cards, drawers, panels, sidebars, wizards, and results.

Documentation and Governance

Change logs, feature documentation, specifications, handoff notes, and decision records.

This structure allows designers, developers, and stakeholders to quickly understand what exists, how it is used, and where to contribute.

Design System Page Map

A core focus of my work has been clear, scalable Figma file structure. The goal is consistency, discoverability, and ease of contribution across large teams.

The design system is organized into logical page groupings, including:

• Overview and onboarding
• Styleguide foundations
• Component categories
• Layout and patterns
• Feedback and states
• Documentation and process
• Checklists and governance

This structure allows designers, developers, and stakeholders to quickly understand what exists, how it is used, and where to contribute.

UX Process & Design Thinking

I approached this like any product design challenge — define, test, refine, document.

1. Define: Identify goals (clarity, accessibility, scalability) and constraints (no frameworks, self-contained build).
2. Design: Prototype in Figma, refine visual hierarchy and interaction states.
3. Test: Run Lighthouse and WAVE audits, keyboard navigation checks, and visual stress tests.
4. Iterate: Optimize file structure, reduce CSS size, and fine-tune focus indicators.
5. Document: Maintain tokens, patterns, and accessibility notes for reuse.

UX Principles Behind the System

This system is built on universal UX principles:

Process & Workflow

Tools evolve, but the mindset stays the same.

I used Illustrator and Affinity Designer for vector and logo work, Photoshop and Affinity Photo for images, Figma for systems and page design, and VS Code + GitHub for build and version control.

I'm always exploring new tools — though it's come a long way from the days of editing CSS in Sublime Text with no syntax highlighting and pure faith.

Learnings & Next Iterations

Every iteration teaches refinement. Constraints created focus, and simplicity led to flexibility.

Next steps include exploring lightweight micro-interactions, adding user preference storage for accessibility options, and expanding the design system for multi-theme applications.

Reflection

Minimalism isn't about removing — it's about revealing what matters. This project became proof that accessibility, performance, and UX all strengthen each other when treated as one discipline.

It's a live case study that continues to evolve, just like the work I create for clients.

Next Steps

This case study will keep growing with new experiments and refinements. It's not a snapshot — it's a living document of how I approach design problems.

If you're looking for a designer who blends design systems, accessibility, and UX strategy with the precision of a developer — you're already seeing the results.

Still Curious?

Browse one of my other case studies, writings, resources, or reach out for a chat.

You can contact and connect with me through email, on Dribbble, or LinkedIn as well.