Five products. One visual language. ActBlue's fundraising infrastructure powers billions in small-dollar donations—it deserves a design system built to that ambition. Here's how.
Blueprint's principles aren't aesthetic preferences—they're commitments to the people who use these tools to make democracy work. Every design decision should serve these values.
People—donors, volunteers, organizers—are the center of every interaction. Design that respects their time, their intent, and the weight of the moment when they choose to give.
Democracy has been practiced for centuries. Blueprint's visual language borrows that permanence—clean, trustworthy, and enduring rather than trend-chasing.
Every component exists to serve a function. No decorative flourish without intent. The design system removes cognitive load so donors can focus on why they're giving—not how.
Democracy belongs to everyone. WCAG AA minimum at all times. Mobile-first always. Every component tested with keyboard navigation, screen readers, and high-contrast modes.
In 2022, ActBlue's design and engineering libraries fell out of sync—legacy components, one-off patterns, undocumented decisions. The result: a fractured user experience across products that should feel unified.
Notice anything? Five products, five different button shapes, five color palettes, five input styles. A donor who uses Core Fundraising and then visits Raise by ActBlue encounters what feels like a different company. Blueprint's mandate is to unify these into one coherent, trustworthy experience—without erasing the legitimate product differences that make each tool right for its context.
A robust design token system is the connective tissue between Blueprint's design intent and its engineering reality. Change a single primitive token and watch it cascade through every product simultaneously—including ActBlue's campaign theming layer.
Production-quality components built to WCAG AA standards, with full keyboard support, focus states, and a theming layer that lets any campaign customize their donation form without breaking the system.
Blueprint's action button. Maintains 3:1+ contrast ratio across all approved campaign themes. Focus ring uses rgba of primary color for brand coherence. Keyboard-navigable, focus-visible polyfilled.
Click the field above to see the focus state. The 3px focus ring uses the primary token color at 20% opacity—high visibility without visual noise. Error and hint states included.
The core Blueprint component. Switch themes above—the card updates instantly via CSS tokens. Campaign branding editor overrides only approved token slots, never component structure.
The 2022 drift between Figma and Storybook happened because there was no enforced pipeline. Blueprint needs a single source of truth with guardrails at every handoff. Here's the proposed workflow—click any step for detail.
I've spent years building and scaling design systems—not just designing components, but establishing the governance, tooling, and cross-functional relationships that make a design system actually work. This role aligns with everything I care about.
Deep expertise with Figma's variable system, component properties, and the new Code Connect API. I can build a Figma library where every component is variable-bound and every state is documented—so designers and engineers work from the same source.
I've designed and implemented multi-tier token systems: primitives → semantics → component-specific. I understand the theming challenge ActBlue faces with its branding editor and have a clear approach to creating a token layer that supports infinite campaign customization safely.
WCAG AA is a floor, not a ceiling. I've built components with color contrast ratios exceeding 4.5:1, implemented visible focus management, tested with VoiceOver and NVDA, and documented a11y decisions in component specs so engineering can implement correctly the first time.
I speak engineering. I've worked directly with React developers, written Storybook stories, maintained CSS token systems, and conducted design reviews against code output. I know where the handoff breaks—and how to fix it structurally, not just case-by-case.
I understand the tension between system consistency and product differentiation. A design system for five products isn't one size fits all—it's a shared foundation that each product extends thoughtfully. I've navigated that balance and built governance models that scale.
ActBlue's mission—making it easier for people to participate in democracy—matters to me personally. Good design at ActBlue isn't about aesthetics. It's infrastructure. Every friction removed from a donation form is a real person more empowered to act on their values.