Zhuoqun Yuan
December 1, 2025
Design System
A unified design system built to ensure consistency, scalability, and clarity across Finora’s product ecosystem.
Industry
SaaS Platform
Responsibility
End-to-end Designer
Duration
6 Weeks
Introduction
As Finora’s product suite evolved, fragmented UI patterns and inconsistent design decisions began to impact both user experience and team efficiency.
This case study explores the design of a production-ready design system that provides a single source of truth for foundations, components, and documentation — ensuring consistency, scalability, and sustainable design practices.
Design Tokens
I defined design tokens to establish consistent foundations for color, typography, and text across the system.
Color Palette
Card Backgrounds
income
#e6f8fc
outcome
#e6f1fd
netIncome
#e6eafc
cashFlow
#e6fcfa
Chart Colors
purple
#9f9ff8
purpleLight
#c49ff8
purplePastel
#cbaaf8
teal
#96e2d6
blue
#92bfff
green
#94e9b8
greenBright
#71dd8c
lightBlue
#aec7ed
Typography
Font Sizes
xs (8px)
The quick brown fox jumps over the lazy dog
sm (13px)
The quick brown fox jumps over the lazy dog
md (18px)
The quick brown fox jumps over the lazy dog
lg (20px)
The quick brown fox jumps over the lazy dog
Font Weights
normal (400)
The quick brown fox jumps over the lazy dog
semibold (600)
The quick brown fox jumps over the lazy dog
Heading Styles
Heading 1
32px / semibold
Heading 2
24px / semibold
Heading 3
20px / semibold
Heading 4
16px / semibold
Text Colors
Primary Text
#000000
Sample Text
Secondary Text
rgba(0, 0, 0, 0.4)
Sample Text
Tertiary Text
rgba(0, 0, 0, 0.2)
Sample Text
Components
I designed reusable components to support consistent data presentation and interaction across the product.
Stat Cards
Income
+11.01%
£7050
Outcome
£50,200
-0.03%
Net Income
+11.01%
£7050
Cash Flow
£10,600
-0.03%
Search & Dropdown
Search products
Conservative Model
Tab Filters
Cash Flow /
Income /
Outcome /
Gross Profit
Chart Legend
Actual
Forecast 1
Forecast 2
Sliders
Market Growth Rate
3
-30%
0
+30%
Key Metric Cards
Market Growth Rate
+3%
Months Active
2
Sales Revenue
+1%
Months Active
1
Pricing Strategy
-2%
Months Active
3
Metric Cards
Revenue by Region
GB
10.3K
US
20.5K
CN
30.3K
Top Categories
Subscription
£2.0k
Consulting
£5.0k
Transaction
£3.0k
Scenario Card
Forecast 1
MGR
+3%
Months
2
SR
+1%
Months
1
PS
-2%
Months
3
Resolve your alert
With modest market growth (+3%) and slight sales uplift (+1%), the negative pricing impact (–2%) still keeps cash flow near the alert line. Monitoring is required to prevent further decline.
Apply Scenario
Forecast 2
MGR
+25%
Months
2
SR
+20%
Months
1
PS
-2%
Months
3
Resolve your alert
Strong market expansion (+25%) and higher sales revenue (+20%) offset the mild pricing drop (–2%). Cash flow remains healthy and well above the alert threshold.
Apply Scenario
Forecast 3
MGR
+25%
Months
2
SR
+20%
Months
4
PS
-8%
Months
3
Resolve your alert
Despite solid market growth (+25%) and strong sales (+20%), the significant pricing reduction (–8%) puts pressure on margins. Cash flow is stable but vulnerable to further cost shocks.
Apply Scenario
Alert Card
Your message has been successfully sent to them!
Sidebar Navigation
James Whitmore
Favorites
Recently
Overview
KPI
Dashboards
Overview
Prediction
KPI
Budget
Social
Blog
Corporate
Setting
Setting
Log out
Finora
GLOBAL SOLUTIONS
Activity Feed
Activities
Changed the style.
Just now
Released a new version.
59 minutes ago
Submitted a bug.
12 hours ago
Modified A data in Page X.
Today, 11:59 AM
Deleted a page in Project X.
Feb 2, 2025
Notifications
Content
You fixed a bug.
Just now
New user registered.
59 minutes ago
You fixed a bug.
12 hours ago
Andi Lane subscribed to you.
Today, 11:59 AM
Contacts
Contacts
Natali Craig
Drew Cano
Andi Lane
Koray Okumus
Kate Morrison
Melody Macy
Currency Selectors
Pound
Dollar
Euro
Buttons
Primary Button
Secondary Button
Ghost Button
Small
Medium
Large
Logo
F
Finora
GLOBAL SOLUTIONS
F
Finora
GLOBAL SOLUTIONS
F
Finora
GLOBAL SOLUTIONS
User Profile
James Whitmore
Avatars
Sizes
XS (20px)
SM (24px)
MD (32px)
LG (40px)
XL (56px)
With Initials (Fallback)
JW
SC
JD
EW
With Status Indicators
Online
Busy
Away
Offline
Avatar Group
+5
Priority Badges
High
Medium
Low
Action Buttons
Date Range Selector
From 13,Aug To 13,Sep
Change Indicators
+5.20%
-3.5%
0.0%
Simple Bar Chart
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Data Table
Detailed Risk Breakdown
From 13,Aug To 13,Sep
Item
Change
Department
Owner
Action
Priority
Sales Volume
-3.5%
Sales
Devon Lane
High
Conversion Rate
-2.0%
Sales
Kathryn Murphy
Medium
ARPU
+1.2%
Customer Value
Kristin Watson
Low
Usage Examples
I provided usage examples to demonstrate how design tokens and components are implemented consistently in real product scenarios.
Import Components
import {
StatCard,
Slider,
TabFilter,
ChartLegend,
ScenarioCard
} from './design-system/components';
import { colors } from './design-system/tokens';
Use Design Tokens
// Use colors
<div style={{ backgroundColor: colors.card.income }}>
Income Card
</div>
// Use in components
<ChartLegend
items={[
{ label: 'Actual', color: colors.chart.purple },
{ label: 'Forecast', color: colors.chart.greenBright }
]}
/>
View Last Case Study
View Next Case Study
