MeasamEnterprise Design System
Established Dollar Bank's first enterprise-grade design system — Journal — defining token foundations, component architecture, and governance practices that unified design and engineering across the organization.
Problem Statement
Dollar Bank's digital products were built by multiple teams using inconsistent UI patterns, duplicated components, and informal handoff processes. Every sprint produced slightly different buttons, forms, and layouts — slowing delivery and eroding trust in the product's consistency.
Methodology
Audited existing UI across online banking, mobile, and internal tools to identify redundancy and misalignment between design files and production code.
Built a token-first foundation covering color, spacing, typography, elevation, and motion — mapped directly to Blazor and Fluent UI engineering constraints so components could be implemented without reinterpretation.
Authored governance documentation, component contribution guides, and naming conventions — then ran cross-team workshops to drive adoption across product, design, and engineering.
Results and Impact
Reduced design redundancy by 30% within the first two quarters of adoption.
Cut development handoff time by 25% through shared token language and documented component behavior.
Scaled the system to cover account summary, loan servicing, account opening, and HELOC experiences — with ongoing expansion.
01 — Token architecture
Primitives hold raw values. Semantic tokens assign meaning. Component tokens bind meaning to a specific part. Only the primitive tier ever holds a hex value, so rebranding or theming touches one layer.
brand.500 = #1f66bdRaw, context-free values. Never referenced directly by a component.
action.primary.bg = brand.500Assigns intent. This is the layer product designers actually speak in.
button.primary.bg = action.primary.bgBinds intent to a part, so a component can deviate without a fork.
02 — Color
Representative ramps shown here: the production palette is Dollar Bank brand property. Every step is checked against WCAG contrast pairs before it enters the system.
Brand ramp
#eef4fb#d5e4f5#abc9ea#7aa8dc#4a86cd#1f66bd#17529a#123e75#0d2b51#07192fNeutral ramp
#ffffff#f7f8f9#eceef1#dcdfe4#b9bfc7#8b939e#646c78#4a515b#343a42#21262c#12161aFeedback
#1f7a4d#b4700d#b3261e#1f66bdSemantic mapping
surface.pageneutral.50surface.raisedneutral.0text.primaryneutral.900text.secondaryneutral.500border.subtleneutral.200action.primary.bgbrand.500action.primary.fgneutral.0feedback.error.fgerror03 — Typography
Eight steps cover every product surface. Sizes and line heights are locked to the scale so vertical rhythm survives contribution from four separate teams.
Clarity at every scale
Clarity at every scale
Clarity at every scale
Clarity at every scale
Clarity at every scale
Clarity at every scale
Clarity at every scale
Clarity at every scale
04 — Spacing, radius, elevation
Spacing is the token developers reach for most, so the scale is short enough to memorise and strict enough to prevent one-off values.
Spacing scale
space-14pxspace-28pxspace-312pxspace-416pxspace-624pxspace-832pxspace-1248pxspace-1664pxRadius
radius-xsradius-smradius-mdradius-lgradius-fullElevation
elevation-0elevation-1elevation-2elevation-305 — Iconography
Drawn on a 24px grid at a 1.75px stroke, so icons hold their weight beside body text without optical correction.
06 — Atomic structure
Atomic Design gave the organisation a shared vocabulary for scope. It made contribution reviewable: everyone could agree what level a change belonged to before arguing about the change itself.
Color tokens · Type styles · Icons · Buttons · Inputs · Labels
Form fields · Search bar · Pagination · Card header · Alerts
Account card · Data table · Navigation · Transaction list
Account summary layout · Application flow · Servicing layout
Production banking screens (covered by NDA)
07 — Component library
Components ship with their full state matrix. An unspecified state is where two teams invent two different answers — so hover, focus, disabled, error and loading are all part of the contract.
Buttons · variants
Buttons · states
Form field · states
Selection controls
Feedback
Data display
08 — Governance
Adoption held because contribution had a route. Anyone could propose; the path from proposal to released token was documented, reviewable, and versioned.
Any team opens a request against a real product need, not a hypothetical.
Design and engineering assess it together — naming, accessibility, and build cost in one pass.
Token, Figma component, and Blazor implementation land together or not at all.
Semantic version, changelog, and migration note published to Storybook.
