Blue Cross Blue Shield · Healthcare & Insurance · 2018 – 2019 · Built from zero

FIBER
Design System

Blue Cross Blue Shield's first unified design system — token-driven, React-compatible foundations spanning consumer enrollment, member tools, and marketing.

Role Design System Founder / Lead — contract

Scope Foundations · Components · Guide · Web + Mobile · Enrollment Flows

Stack Sketch libraries · React-compatible coded components · Token foundations

Token Foundations React Components Sketch Libraries A11y System Guide Enrollment UX

1st

BCBS's first unified, token-driven design system

2×

Platforms — web and mobile from one foundation

40+

Screens unified across enrollment and member flows

→Dev

React-compatible components — design to development without re-drawing

01Problem

Why FIBER existed

BCBS member and enrollment experiences were built by many hands across many vendors — and it showed. Components were disjointed, specifications lived nowhere, and every new flow reconstructed the basics. For a healthcare brand whose entire promise is trust, the seams were the problem.

FIBER's brief, straight from the guide I wrote: "disjointed components with no real visible path to constructing the design to developers' specifications" — solved by a system of elements and code that let teams produce mockups, prototypes, or sites without error or question.

A design system that contains all colors, type, grids, icons, and components — to quickly build any outward-facing website or prototype, from Design to Development.

The FIBER guide — cover of the system presentation. — FIG 01 The FIBER guide — cover of the system presentation I authored and delivered.

Problem to solution, in the system's own words. — FIG 02 Problem → solution, in the system's own words.

Adoption — shared vocabulary and sources. — FIG 03 Adoption is critical — shared vocabulary and sources, communicated often.

02Foundations

Color · Type · Icons · Grid

Foundations first: a color system with interaction and accessibility tiers, a typographic scale built for dense insurance content, an icon library, and grid layouts that worked from marketing pages to enrollment forms.

In healthcare, accessibility isn't an enhancement — it's the product working or not working. Contrast, focus, and plain language were baked into the foundation layer, not added after.

FIG 04 The FIBER color system — brand, interaction, neutral, and accent tiers with usage rules.

FIG 05 Typography — one scale across light and dark surfaces.

FIG 06 Icon library — consistent stroke, sized for clinical and enrollment UI.

Buttons and links — full state coverage, light theme. — FIG 07 Buttons & links — full state coverage, light theme.

FIG 08 Grid layouts — responsive structure for content-dense pages.

FIBER component library — buttons, forms, cards, and navigation at scale. — FIG 09 FIBER component library — buttons, forms, cards, and navigation across states and themes.

03Shipped

The system in production

FIBER proved itself on the highest-stakes consumer paths: plan selection and enrollment. Forms, payment, and confirmation patterns shipped as coded components with theming hooks — and the same foundations carried the outward-facing marketing surfaces.

FIG 10 Outward-facing homepage built on FIBER foundations.

Enrollment — payment step from the Plan Select flow. — FIG 11 Enrollment — payment step from the Plan Select flow, all system components.

FIBER system guide — introduction and adoption framework. — FIG 12 FIBER system guide — introduction, shared vocabulary, and adoption principles for all contributors.

FIBER component library — documented states and variants. — FIG 13 Component library — documented states and variants, designed and handed off for React implementation.

04Outcome

2018 – 2019

1st