Spark
Dark analytics workspace with orange actions, pixel histograms and compact tabular reporting. 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 pixel-grid histogram.
- 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-spark and use the sk-* component classes. StudioCatalog.vue renders the live component examples with theme="spark". The dashboard has its own domain layout and keeps its existing URL.