Synergy: the new CreditBook design system
When CreditBook shifted from B2C budgeting to embedded financing for FIs and banks, I led the creation of Synergy: a coherent, code-backed design system. I audited four live products, prioritized shared components, defined brand-to-product foundations, built a research-backed pattern library, and ran a 2-phase handoff with engineering for a React implementation.
- Company
- CreditBook
- Industry
- FinTech / Embedded finance
- Role
- Lead Designer (Design System)
- Timeline
- 2 months (handoff Aug 2024)
- Key areas
- Audit, Tokens, Pattern library, Handoff
Goal
CreditBook was rebranding from a budgeting app to embedded finance. The audience moved to operators at banks and FIs. The UI needed to feel refined, professional, and trustworthy. Design and engineering needed to ship faster with fewer debates about basics. I framed Synergy as both product (tokens, components, docs) and process (how teams work around those assets).
Challenge
Four products in active use (Credr, FI Book, Partner Book, Embedded Financing), each with legacy choices. Inconsistent padding, states, labels, color semantics, and icon choices. We needed a single source of truth for what we actually shipped. I ran a visual inventory, labeled everything by function and usage, and logged inconsistencies so we could prioritize.
Outcome
Faster design-to-dev delivery, fewer UI bugs from spacing and states, and high component reuse across all four products. Designers reported hours saved per feature by pulling patterns and tokens. We removed or merged 33+ duplicate patterns. New designers reached productive in the system in about 1 week instead of 3–4.
duplicate patterns removed
months to handoff
1 / Audit. Get the truth on the table
I captured a visual inventory of every component across the four products, labeled by function, variants, and usage frequency. Logged inconsistencies (padding, states, labels, color semantics, icons). That produced a single source of truth for what we actually shipped.
Key steps:
- Screenshots and catalog of all in-use components
- Label by function, variants, usage frequency
- Document gaps and inconsistencies for prioritization
2 / Foundations. Brand to product tokens
I used an atomic model. We had brand; we needed product-grade decisions. Typography: Inter, 14px default (backed by a competitive audit of enterprise dashboards). Color: “You see purple, you can click.” Actionable = purple; non-actionable = grayscale. Spacing: 4px grid. Icons: Phosphor, agreed with engineering for React and consistency. All tokens with WCAG AA and examples.
Key decisions:
- 14px base for density and readability in pro tools
- Purple-for-action rule to clarify affordances
- 4px grid; restrained elevation and radius
3 / Pattern library. Research-backed components
Not just a Figma sticker sheet. Each component had best practices, states (default, hover, focus, disabled, error), accessibility (hit areas, focus, labels, contrast), and rationale so PMs and engineers had the “why.” Inputs (fields, buttons, dropdowns, checkbox/radio), display (tags, modals, tables, tabs, toasts, banners), and decision trees (e.g. when to use snackbar vs modal vs banner).
Key improvements:
- Full states and accessibility specs per component
- Do/don’t and rationale to reduce future debates
- Decision trees for interruptive vs ambient messaging
4 / Layout and handoff. How the parts come together
We chose predominantly flat pages with clear information and contained cards only where needed (e.g. right-rail summary). Standard scaffolding: global header, left nav, page header, content zones, optional right rail. Handoff in two phases: foundations + inputs first; then display components and layout templates. Engineering built a React component library; we had versioning, change logs, and a contribution model (propose → review → accept → document → release).
Key improvements:
- Flat layout for focus and data density
- 2-phase handoff so engineering could ship incrementally
- Contribution model so the system could evolve safely
Reflection
Synergy was as much process as product. Every decision was grounded in usage frequency, research, and feasibility. In a finance context, trust and clarity aren’t optional. Building the system that way helped design, engineering, and PM move faster with more confidence. A few things I’m glad we fought for: 14px validated by competitive scan, the purple-for-click rule, Phosphor icons, and documented rationale everywhere so future debates had a clear reference.
Interested in working together? Get in touch.