UpSaaS Design System

A scalable design system for Upfeat's internal SaaS platform, sanitized and adapted for public presentation.

Core

Colour Palette

Greyscale
#1E293B
#475569
#64748B
#94A3B8
#E2E8F0
#F8FAFC
Accents
#4F46E5
#78C353
#9699A0
#01CDD3
#B45DE3
#E83E8C

Typography

TypestyleTypefaceWeightSize
Display XLHanken GroteskBold32px
HeaderHanken GroteskSemiBold20px
BodyHanken GroteskRegular14px
CaptionHanken GroteskRegular12px
Caption HeadingHanken GroteskMedium12px
SUB HEADINGHanken GroteskSemiBold13px
MENU HEADINGHanken GroteskSemiBold13px

Buttons

Colors

Primary
Success
Negative

Configurations

Filled
Outlined
Disabled

Contained Input Field

States
Incorrect field
Configurations

Tables

DateIDDescriptionAmountStatus
Dec 24, 201834235Lorem ipsum dolor sit amet, consectetur adipiscing$499.00Active
Dec 24, 201834235Lorem ipsum dolor sit amet, consectetur adipiscing$499.00Active
Dec 24, 201834235Lorem ipsum dolor sit amet, consectetur adipiscing$499.00Active
Dec 24, 201834235Lorem ipsum dolor sit amet, consectetur adipiscing$499.00Active
Dec 24, 201834235Lorem ipsum dolor sit amet, consectetur adipiscing$499.00Active

Notifications

Colors
Accent text
Success text
Warning text
Error text
White text
Grey text
Configurations
Title Only
Icon + Title
Icon + Title + Exit
Title + Text + Exit
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.

Navigation

Top Nav

My Dashboard
Ryan Bollenbach

Sidebar Nav

UpAffiliate
Inactive Item
Inactive Item
Active Item
Inactive Item
Powered by Upfeat

Tab Styles

Underline Active
Active Tab
Inactive Tab
Disabled Tab
Segmented Control
Active
Inactive
Settings
Solid Folder
Primary Tab
Secondary Tab

Pagination

Calendar

Dropdown Range Picker

Last week
Last month
Last 3 months
December 2020
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4

Editorial Calendar Grid

Editorial Calendar
April 2018
SUN
MON
TUE
WED
THU
FRI
SAT
1
2
DRAFTLove Stack Block...
3
REVIEWBlock Game Launch
4
5
6
7
8
9
10
11
12
13
14

Graphs & Visualizations

Line Graph Mock

Merchant Performance
533,892
Total Clicks
14 OCT182226303 NOV

Step Progress

Setup Site
Completed
Build Network
In Progress
3
Launch Program
Upcoming

Icons

Navigation

Campaign
Dashboard
Merchants
Networks
Settings
Sites
Team
Amazon
Down
Sort Down
Sort
Logout
Back
Exit

Button

Add
Download
Print

Other

Barcode
Question
Search
Edit
Visa
Cancel
Check
Calendar

Example: Dashboard

A full dashboard layout demonstrating a cleaner, flat, data-oriented aesthetic with minimal shadows.

Overview

Here's what's happening with your business today.

↑ 12.5%

Total Revenue

$128,430

↑ 4.2%

Active Partners

3,422

↓ 2.4%

Failed Txns

12

Cash flow analytics

Income
Expand

Recent Activity

A

Alice Johnson processed a payment $1,200.00

2h ago

B

Bob Smith added a new partner

4h ago

S

System generated weekly report

6h ago

C

Charlie Davis processed a payment $450.00

1d ago

Example: Payments

A full payments interface showcasing high-density data tables and filtering.

Payments

Manage and view your recent transaction history.

↑ 14.5%

Gross Volume

$248,392

↑ 8.2%

Successful Payments

1,842

↑ 1.4%

Refunded

$4,200

Filters

Recent Transactions

DateTransaction IDCustomerAmountStatus
Oct 24, 2024TXN-8923Acme Corp$4,500.00Succeeded
Oct 24, 2024TXN-8924Globex$1,250.00Succeeded
Oct 23, 2024TXN-8925Soylent Corp$899.00Refunded
Oct 23, 2024TXN-8926Initech$12,400.00Succeeded
Oct 22, 2024TXN-8927Umbrella Corp$350.00Failed

Example: Multisite Dashboard

An app layout example showing navigation, aggregated metrics, and multi-series charting.

Global Dashboard

Aggregated performance across 12 active properties.

↑ 18.5%

Network Revenue

$482,900

↑ 4.2%

Total Traffic

1.2M

↓ 0.4%

Avg Conversion

3.4%

Network Revenue Split

Site A
Site B

Property Performance

PropertyTrafficRevenueHealth
Site A
site-a.com
850,230$310,400Good
Site B
site-b.com
210,000$112,000Warning
Site C
site-c.net
140,500$60,500Good
← Back homeAbout me →