Design system
Neo-brutalist tokens inspired by GitDiagram — hard shadows, purple surfaces, and monospace data UI.
Design philosophy
RepoPilot uses a GitDiagram-inspired neo-brutalist system: high-contrast borders, offset hard shadows, bold typography, and a purple-tinted marketing shell. The dashboard shifts to a calmer canvas layer for dense data views.
Token layers
| Layer | CSS | Used for |
|---|---|---|
| A — Brand | tokens.css, public-site.css, landing.css | Marketing header, landing, browse, docs |
| B — App chrome | page-layout.css, shell.css, nav-item.css | Dashboard sidebar, page headers, forms |
| C — Canvas | neo-panels.css, overview-bento.css | Bento panels, KPI tiles, data tables |
Semantic colors live in web/styles/tokens.css. Light and dark themes swap HSL values on [data-theme="light"] / [data-theme="dark"]. ThemeToggle persists preference to localStorage; until then the OS preference is followed. Surfaces use semantic tokens; ink on primary chips uses --color-on-primary for contrast in both modes.
Typography
- Display — Cabinet Grotesk via
--font-display - UI / body — General Sans via
--font-sans - Technical — JetBrains Mono via
--font-monofor inputs, tables, KPI labels - Scale —
--text-display,--text-h1,--text-h2,--text-body,--text-ui,--text-micro
Core components
| Component | Location | Purpose |
|---|---|---|
| Button / IconButton | components/ui/Button.tsx | Primary actions, neo shadow hover |
| NavItem | components/ui/NavItem.tsx | Dashboard sidebar links with icons |
| AppShell | components/AppShell.tsx | Dashboard layout + mobile nav |
| PublicSiteHeader | components/ui/PublicSiteHeader.tsx | Marketing nav + auth |
| BentoPanel / KpiTile | components/ui/ | Overview metric cards |
| MermaidDiagram | components/ui/MermaidDiagram.tsx | Architecture graph rendering |
| DocsLayout | components/ui/DocsLayout.tsx | Documentation sidebar shell |
Motion
Page transitions use Motion (motion/react) with reducedMotion: "user". Enter animations are defined in web/lib/motion.ts. Index progress uses a floating pill with animated percentage.
Accessibility
- Focus rings via
--focus-ringtoken - ARIA labels on site nav, mobile menu, and icon-only buttons
prefers-reduced-motionrespected in CSS transitions- Semantic heading hierarchy on docs and dashboard pages