Folio
Charcoal finance workspace with mint actions, calm balance typography and thin cash-flow lines. A reusable design system, separate from the dashboard example.
Start here
- Principles and tokens: palette, type, spacing, radius, semantics and CSS API.
- Components: Live component patterns and states.
- Charts: line, area, bar, stack, donut and cash-flow comparison.
- Layouts: app shell, navigation and form composition.
- Dashboard: the source-inspired interactive overview.
Principles
- One brand accent per surface. Brand color is an action, not a synonym for success or failure.
- Numbers use tabular digits, currency labels and explicit periods. Never hide units in a tooltip.
- Every control has focus, disabled, loading or feedback states where applicable.
- Dense reports keep horizontal table scrolling on small screens. Core forms and cards stack.
- All live previews are local. No payment, message or account connection occurs.
Using the system
Load studio-systems.css, wrap content in studio-kit studio-folio and use the sk-* component classes. StudioCatalog.vue renders the live component examples with theme="folio". The dashboard has its own domain layout and is available at /folio/overview.
Implementation tokens · Full live catalog
Trading panel
Big balance, an open position with entry, take-profit and liquidation levels, a leverage multiplier and an equity curve. Switch market, side and range, pause the live ticks, close or reopen the position. It reads this template's theme tokens, and motion stops with reduced motion. Fictitious paper account.
- Trades
- 181
- Red
- 36
- Avg win
- +3.5%
- Avg loss
- -0.8%
Fictitious paper account. Prices and trades are simulated in your browser. No market data, orders or real funds.