# Ledger Design System > Financial professional design system inspired by Wise and Revolut. Clean layouts, teal accents, and tabular number typography for fintech dashboards and banking applications. ## Overview - Style: Financial Professional - Tier: free - Fonts: DM Sans (--font-sans), DM Sans (--font-display) - Border radius: 0.5rem - Spacing base: 4px - Components: 16 ## Design Tokens ### Colors - --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) ### Typography - DM Sans: var(--font-sans) - DM Sans: var(--font-display) ## Components ### alert Ledger alert — informational banner for transaction notifications and account warnings. Supports default and destructive variants. Dependencies: class-variance-authority Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/alert ### avatar Ledger avatar — circular profile image with fallback initials. Clean styling for user accounts and transaction participants. Dependencies: @radix-ui/react-avatar Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/avatar ### badge Ledger badge — compact label for transaction status, account types, and financial categories. Supports default, secondary, destructive, and outline variants. Dependencies: class-variance-authority Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/badge ### button Ledger button — financial-grade precision with teal accents. Clean hover states inspired by Wise and Revolut. Supports default, destructive, outline, secondary, ghost, and link variants. Dependencies: class-variance-authority Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/button ### card Ledger card — clean container with subtle border for financial data display. Tabular number support for currency and metrics. Includes Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/card ### checkbox Ledger checkbox — accessible checkbox with checked state using the system's primary color. Dependencies: @radix-ui/react-checkbox Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/checkbox ### dialog Ledger dialog — modal overlay with header, footer, title, and description. Includes close button and animations. Dependencies: @radix-ui/react-dialog Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/dialog ### input Ledger input — clean text input with teal focus ring for financial forms and data entry. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/input ### label Ledger label — form label with consistent typography and disabled state handling. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/label ### select Ledger select — accessible dropdown select with trigger, content, item, label, and separator components. Dependencies: @radix-ui/react-select Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/select ### separator Ledger separator — horizontal or vertical divider line using the system's border color. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/separator ### skeleton Ledger skeleton — animated loading placeholder using the system's muted color. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/skeleton ### switch Ledger switch — toggle switch with the system's primary color when checked. Dependencies: @radix-ui/react-switch Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/switch ### tabs Ledger tabs — accessible tab navigation with list, trigger, and content components. Dependencies: @radix-ui/react-tabs Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/tabs ### textarea Ledger textarea — multi-line text input with focus ring matching the system's primary color. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/textarea ### tooltip Ledger tooltip — small popup on hover with provider, trigger, and content components. Dependencies: @radix-ui/react-tooltip Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/tooltip ## Quick Start Install all components: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/alert npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/avatar npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/badge npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/button npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/card npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/checkbox npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/dialog npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/input npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/label npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/select npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/separator npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/skeleton npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/switch npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/tabs npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/textarea npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/tooltip ## Links - System page: https://vibedesign.systems/systems/ledger - Registry API: https://vibedesign.systems/api/registry/ledger - Platform: https://vibedesign.systems/llms.txt