Vault & LedgerLegacy format
Vault & Ledger is a design system for wealth management platforms, private banking portals, family offices, and trust administration tools. Where modern fintech leans on bright accent colors and minimalist sans-serif neutrality, Vault & Ledger reaches in the opposite direction — toward the gravitas of a bound annual report, an old-line bank lobby, or a leather-trimmed ledger. The aesthetic centers on deep forest green, antique gold, and warm parchment, with serif typography that treats financial data with the same care that institutional print once did. Dense tabular data is the system's organizing principle: portfolio holdings, transaction histories, performance attribution, tax-lot detail. Every column aligns. Every figure renders in tabular old-style or lining numerals. The interface is built for clients who have wealth measured in decades and advisors who present quarterly reviews in person.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxVault & Ledger is a design system for wealth management platforms, private banking portals, family offices, and trust administration tools. Where modern fintech leans on bright accent colors and minimalist sans-serif neutrality, Vault & Ledger reaches in the opposite direction — toward the gravitas of a bound annual report, an old-line bank lobby, or a leather-trimmed ledger. The aesthetic centers on deep forest green, antique gold, and warm parchment, with serif typography that treats financial data with the same care that institutional print once did. Dense tabular data is the system's organizing principle: portfolio holdings, transaction histories, performance attribution, tax-lot detail. Every column aligns. Every figure renders in tabular old-style or lining numerals. The interface is built for clients who have wealth measured in decades and advisors who present quarterly reviews in person.
Components
Cards
Card Title
Sample body text for the card component.
Holdings Table
default
Buttons
Inputs
Sidebar Navigation
default
Elevation & Depth
Do's & Don'ts
Do
Don't
Icons
Font AwesomeLibrary: Font Awesome · Style: outline · Size: 25px
Motion
Motion is restrained and dignified. Standard duration is 200ms with cubic-bezier(0.4, 0, 0.2, 1) easing. Card hovers use 240ms paper-drop. The performance chart line draws over 800ms left-to-right with ease-out — a deliberate, considered reveal. Page transitions are crossfades only (no slides or scales). No bouncing, no spring physics, no parallax. Numeric value changes (when refreshing market data) use a brief 200ms color flash (gain or loss) before settling to neutral ink — the only color use on the numeric tabular display.
Voice and Tone
• Formal and considered. Like a fiduciary's quarterly letter, not a banking app push notification.
• Use institutional finance idiom: "Period ending," "Effective date," "Position as of," "Net of fees," "After tax."
• Address clients in the third person on statements ("Mr. and Mrs. Hartwell hold the following positions"). First person plural in advisor commentary ("We continue to favor a defensive equity tilt").
• Disclosures are explicit and prominently placed, never tucked behind toggles.
• Empty states use the language of administration: "No transactions in this period," "No positions to display."
• Performance copy avoids superlative or emotional framing: "The portfolio returned 7.4% over the period" not "Crushed it this quarter!"
Use with MCP
Don't have the MCP? Install it here