Pixel-brutalist dashboard template. Cool-toned monochrome. Sharp geometry. Stacked-block charts. 2-layer cards.
Near-monochrome grayscale with a subtle blue undertone (hue 220, saturation 4–14%). No warm yellows, no neutral grays — every surface carries a faint cool cast that keeps the palette clean and prevents the "dirty gray" look that pure hsl(0 0% …) produces. The only chromatic accent is green (--success) for positive change indicators.
Large layout containers (sidebar shell, main content wrapper) have zero border radius — hard, architectural edges. Small interactive controls (buttons, search box, nav items, badges, kbd tags) use rounded-lg. Page-level cards use --radius-card (14px); inner widgets use --radius-widget (10px). This creates a deliberate tension between the rigid frame and the soft content within it.
The signature visual element. Every card follows a stacked construction:
- Outer container —
bg-mutedwithrounded-[--radius-card], the cool-gray base - Inner content area —
bg-cardwithrounded-[--radius-widget]and a 1px border, floating inside - Exposed gray zone — the gap between inner and outer surfaces holds secondary content (footers, labels, metadata)
Depth is communicated through luminance layers, not shadows or gradients.
Bar charts are rendered as vertically stacked square blocks (PixelBarChart component) rather than smooth SVG rectangles. Each bar is a column of discrete squares, reinforcing the pixel-grid aesthetic.
Three rounded squares arranged to form the number 7 — two blocks on top (the horizontal stroke) and one block bottom-right (the vertical stroke). The logo ships as both a React component (DottyLogo) and a static SVG favicon (public/logo.svg).
Inter is the global body font. Only card numerical values (stats, metrics, percentages) use IBM Plex Mono via the font-mono-num utility. Display headings optionally use DM Sans via font-display.
28 pages organized into 5 sidebar sections. The Dashboard page plus all Controls, Pages, and System pages are fully implemented; Blocks and Scenarios pages are layout-ready stubs.
| Section | Pages |
|---|---|
| Blocks | Dashboard, Components, Health, Accounts, Progress Tracking, Flow Comparison, Portfolio, Interactions |
| Scenarios | Wearable Health, Banking & Wealth, Network Ops |
| Controls | Interactive, Data, Forms, Navigation |
| Pages | Login, Badge Login, Static Page, Loading, 404 |
| System | Layout, Color Palette, Settings |
| Layer | Technology |
|---|---|
| Build | Vite 8 + SWC |
| UI | React 19 + TypeScript 7 |
| Routing | React Router 7 |
| Styling | Tailwind CSS 4 + @tailwindcss/vite + tw-animate-css |
| Components | shadcn/ui (31 primitives) |
| Charts | Recharts 3 + custom PixelBarChart |
| Icons | Lucide React (1.5px stroke) |
| Testing | Vitest 4 + Testing Library |
| Package Manager | Bun |
All tokens live in src/index.css as CSS custom properties with HSL values (hue saturation lightness). Light mode uses :root, dark mode uses .dark. Every gray-scale token shares hue 220 for consistent cool tonality.
--background Page background 220 14% 96% (light) / 220 14% 5% (dark)
--foreground Primary text 220 14% 10% (light) / 220 6% 93% (dark)
--card Card inner surface 220 20% 100% (light) / 220 10% 9% (dark)
--muted Card outer surface 220 10% 93% (light) / 220 8% 15% (dark)
--border Borders 220 8% 88% (light) / 220 6% 22% (dark)
--radius 0px (global default — sharp corners)
--radius-card 14px (page-level cards)
--radius-widget 10px (inner card widgets)
# Install dependencies
bun install
# Start dev server (port 7017)
bun dev
# Build for production
bun run build
# Run tests
bun run test