Design System
One system.
Every new page.
The foundations behind Fizens — typography, colour, imagery and components. A single reference for building every new page consistently.
01 Typography
1. Headings
Display 1 (Med) · Poppins · 128px / 128px · 500
Oversized hero moments and brand statements
H1 (Reg) · Poppins · 64px / 72px · 400
Your finances, simplified.
Page titles and hero headlines
H2 (Reg) · Poppins · 48px / 60px · 400
See your wealth grow
Section titles
H3 (Reg) · Poppins · 40px / 52px · 400
Smart savings goals
Large card and feature headings
H4 (Med) · Poppins · 36px / 48px · 500
Financial analytics
Sub-section headings
H5 (Reg) · Poppins · 32px / 36px · 400
Expense & income tracking
Card titles and statistics
H6 (Med) · Poppins · 24px / 30px · 500
Connect your accounts
Small card titles and list headings
2. Body
Sub Heading (Med) · Instrument Sans · 20px / 28px · 500
Track every dollar, effortlessly.
Lead-ins and supporting headlines
Body 1 (Reg) · Poppins · 18px / 28px · 400
Fizens helps you understand where your money goes and how to make it work harder for you.
Hero descriptions and section intros
Body 2 (Reg) · Poppins · 16px / 24px · 400
Securely link your bank, credit cards and investments to get a complete overview in one place.
Paragraphs, card descriptions and supporting copy
Body 3 (Reg) · Poppins · 14px / 20px · 400
Protect your information from unauthorised access.
Compact descriptions and list items
Caption (Reg) · Poppins · 12px / 16px · 400
Fizens Inc. · Sep 05, 2026 · 0123456789
Metadata, dates, categories and statuses
3. CMS text styles
H2 (Article) · Poppins · 36px / 48px · 500
Navigating the stock market
Article section headings
H3 (Article) · Poppins · 24px / 30px · 500
Building an emergency fund
Article sub-headings
Body (Article) · Poppins · 16px / 29px · 400
Automate tasks like budgeting, tracking and saving so you can focus on the decisions that matter most.
Long-form article paragraphs
4. Link styles
02 Colours
1. Primary
Primary 1
#0040C1 · Buttons, links and accents
Primary 2
#2970FF · Highlights and gradients
Primary 3
#D1E0FF · Soft borders and icons
Primary 4
#EFF4FF · Tinted surfaces
Primary 5
#F5FAFF · Card backgrounds
2. Neutrals
Gray White
#FFFFFF
Gray Gray 5
#FAFAFA
Gray Gray 10
#F3F4F6
Gray Gray 20
#E5E7EB
Gray Gray 30
#D1D5DB
Gray Gray 40
#9CA3AF
Gray Gray 50
#6B7280
Gray Gray 60
#4B5563
Gray Gray 70
#374151
Gray Gray 80
#1F2937
Gray Gray 90
#171717
Gray Black
#0A0A0A
03 Imagery
1. Product & brand visuals
04 Components
A complete reference of the reusable interface components available across the Fizens website.
1. Buttons
2. Badges
Sub Title Badge · Section eyebrow
Key Features
Emoji Badge · Blue, Pink and Green
😊
Easy to use
🔒
Secure
⚡️
Fast
Color Icon Box · Blue, Light Blue, Pink, Green, Yellow
Tab Link · Current and Default
Star Rating · 5 stars
3. Cards
Feature Card
Budgeting
Track budgets for different categories
Additional Feature Card
Bill Payment
Pay bills directly through the app. One stop for all.
Metric Card · Light and Blue
Testimonial Card
David Lee
Montreal, Canada
It has been a game-changer for my financial life. I love how it helps me stay organized my spending.
Pricing Plan Card · Highlight
Article Card · Vertical
Advice
Sep 05, 2024
Navigating the Stock Market: A Beginner's Guide
4. Lists
FAQ Item · Open
Changelog Item
Career Item