Ledger
FreeFinancial professional design system inspired by Wise and Revolut. Clean layouts, teal accents, and tabular number typography for fintech dashboards and banking applications.
Style: Financial Professional·16 components·Fonts: DM Sans, DM Sans
Quick Install
Install a single component:
npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/button
Or tell your AI agent:
Use the Ledger design system from vibedesign.systems. Read https://vibedesign.systems/systems/ledger/llms.txt for details.
Components
Alert: Something happened
alert
ledger/alertVD
AB
avatar
ledger/avatarDefault
Secondary
badge
ledger/badgePrimary
Outline
button
ledger/buttonCard Title
Description text here
card
ledger/card✓
checkbox
ledger/checkboxDialog Title
Dialog content goes here
Confirm
dialog
ledger/dialogPlaceholder text...
input
ledger/inputForm Label
label
ledger/labelSelect option...▾
select
ledger/selectseparator
ledger/separatorskeleton
ledger/skeletonswitch
ledger/switchTab 1
Tab 2
tabs
ledger/tabsEnter text...
textarea
ledger/textareaTooltip text
tooltip
ledger/tooltipDesign Tokens
| Token | Value | Preview |
|---|---|---|
| --primary | oklch(0.58 0.14 170) | |
| --primary-foreground | oklch(0.98 0 0) | |
| --background | oklch(0.99 0 0) | |
| --foreground | oklch(0.15 0.02 260) | |
| --muted | oklch(0.96 0.005 260) | |
| --muted-foreground | oklch(0.50 0.02 260) | |
| --border | oklch(0.92 0.005 260) | |
| --card | oklch(1 0 0) | |
| --accent | oklch(0.55 0.12 250) | |
| --destructive | oklch(0.58 0.22 25) | |
| --radius | 0.5rem |