Will Neville
Case Study

Deutsche Bank — openStyle, an enterprise design system

We built an enterprise design system to unify dozens of internal tools—risk, trading support, operations, and reporting. The work combined tokens, accessible components, and clear governance so teams could ship faster without re-deciding fundamentals on every project.

Tokens → Components → Patterns → Guidelines → Governance
A layered system: change at the token layer flows through components and patterns to product teams.
Overview

Clarity, velocity, and accessibility by default

openStyle delivered a coherent visual language and a set of durable building blocks. We emphasized pragmatic adoption—drop-in components, codified examples, and migration guides—so teams could improve their UI without pausing delivery.

  • Design tokens for color, type, spacing, elevation, motion
  • Accessible, performance-minded components for data-heavy apps
  • Usage guidelines with "do/don't" and copy patterns
  • Versioning, changelogs, and upgrade recipes for teams
Problem

Many tools, many dialects

Years of team-specific forks led to inconsistent UI, duplicated components, and costly regressions. Accessibility varied, and performance suffered under data-dense screens and long tables.

  • Visual drift: colors, spacing, and typography diverged across apps.
  • Component forks: multiple table and form variants with behavior gaps.
  • A11y risk: inconsistent focus states, contrasts, and keyboard paths.
  • Migration pain: no clear path to upgrade without rewrites.
Before → After systemization
From bespoke implementations to a single library with shared patterns and docs.
Information Architecture

A system that meets teams where they are

Docs focus on decisions, not just APIs—each component includes rationale, accessibility notes, and migration examples for common legacy cases.

Clear layers reduce ambiguity: change tokens, not every product; migrate components, not entire apps.
Solution

An accessible, data-first component library

We optimized for dense information design: high-contrast defaults, keyboard-first navigation, virtualized tables, and predictable focus & error states. The system ships as tokens + components with CI checks to prevent regressions.

Tables at scale
Sticky headers/columns, column density presets, virtualized rows, and inline edit with audit-friendly review.
Handles large datasets without sacrificing clarity or performance.
Form patterns
Consistent labels, validation, error summaries, and keyboard paths—ready for complex approval flows.
Reduces cognitive load and shortens training time for operations staff.
Token theming
Light/dark + brand variants from a single token source of truth with semantic color roles.
Lets teams adopt system visuals without losing product identity.
Governance
RFCs, backlog triage, release notes, and deprecation schedules—run like a product.
Creates trust: teams know how to request, adopt, and upgrade.
Design details
  • Focus rings and contrast meet WCAG; motion reduced on system preference
  • Consistent empty, loading, and error states for reliability under load
  • Iconography and copy patterns tuned for risk & compliance contexts
  • Lint rules and visual tests in CI to guard tokens and components
Results

Consistency at scale, velocity unlocked

The openStyle design system established a foundation for consistent, accessible digital experiences across Deutsche Bank's products.

0 + teams

System adoption

Product teams across business units adopted openStyle components and patterns.

0 %

Design-to-dev time

Shared components and tokens accelerated product delivery timelines.

Notes: Metrics shown are representative and illustrate directional impact of design system adoption.

Research & Discovery

Understanding enterprise design system needs

We conducted stakeholder interviews across business units to understand pain points and requirements for a scalable design system.

Key Milestones

Building an enterprise design system

The system evolved from initial token definitions through component libraries to comprehensive governance and adoption across teams.

Lessons Learned

What this project taught me

Building a design system at enterprise scale requires balancing flexibility with consistency, and governance with autonomy.

Recognition & Achievements

Impact & adoption

The openStyle design system enabled consistent experiences across Deutsche Bank's digital products and accelerated product development timelines.