Visual system powering the Budget Planner dashboard — colors, type, and component tokens.
Budget Planner
The Budget Planner brand is built on calm but vibrant tones. Orange anchors the system, blue and coral provide contrast, and a soft gradient ties them together across hero surfaces.
#FF6B1A
#B83A00
#FFB680
Colors
The full palette and where each token applies.
Primary brand
#FF6B1A
Orange — Primary
var(--yellow)
#D14E00
Orange Deep
var(--yellow-deep)
#FFD0A8
Orange Light
var(--yellow-light)
#FF8E47
Orange Tile
var(--yellow-tile)
Accents
#B83A00
Accent Blue
var(--blue)
#FFB680
Accent Coral
var(--coral)
Gradient
Brand Gradient
var(--brand-gradient) — flame → ember → peach, 135°
Gradient
Brand Gradient
var(--brand-gradient) — flame → ember → peach, 135°
Semantic
#8CD9AC
Mint (success)
var(--mint-2)
#1F6D3F
Mint Text
var(--mint-text)
#F8D7D7
Pink (warn)
var(--pink)
#B33A3A
Pink Text
var(--pink-text)
Neutrals
#ECECE6
Background
var(--bg)
#F7F6F1
Card Tint
var(--card-tint)
#FFFFFF
Card
var(--card)
#ECEAE3
Line
var(--line)
#8C8C88
Muted
var(--muted)
#1A1A1A
Ink
var(--text)
Typography
Plus Jakarta Sans across the system. Numeric figures stay tabular where they matter.
Display
44px / 800
Budget Planner dashboard
Tracking -1.2
H1
28px / 800
Hello, Dennis
Tracking -0.7
H2
22px / 700
Annual Budget
Tracking -0.4
H3
17px / 700
Bill Calendar
Tracking -0.3
Body
14px / 500
Track your debt and budgeting & debt-recovery financial goals.
Tracking 0
Small
12px / 500
From last month · in 6 days
Tracking 0
Mono / Numeric
18px / 600
Ksh 24,077
Tracking 0.5
Components
Building blocks used across the dashboard.
Buttons
Pills & badges
✓ On track• Near limit× Behind★ FeaturedIncomeExpenseDebt