Vault UI — Style Guide
All design tokens, components, and patterns used throughout Vault UI. Use this as a reference when customising or extending the template.
Colour tokens
All colours are CSS custom properties on :root. Override any token to retheme the entire UI.
Typography
Syne (sans) for UI and headings. DM Mono for all numbers and data. Both via Google Fonts.
Spacing scale
4px base unit. All padding, gap, and margin values use multiples of 4.
Buttons
Four semantic variants, three sizes, icon support, and full-width mode.
Badges
Status indicators, asset tags, and labels. Always uppercase. Optional leading dot for live/status context.
Inputs & forms
All inputs use DM Mono for values. Focus ring uses --accent.
Cards
Stat card, content card, and wallet card variants.
Card body. Can contain any component — tables, charts, forms, or custom content.
Toggles
Binary on/off. Click any toggle below to test the transition.
Alerts
Inline alerts for page-level feedback. Toasts auto-dismiss after 3.5s and stack from bottom-right.
Avatars
Initials-based in four sizes. Group with negative left margin.
Asset rows
4-column grid with icon, name/ticker, price, 24H change, and value. Hover state included.
Transaction rows
Flex row with icon, label, time, and amount/USD pair.
Pagination
30px fixed-width buttons. Active state uses accent fill on dark background.
Progress bars
Used in stat cards for visual ratios and in billing for subscription usage.
Empty states
Centred layout for lists and tables with no data.
Misc components
| Asset | Entry | Current | P/L | Status |
|---|---|---|---|---|
| Bitcoin | $61,240 | $67,420 | +10.1% | Open |
| Ethereum | $3,920 | $3,840 | -2.04% | Open |
| Solana | $192.4 | $182.4 | -5.2% | Review |
| Chainlink | $16.20 | $18.40 | +13.6% | Closed |