Design system · Engineering case study

Building the system behind better internal products.

I designed and developed an Angular component library and documentation platform that turns shared design decisions into production-ready UI.

AngularTypeScriptSCSSBootstrapComponent APIs

Role

Design system owner

Ownership

Design, architecture & build

Stack

Angular, TypeScript, Bootstrap, SCSS

Users

Internal product teams

One shared language

Reusable components, layouts and interaction patterns across internal products.

Built for developers

Live examples, implementation guidance and copyable code alongside every component.

Proven in delivery

Components were refined through real underwriting workflows—not isolated UI exercises.

Alert banner documentation with guidance, examples and code navigation.

Documentation platform

The component and its implementation, side by side.

Each page combines behaviour, variants, usage guidance and live examples. Developers can understand the intent, inspect the options and move into implementation without hunting through separate sources.

Semantic colour variants

What I owned

From foundations to production components.

Define

Established layout, spacing, typography, colour and SCSS principles.

Architect

Created consistent Angular APIs, states, variants and composition patterns.

Build

Developed standalone components for forms, data, feedback and workflows.

Document

Paired live examples with practical guidance and reusable snippets.

Composable architecture

Small building blocks, assembled into complete workflows.

Document upload demonstrates the system at its best: focused components combine into a richer workflow while keeping state, behaviour and implementation reusable.

01 Trigger02 Drop zone03 File state

Component library

Designed around real enterprise work.

I prioritised patterns teams repeatedly needed in dense internal products: status, progress, uploads, tables, search, pagination and structured forms.

Badge component variants and usage guidance. — Status & metadata
Badges with consistent semantic variants

Progress tracker variants for multi-step workflows. — Workflow state
Progress patterns for complex journeys

Table documentation with implementation snippets and full-size examples.

Developer experience

Production patterns backed by clear APIs.

The system pairs full-scale enterprise examples with copyable code. Modular Angular components, content projection and TemplateRef support flexibility without fragmenting the visual language.

const columns = signal(...)<ds-table [data]="rows" />Reusable API + live example

Engineering decisions

Flexible enough to scale. Opinionated enough to stay consistent.

standalone: true

Modular by default

Standalone Angular components make adoption incremental and dependencies clearer.

<ng-content />

Composition over duplication

Content projection supports richer use cases without multiplying near-identical components.

TemplateRef<T>

Controlled flexibility

Typed templates give teams room for complex data while preserving shared structure.

Outcome

A foundation teams can actually ship with.

Reusable Angular components for complex internal applications
One documentation platform for behaviour, usage and implementation
Less duplicated front-end effort across common interface patterns
Stronger consistency between design intent and delivered UI
A scalable base for future applications and product redesigns

The system in production

Shared components became the foundation for One Workflow.

See how I applied the system to redesign critical journeys in Markel’s global underwriting platform.

Explore the product redesign →

Reflection

Building this system confirmed that design systems are products, not component inventories. Their value comes from joining thoughtful interaction design, sound front-end architecture, useful documentation and continuous refinement.