The Hodget design system
Our internal component library — colors, type, buttons, badges and forms — built on shadcn and Base UI with our own tokens. Every example is live; hover a code chip to copy the class.
Color tokens
Semantic tokens are OKLCH CSS variables consumed through Tailwind utilities like bg-muted or text-muted-foreground. They flip automatically in dark mode.
Typography
Three families. Geist for display headings (font-heading), Inter for UI & body (font-sans), and Geist Mono for code and numerals (font-mono).
Radii, shadows & spacing
Radii derive from --radius (0.625rem). Spacing is a 4px base scale. Shadows stay soft and functional.
Badges
The shadcn Badge — the standard variants, plus a set of named color variants layered on top. Click a card to copy its variant.
Inputs & forms
Text inputs are h-8, sharp, with a border-input resting border that gains a ring on focus. Checkbox and switch use --primary when active. Everything here is live.
Please enter a valid email address.
Alerts
The shadcn Alert with AlertTitle / AlertDescription and an optional leading icon. Standard default and destructive, extended with info / success / warning.
Data table
A data table on @tanstack/react-table — sortable headers, row selection with a bulk-action bar, a filter menu + pills, and pagination. This demo runs in memory over a static set of engine runs; the live, session-guarded version is wired through the runs API.
| Mode | Status | ||||||
|---|---|---|---|---|---|---|---|
| run_9f2a10 | Momentum · Large Cap | Backtest | 1.82 | Completed | Jun 30, 14:20 | ||
| run_9f2a11 | Mean Reversion · ETF | Paper | — | Running | Jun 30, 13:05 | ||
| run_9f2a12 | Value + Quality Blend | Backtest | 2.14 | Completed | Jun 30, 11:47 | ||
| run_9f2a13 | Trend Following · Futures | Paper | — | Failed | Jun 30, 09:12 | ||
| run_9f2a14 | Low Volatility · Global | Backtest | 0.96 | Completed | Jun 29, 18:40 | ||
| run_9f2a15 | Pairs · Sector Neutral | Backtest | — | Queued | Jun 29, 16:31 |
Animations & motion
Motion is built on Emil Kowalski’s easing blueprint and a five-step duration scale. Entrances favor ease-out-quart; feedback loops stay subtle. Every demo honors prefers-reduced-motion.
Overlays
Floating surfaces that open over the page — modals, side panels, popovers, tooltips, and a command palette.
Form controls
The inputs a dashboard actually needs — with Input Group front and center for prefixed URLs, numeric amounts, and inline search.
Visible to your team only.
Feedback & status
Loading, progress, notifications, and identity — the small signals that tell people what just happened and who is here.
Empty states & items
Empty states for zero-data views, and Item rows for lists of content — the building blocks for results, settings, and member lists.
variant
variant
variant
Page templates
Full-page layouts inside the app shell — reuse these as starting points when building a new page. Each pairs a PageHeader with library components inside a shell frame.
Runs
Search, filter, and sort a data table.
| Run | Strategy | Mode | Status |
|---|---|---|---|
| run_9f2a12 | Value + Quality Blend | Backtest | Completed |
| run_9f2a11 | Mean Reversion · ETF | Paper | Running |
| run_9f2a13 | Trend Following · Futures | Paper | Failed |
Value + Quality Blend
Backtest · Jun 30, 2026 · 14:20 UTC
Backtest
31
Completed · Sharpe 2.14
Reports
Export and scheduled reports.
Settings
Workspace and account.
Shown across the app.
File upload
A drag-and-drop surface built on native drag events and a hidden file input — no extra dependencies. The whole surface is clickable and keyboard accessible (Enter/Space opens the file picker), and files over the size limit are rejected via onRejected.
One-time code
Code input for two-factor and verification — one character per slot, with paste support, keyboard navigation, and a clearly marked active slot. The confirm button stays disabled until every digit is filled in.
We sent a 6-digit code to you@example.com.
Enter the 4-digit code from SMS.
Tree & folders
A composable tree for folder and file navigation. Arrow keys move focus between visible rows, right/left open and close folders, and a single row can be selected. Expand and selected state can be controlled or uncontrolled.
Timeline
Activity and audit log — who did what, when. Each event has an icon, an actor, a description, and a timestamp, and the line between the icons hides automatically on the last row.
- Committee approved 3 positions
Portfolio construction passed all risk gates.
- Backtest completed
Momentum · Large Cap finished in 4 minutes.
- Risk engine blocked a position
Exposure limit exceeded for a single name.
- Scheduler queued a run
Momentum · Large Cap, backtest mode.
- Backtest completed
- Run queued
- Position blocked
Score
Reusable score primitives for conviction and other scoring surfaces. Numbers use font-mono tabular-nums; colors draw only on the existing --chart-* tokens.
Charts
Built on recharts via ChartContainer. The color tokens --chart-1–--chart-5 are a sequential cyan ramp (light → dark), not a categorical palette — use at most two series per chart (--chart-2 primary, --chart-5 secondary), or--chart-3 alone for a single series. Never five separate categories on five different tokens without direct labels. One y-axis per chart, tooltip always on, legend from two series and up.
Two series max — primary --chart-2, secondary --chart-5. Days are zero-filled, no gaps in the run.
A single series in a light context uses --chart-3 — mid-ramp, neither the lightest nor the darkest.
Four categories with a direct name on each segment (chart-1/chart-3/chart-5 + muted-foregroundfor "other") — never five+ tokens without labels.