Emerald Design System | ABN AMRO

Industry

Banking

Scale & Growth

JavaScript

Lit

Axios

Webpack

Bitbucket

npm

Node.js

Git

ESLint

Prettier

storybook

markdown/black/white

vitepress

Related Engineering Services

Custom SoftwareMVP DevelopmentAI & Automation

Want this "build once, deploy many" foundation pre-built?

Skip the months-long build. The ready-made app catalogue ships token-driven, component-based foundations you can launch in days.

Landing + Catalog

Premium Furniture Catalog

Design-first, component-based store kit.

Free App

Dynamic CRUD App (Free)

Reusable, token-styled admin foundation.

Project Case Study

A tokens-first, component-driven design system built with Lit Web Components for ABN AMRO. Emerald replaces per-team styling sprawl with a single source of truth: design tokens, versioned components, automated visual regression via Chromatic, and a Storybook workspace — so the bank ships consistent, accessible interfaces without each team re-solving the same problems.

• Strategic Executive
• Engineering Architecture

Business Impact & ROI

A strategic investment in design consistency and development velocity. The Emerald Design System provides a unified language for ABN AMRO's digital ecosystem, significantly reducing time-to-market for new features while ensuring a seamless, banking-grade user experience across all platforms. It represents a shift from bespoke development to a scalable, component-driven digital strategy.

Strategic Playbook Features

Responsive Design: Seamless experience across devices.

Component-Based Architecture: Efficient and scalable codebase.

Modern UI/UX: Clean aesthetics with intuitive navigation.

API Integration: Robust connectivity with external services using Axios.

Modular Development: Leverages Webpack for optimized, modular builds.

Code Quality Assurance: Enforced by ESLint and Prettier for consistent, error-free code.

Version Control: Streamlined collaboration via Git and Bitbucket.

Technical Deep-Dive

Built using Lit (Web Components) for maximum interoperability and performance. The system utilizes a tokens-first approach to manage theming and visual variables, integrated with a robust Storybook documentation suite. The architecture emphasizes modularity and tree-shaking, ensuring that enterprise applications remain lightweight and fast while consuming complex design patterns.

Engineering Architecture & The Atomic Vision

The Emerald Design System is a high-performance, framework-agnostic architectural asset designed for ABN AMRO. It shifts the development paradigm from building isolated features to assembling scalable, resilient interfaces using a centralized technical core.

1. Atomic Design Methodology

We implemented the system using Atomic Design principles to ensure infinite scalability and maintainability. This structure allows us to break down complex banking interfaces into their fundamental building blocks:

• Atoms: The most basic technical units (Buttons, Inputs, Typography, Icons).
• Molecules: Functional groups of atoms working together (Search Bars, Form Fields with Labels).
• Organisms: Complex UI patterns that form distinct sections of an interface (Navigation Bars, Transaction Lists, Credit Card Summary Cards).
• Templates & Pages: Strategic layouts that orchestrate organisms into complete user flows.

2. The Token-Driven Pipeline: The "Master Blueprint"

Think of Design Tokens as a Central Command Center for the entire brand. Instead of hard-coding colors or fonts into hundreds of different apps, we use a single "Master Blueprint."

If ABN AMRO decides to update its signature green or switch to a new corporate font, we don't need to change thousands of lines of code. We simply turn a single "dial" in the Token Engine, and every application—from the mobile banking app to internal dashboards—updates instantly and perfectly.

By decoupling the "look" from the "logic," we ensure that the brand remains cohesive and future-proof, allowing us to implement a company-wide dark mode or a visual refresh in days rather than months.

3. Technical Implementation Strategy

We selected Lit (Web Components) as our primary engine to future-proof the investment.

• Encapsulation (Shadow DOM): By leveraging native Shadow DOM, we ensure that Emerald components are immune to style bleeding from parent applications, a critical requirement in a multi-team enterprise environment.
• Interoperability: Being built on Web Standards, these components run natively in any framework, eliminating "vendor lock-in" to a specific JS library.
• Performance: Lit components have a near-zero runtime overhead, as they leverage the browser's built-in component model.

4. Enterprise Distribution & Governance

To maintain high developer velocity across ABN AMRO’s engineering teams, the architecture includes:

• Centralized Registry: Private NPM repository for versioned distribution.
• Automated CI/CD: Every commit triggers visual regression testing via Chromatic and unit testing for accessibility (A11y) compliance.
• Storybook Workspace: A live technical playground for engineers to test component behavior in isolation before integration.

This architectural approach materially reduced UI-related technical debt and lifted front-end delivery velocity across the organization: teams stopped re-solving the same styling and component problems, and new interface work started from documented, tested building blocks instead of a blank canvas.

Want this engineering approach for your product?

Book a 25-min call to scope it with a senior architect, or browse ready-made foundations to start in days.

See it in Action: ABN AMRO Corporate Rebuild

Discover how the Emerald Design System was deployed to modernize ABN AMRO's primary web portal, driving massive performance and UX gains.

Architecting Your Success

A proven, four-stage framework to stabilize your technical debt.

01

Discovery Call

Technical diagnosis and scaling strategy.

Diagnosis

02

Architecture Audit

Deep dive into infra and technical debt.

Analysis

03

Fixed-Scope Roadmap

Detailed milestone-based blueprint.

Strategy

04

Senior Execution

High-integrity build & velocity.

Velocity

Need a similar strategic architecture?

If this project aligns with your current bottlenecks, let's discuss how to apply these same principles to your business.

PreviousIBRebuild for ABN AMRO BANK N.V.

Portfolio

NextTech Create