Back
Nomi Design System · Case Study

Bringing order to Nomi — a design system for a cloud accounting platform.

Nomi shipped fast but grew without a shared visual language. Screens drifted apart, components were rebuilt from scratch each time, and the interface felt chaotic to its accountants. I built the platform's first design system to give every screen one consistent, considered foundation.

Role
Product Designer
Product
Nomi - Fintech SaaS
Scope
Design System
Focus
Consistency & Clarity
0
Unified design system, up from none
0
Step typographic scale
0
Named colour tokens
0
Core UI patterns standardised

About the product

Nomi (by Nomisma Solution Ltd) is an all-in-one, cloud-based accounting platform built for UK accountants and bookkeepers. It pulls bookkeeping, tax, payroll and practice management into a single suite, so a firm can run everything for its clients in one place instead of juggling separate tools. It's hosted on AWS with access from any device, pairs with a companion mobile app, and is recognised by HMRC for Making Tax Digital.

UK accountants & bookkeepers Cloud-based, built on AWS HMRC-recognised · MTD Companion mobile app
Visit nomi.co.uk ›

One suite, many modules

Bookkeeping & VAT Final Accounts & Corporation Tax Self-Assessment & Partnership Tax Payroll, Pension & CIS Practice Management CRM & Onboarding Company Secretarial

The problem

A product that worked, but didn't feel like one product.

Nomi is a cloud platform accountants use daily for clients, payroll, submissions and compliance. With no design system, each screen had been styled on its own terms. The result was a heavy cognitive load: the same action looked different depending on where you were.

  • Inconsistent buttons. Pill outlines, solid pills and square buttons all coexisted — no clear primary action.
  • Cluttered filters. Dropdowns of unequal widths crammed edge to edge with uneven spacing.
  • Colour overload. Saturated red, green, amber and blue action buttons competed for attention in tables.
  • Mismatched components. Cards, dropdowns and pagination each followed their own rules.
Original Nomi dashboard with many pink pill buttons
Before Dashboard — pill buttons everywhere, no visual hierarchy
Original cluttered client list filter bar
Before Filter bar — uneven widths and crowded spacing
Original loud multi-colour action buttons
Before Loud action colours
Original KPI cards
Before Ad-hoc cards

One language: foundations first, components second.

Rather than restyling screens one by one, I defined the foundations every screen draws from — then standardised the handful of components that appear everywhere. Consistency became the default, not an extra effort.

01

Tokenise the brand

Lock the Nomi pink into a small, named palette with defined hover, light and muted variants — so colour stops being guessed per screen.

02

Set a type & spacing rhythm

A 14-step type scale and fixed spacing rules give every page the same vertical rhythm and reading hierarchy.

03

Standardise the workhorses

Buttons, inputs, cards, tables and pagination defined once, with every interaction state specified up front.

The design system

The Nomi system, component by component.

Everything below is built live from the system's own tokens — the same values that now drive the product.

Colour

Primary · Neutral · Status · Data viz

Primary

Logo (fixed)
#FF00AA
Primary
#FF4FB8
Primary hover
#CC0088
Primary light · card hover
#FFD0E5

Neutral & surface

Card / surface
#FFFFFF
Grey fill · secondary hover
#F7F7F7
Text primary · input border
#333333
Text secondary · muted surface
#7D7D7D
Text muted · disabled
#B1ADAD
Icon default
#C1BEBE
Card border
#DDDDDD
Hyperlink
#CC0088

Status

Success #16A34A
Warning #DC2626
Error #D97706
Info #3398DD

Typography

14-step scale
Page title24px · Bold
Section title18px · Bold
Card value 90922px · Bold
Card heading16px · Semibold
Button text14px · Bold
Body text — the quick brown fox13px · Contextual
Label text13px · Regular
Helper text12px · Regular

Spacing

Consistent rhythm across every screen
Page padding24px
Card padding24px
Card gap16 / 24px
Form field gap16px
Section gap32px
Table row height48px
Button height40 / 44px

Buttons

40px height · 18px padding · 333px pill
Primary · Secondary · Hover · Disabled

Inputs & form controls

36px height · 333px pill · label above field
Filter inputs — label above, 10px gap
All
Active

Helper text sits below the field at 12px.

Toggle · Radio · Checkbox
Toggle enabled
Toggle disabled
Selected radio
Unselected Radio button
Checked
Unchecked

KPI cards

14px radius · 24px padding · icon, label & value
Total Net Pay
£2,361.69
Manual Payrolls
909
Total Clients
909
Pensions
1

Figures shown are sample data.

Tables & status badges

#F2F2F2 header · 48px rows · hairline dividers
Person NameReturn TypeYearSubmitted OnStatus
Client 11 11Self Assessment2024–202506 Apr 2024Validated
14302 Test 3Self Assessment2024–202506 Apr 2024Submitted
Richard TTSelf Assessment2024–202506 Apr 2024Failed
A.W.R. AlloysSelf Assessment2024–202506 Apr 2024Pending

Pagination

34px circle · active #FF4FB8 · inactive transparent
Circular active · text inactive · ellipsis · next
…

Interaction states

Every component supports all four
Hover
#CC0088
Active
#FF4FB8
Normal (tab)
#7D7D7D
Disabled
#C1BEBE

The same screens, rebuilt on the system.

Each pairing shows the original Nomi UI beside a version reconstructed from the design-system tokens — same content, calmer interface.

01 Client list — filters

Before Original UI
Before — cluttered filter bar
Pill outlines, uneven widths, crowded edge-to-edge spacing.
After Design system
All
All
Active
All
All
All
Aligned 4-column grid, 16px gaps, labels above fields, one clear primary action.

02 Payroll overview — KPI cards

Before Original UI
Before — KPI cards
Flat grey blocks, weak hierarchy between value and label.
After Design system
Total Net Pay
£2,361.69
Manual Payrolls
909
Pensions
1
Total Clients
909
Icon, label and value in a fixed rhythm; 14px radius, hover tint. Figures are sample data.

03 Pagination

Before Original UI
Before — square pagination
Square pink boxes for every page number — heavy and undifferentiated.
After Design system
…
A single circular active page, the rest transparent — clear current position, lighter footprint.

The outcome

From chaotic to coherent.

The design system gives Nomi a single source of truth. New screens start consistent instead of being styled from scratch, and the interface now reads as one product.

Consistency by default

Colour, type, spacing and components are defined once and reused, so screens no longer drift apart.

Lower cognitive load

One clear primary action per view and a calmer palette make daily accounting tasks easier to scan.

Faster to build

Designers and developers pull from a shared library instead of rebuilding patterns each time.

A design system isn't about adding more. It's about deciding once, so every screen can stay quiet and clear.

Nomi Design system case study · UI/UX Product Design