dssoca
A token-driven Svelte 5 design system — signal green on near-black,
monospace-forward, zero border-radius everywhere. One theme.css and
13 components, configured along two orthogonal axes.
Color axis
Flip data-theme on any ancestor — dark (default) or light — and everything below recolors.
dark light
Size axis
Flip data-size-variant — sm · md (default) · lg — and the chrome rescales from token values.
sm md lg
Components
Icon The inline SVG icon set.Badge Compact status/label pill (square, of course).Button The primary action control.Input Labelled text input with validation affordances.Card Titled panel container.Sparkline Tiny inline bar chart.ServiceCard Service status row with latency + sparkline.MetricTile Single KPI value with delta.Topbar App-shell top bar with tabs.Sidebar App-shell navigation sidebar.LogStream Live, levelled log viewer.Toaster Toast notification host.EmptyState Empty / error placeholder.