PortfolioForge Design Kit
Component Library
Buttons, cards, inputs, tabs, and navigation pulled from the PortfolioForge Figma file.
Primary
#3629B7
Error
#FF4267
Success
#52D5BA
Typography
Poppins family
Title 1 / 24 SemiBold
Title 2 / 20 SemiBold
Title 3 / 16 SemiBold
Body 1 / 16 Medium
Body 2 / 16 Regular
Body 3 / 14 Medium
Caption 1 / 12 SemiBold
Caption 2 / 14 Medium
Buttons & CTA
Radius 15px • 16px MediumPrimary
Ghost / Link
Cards & Widgets
Shadows: 0 4px 30px rgba(54, 41, 183, 0.07)Total Balance
$12,458.00
Income
+$3,240.00
Expenses
-$1,180.00
Credit Card
VISA4756 •••• •••• 9018
Card Holder
John Smith
Expires
12/28
John Smith
Premium Member
Quick Transfer
Savings Vault
6.5% APY$8,420.00
62% of goal reached
Inputs & Forms
Radius 15px • Border #CBCBCBMust be at least 8 characters
Tabs & Navigation
Rounded 15px • Primary fill for activeTab Buttons
Navigation Tabs
Bottom Navigation
Badges & Status
Pills with 12px/14px textList Rows
Icons on 40px circles • Dividers on neutral-100Water Bill
Monthly utility
-$280
Salary Deposit
Monthly income
+$5,200
Amazon Purchase
Shopping
-$156.99
Transfer to Savings
Internal transfer
$1,000