⌘K
v0.4.2
Get started

Lumen Design System

Portfolio

A small, considered design system — distilled from a system that scaled to 150+ components in production. Lumen is a portfolio-scale demonstration of how a design system is structured, documented, and applied.

Conceptual portfolio project inspired by a real global-scale design system initiative I previously contributed to — including Storybook structure, component development, and the Simple App ecosystem. This independent recreation was redesigned from scratch to demonstrate my expertise in scalable design systems, UI architecture, and AI-assisted product workflows.
Browse components →

Behind Lumen

Origin · Method · Outcome

In mid-2025, I joined the challenge of helping build a Design System for a global company — structuring scalable UI foundations, organising components, contributing to the Storybook architecture, and shaping a unified product experience across platforms.

Lumen is the conceptual recreation of that experience. Working independently and from scratch, I rebuilt selected components and patterns through modern AI-assisted development workflows — designing in Figma and translating those decisions into production-ready interfaces with Claude Code as a pair-programmer.

The goal isn't to replicate the original system. It's to demonstrate how the same craft — tokens, component lifecycles, documentation structure, design-engineering hand-off — can be condensed into a focused, portfolio-scale laboratory that anyone can read in one sitting.

01 · Origin

Real-world enterprise foundation

Hands-on contribution to a Design System initiative at global scale: tokens, components, Storybook structure, and the multi-product Simple App ecosystem.

02 · Method

AI-assisted recreation

Components originally explored in Figma were re-imagined and shipped as production-ready code through Claude Code — accelerating the loop from spec to running interface.

03 · Outcome

A portfolio-scale laboratory

A focused subset — foundations, twenty-one components, three patterns, and a working demo app — that demonstrates Design System thinking end-to-end.

Figma Claude Code Storybook structure AI-assisted workflow
Positioning. Lumen is not the original Design System and carries no relationship to its branding, IP, or proprietary assets. It is an independent, conceptual recreation built for educational and portfolio purposes — the work demonstrates Design System thinking, scalable UI architecture, and AI-assisted implementation, not the original visual language.

Why use Lumen

01

Visual consistency

Reusable, well-documented, accessible components ensure every product surface speaks with the same voice.

02

Faster delivery

Production-ready primitives let teams skip the repetitive work and focus on the problems that actually matter.

03

Designer–developer sync

Tokens are the contract. Designers and engineers work from the same source of truth — no drift, no surprises.

Component status

Every component carries one of four lifecycle labels so consumers know what's safe to ship.

✓ AVAILABLE

Stable, fully coded, safe for production.

↻ GAP QA

Minor properties pending QA validation.

◇ EXPERIMENTAL

In trial — may introduce breaking changes.

⊘ DISCONTINUED

Replaced by a newer, supported version.

Foundations

Design tokens

The atomic decisions every component is made of: colour, typography, spacing, and radii. Tokens are the contract between design and engineering.

Colour

9 tokens
brand/700#0F4D5E
brand/600#186A7F
brand/500#2A8AA1
brand/100#E2F0F3
success#1F7A4D
warning#B5651B
danger#B43A2A
text#1A1F24
line#E6E8EB

Typography

5 scales
Typography overline
Typography title
Typography subtitle
Typography body — used for paragraph copy and most interface text. The base size is 14 px with a generous 1.5 line-height for comfortable reading.
Typography caption

Spacing

7 steps · 4 pt
space/100
4px
space/200
8px
space/300
12px
space/400
16px
space/500
24px
space/600
32px
space/700
48px

Radius

4 steps
radius/sm — 4px
radius/md — 8px
radius/lg — 12px
radius/full
Base

Components

v0.4.2

Components are a collection of interface elements used to create excellent and consistent user experiences in our digital products.

access full documentation

Component library

— components
Stable
Card title

A self-contained surface for a single object — a product, notice, or summary.

Card
Documentation →
Stable
April 2026
S
M
T
W
T
F
S
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Date Picker
Documentation →
Patterns

Patterns

How components compose into the small handful of recipes a real product needs.

Compositions

3 patterns
Stable
Your bag is empty
Browse the catalogue to add your first item.
Empty state
Documentation →
Resources

Changelog

Lumen follows semantic versioning — major.minor.patch — so consumers always know the impact of an upgrade.

Releases

v0.4.2 April 2026 · PATCH

Refined focus states & motion tokens

  • Buttons now share a single 2 px focus ring at brand/100.
  • Added motion/easing/standard token (cubic-bezier(.2,.7,.1,1)).
  • Patch · fixed misaligned helper text on Text Field in error state.
v0.4.0 March 2026 · MINOR

Avatar stack & Empty state pattern

  • New: avatar-stack with overflow indicator.
  • New: Empty state pattern with single-action contract.
v0.3.0 February 2026 · MINOR

First public preview

  • Tokens, twenty components, three patterns, demo app.

Versioning

Three rules govern when a release bumps which number:

MAJOR

X.y.z — breaking change

A redesigned component, removed property, or any change consumers must migrate to.

MINOR

x.Y.z — additive

A new component, a new state, or a non-breaking enhancement to an existing one.

PATCH

x.y.Z — fix

A bug-fix, a spacing tweak, an accessibility improvement — anything fully backward-compatible.