Clarity today. Freedom tomorrow.
The Mod Fin Lit design system — tokens, type, and components for a modern financial-literacy platform built for working professionals.
Brand & Logo
Exact artwork from the brand board. The logo auto-swaps to its inverse on dark surfaces.
Full lockup — on white
Wordmark — no tagline
Full lockup — on navyPattern & Graphic Elements
Decorative accents for backgrounds, dividers, and section breaks.
Wave divider (blue → teal)
Color — Brand Ramps
Anchored to the brand board: Ink #0E1A2B · Blue #3B82F6 · Teal #3DB6A3 · Gold #E8B949
Color — Semantic Tokens
Theme-aware aliases. Toggle dark mode (top-right) to see them adapt.
Typography
Manrope ExtraBold (display) · Inter Regular (body) · 1.250 modular scale
Display 6xl
Heading 4xl
Heading 2xl
Body XL — lead paragraph (Inter)
Body Base — Working professionals don't need jargon. They need clarity, the right next step, and the confidence to take it.
Small 14px — captions, helper text, metadata.
Eyebrow / Overline
$12,480.55 · 1234567890 (tabular figures)
Buttons
Variants × sizes, with focus rings.
Badges
Status & category labels.
Forms
Inputs with brand focus ring.
Cards & Financial Stats
Domain components in context.
Budgeting that actually sticks
A 5-minute framework for working professionals.
Build your freedom plan
Personalized investing roadmap, reviewed quarterly.
Elevation & Radius
Shadow and corner scales.