Bridging
the Gap
A token-based, AAA-accessible design system for Blue Cross Blue Shield of Kansas — unifying four teams, cutting handoff time in half, and making consistency the default rather than the exception.
Four teams.
Zero alignment.
Marketing was building one thing. UX was building another. Customer Experience had its own patterns. Development was implementing all three, inconsistently. The result was a product that looked different depending on which team had last touched it.
Blue Cross Blue Shield of Kansas needed more than a component library. They needed a single source of truth — a system that could serve radically different teams with radically different workflows, without requiring everyone to agree on everything before shipping anything.
The additional constraint: the entire system had to integrate with a Drupal/Acquia CMS infrastructure. Beautiful Figma components that couldn't be consumed by developers were worthless. The design system had to be built for implementation, not just for design review.
Token-less color and type
Colors were defined as raw hex values in individual designs. No tokens, no semantic naming, no consistency enforcement. A brand color update meant hunting through hundreds of files and hoping nothing was missed.
Undocumented components
Components existed in various Figma files but had no usage documentation, no naming conventions, and no relationship to their development equivalents. Handoff conversations were clarification sessions in disguise.
Accessibility was ad hoc
Accessibility compliance was checked reactively, per-feature, at the end of design — which meant expensive rework when issues were found. The system needed to bake compliance in, not bolt it on.
Tokens first.
Everything follows.
A design system is only as strong as its foundation. We started with tokens — not components — because tokens are the atomic decisions that cascade through everything else.
The token architecture established semantic naming for color, typography, spacing, and elevation. 'primary-action' instead of '#BCDE4A'. 'spacing-md' instead of '16px'. These weren't just naming conventions — they were the contracts between design decisions and code output.
Once the foundation was stable, we built the component library in Figma using EightShapes Spec for embedded documentation. Every component shipped with annotated specs, interaction states, accessibility notes, and usage guidelines — all inside the Figma file itself.
Accessibility wasn't a checklist — it was a specification. Every component was built to AAA compliance from the first iteration, with contrast ratios, focus states, screen reader behavior, and keyboard navigation documented for each. This meant the 'accessibility review' conversation with development was a confirmation, not a discovery.
Less time arguing.
More time building.
The measurable impact of a design system is always downstream. The immediate output is documentation. The real output is every conversation that doesn't happen because the answer is already in the system.
Design-to-development handoff went from clarification sessions to confirmation reviews. Developers could consume component specs directly from Figma without waiting for written documentation. New page templates were assembled from existing tokens and components — removing the blank-canvas paralysis that slows every new build.
Consistency
by default.
The system's success isn't measured in components shipped. It's measured in how quickly teams stopped arguing about what things should look like — and started building.
The 30% reduction in development time wasn't from building faster. It was from removing the overhead of per-component decisions that had already been made, documented, and agreed upon. The 40% faster handoff came from the same place: clarity that was designed in, not negotiated over.