ASBL Finance · Design System · Lead Designer

Building a Design System from Scratch

A complete, token-based design system for ASBL Finance — a financial web application managing cashflow, payments, and account statements across projects.

Why This System Exists

ASBL Finance manages money at construction scale

Handling cashflow, inflow/outflow tracking, payment disbursement, and account statements across multiple projects and departments.

As a financial product, it demands precision in information hierarchy, status clarity, and trust signals.
A design system wasn’t optional. It was the only way to build something that scale teams could rely on consistently.

Consistency

Unified visual language across all screens and teams, same components, same behaviour, same trust.

Scalability

Clear component guidelines that handle new screens, features, or teams without breaking quality.

Efficiency

Eliminates repetitive design tasks. Enables rapid product updates without starting from scratch.

01 · Foundation

Branding, typography, and colour – the base everything builds on

Typography

Inter

24 Heading

20 Title

16 Body text, regular

14 Body text, small

12 Caption text

11 Label · Uppercase

Weights: Regular · Medium · Semi-Bold · Bold

Colour Palette

Brand + Supportive

#2463EA

#EBAD33

Feedback

#475569

#00A991

#DC4A41

#EB7D33

#8B5CF6

02 · Token Architecture

Semantic variables

Background

BG 1 Neutral/Grey 00

BG 2 Neutral/Grey 100

Text

Default Neutral/Grey 700

Light Neutral/Grey 500

03 · Component Library

Every component built with properties and states

Calendar / Date picker — with range selection

Calendar date range picker component

Navigation sidebar — Finance web app

Navigation sidebar component

05 · Feedback Patterns

Toasts, micro components, and notification states

Toast States

Error · Success · Info · Warning - each with optional title, body, and dismiss action

Badges

Status labels for financial states: Debited, Pending, Failed, Operational

Form Atoms

Checkbox, radio, toggle - all with complete state coverage including error and indeterminate

Toast notification pattern

Toast notification pattern, annotated

04 · Icon Library

Custom icons for unique financial features

Custom

Calculator, inbox/file, checkbox, ticket, hierarchy, presentation bar, user block, built for Finance-specific flows

Standard

Chevrons, shapes, typography, media, apps, real-world objects adopted from a unified icon library

Principle

Same stroke weight and optical size across both sets, custom and standard are indistinguishable in use

06 · Motion

Micro-animations – component states

Payment Pending · Scan States · Loading Indicators

Payment pending receipt card

Scan idle state

Scan success state

Scan failed state

Fingerprint scan state

UX Animation – onboarding and transitions

Guiding Behavior · Clarifying Actions · Status Updates

Account Configuration screen

Roles and Permissions screen

Onboarding carousel

07 · The System in Use

Account Statement : the design system at scale

Proceed to pay card

Invoice list panel

Account Statement dashboard

Impact

What the system delivers

7

Colour roles — brand, supportive, and 5 feedback states — all tokenised

30+

Components with full property and state coverage in Figma

100%

Token-based — no raw hex values in any component; all reference semantic variables

0→1

Built from scratch — no prior system existed for ASBL Finance before this project