One system. Every surface.
Zero magic numbers.
Every color, type step, spacing, radius, motion token, and component that powers Funding Machine — from marketing hero to funding confirmation. Built once, referenced everywhere.
Color
Every color is a token. Never invent a hex mid-file. Semantic aliases carry meaning; primitive scales carry precision.
Typography
Inter across the board. Tabular numerals on every financial value. JetBrains Mono only for IDs, timestamps, and technical accents.
Spacing & radius
2px base scale. Radius vocabulary maps to component families: 8 compact, 10 inputs, 12 cards, 16 prominent, 20–24 marketing feature.
Elevation
Six levels. Subtle by default. Brand/AI/Funded glows reserved for signature moments only.
Motion
Five durations · six easings. Motion is functional — it orients, explains, confirms, or rewards. Never decoration.
Iconography
Lucide-style outline. 1.5–2px stroke. 24 base grid. Fintech-specific icons follow the same visual weight.
Buttons
Primary carries the deal forward. Secondary supports it. Ghost is for tertiary navigation. Funded uses the signature gradient — one per screen, max.
Chips & badges
Text fields
Selects, checkboxes, toggles
Segmented control
Metrics
Tabular numerals. The amount is dominant. The label is subordinate. Never make every metric enormous.
Charts & sparklines
Avatars
Alerts
Every AI-analyzed deal now includes 3 ranked lender matches with historical fit scores.
$45,000 funded via Nexlink Capital. Commission $1,687.50 pending payout on Sep 24.
Bank statement for August is missing. Deal cannot be submitted until this is uploaded.
Bureau connection timed out. Retry in 30s or switch to Experian.
Toasts
Progress
Skeletons
Empty states
No deals yet
Send your first applicant a magic link. AI analysis kicks in the moment they connect their bank.
Command palette
⌘K opens a global search + action surface. Keyboard-first. Every broker action, one shortcut away.
Tooltip
Deal card + health indicator
Compact, information-rich. Health bar communicates urgency without words. Drag-native.
Credit score dial
Lender match card
Offer comparison table
| Lender | Amount | Term | Factor | Weekly | Comm. |
|---|---|---|---|---|---|
| Nexlink Capital Best fit | $80,000 | 12 mo | 1.34 | $2,062 | $3,000 |
| Meridian Funding | $75,000 | 12 mo | 1.36 | $1,962 | $2,625 |
| Copperbridge | $85,000 | 18 mo | 1.42 | $1,545 | $3,570 |
Funding timeline / stepper
AI underwriting result
Commission card
FM-4821 · $45,000 · 3.75% · Nexlink Capital
Pipeline stage column
Document checklist
Modals · drawers · date pickers · popovers · dropdowns · stepper · pagination · file upload · combobox · risk indicator · deal health · lender comparison · contract status · funding confirmation · bank statement viewer · plus 60+ variants.
← Back to hub