Typography
Font: Inter — Fallback: system sans-serif stack
4xl / 36px
Bold
Page Heading
3xl / 30px
Bold
Section Title
2xl / 24px
Semibold
Card Title
xl / 20px
Semibold
Subsection Heading
lg / 18px
Medium
Lead paragraph or intro text
base / 16px
Normal
Body text. This is the default reading size for all paragraph content across the Payfrit platform.
sm / 14px
Normal
Secondary text, table content, form labels, and supporting information.
xs / 12px
Medium
CAPTIONS, BADGES, TIMESTAMPS, AND MICRO LABELS
Spacing Scale
Base unit: 4px. All spacing uses multiples of 4.
Buttons
Variants
Sizes
Form Inputs
Cards
JD
Jane Doe
Member since 2025
HSA balance: $2,450.00
Monthly Summary
Your spending for March 2026
$1,234.56
-12% from last month
Quick Actions
Common tasks you can do right now.
Badges & Tags
Primary
Approved
Pending
Declined
Processing
Draft
Alerts
Success! Your payment of $250.00 has been processed.
Heads up. Your HSA balance is running low.
Error. We could not process your transaction. Please try again.
Info: New plan options are available for your account.
Data Table
| Date |
Description |
Category |
Amount |
Status |
| Mar 18, 2026 |
CVS Pharmacy |
Prescription |
$45.00 |
Approved |
| Mar 15, 2026 |
Dr. Smith Office Visit |
Medical |
$180.00 |
Pending |
| Mar 12, 2026 |
LensCrafters |
Vision |
$320.00 |
Approved |
| Mar 10, 2026 |
Gym Membership |
Wellness |
$49.99 |
Declined |
Payfrit Design System v1.0 — Maintained by Ava — 2026