Modernist, a design system built once and reused everywhere
This site's own look — flat, Archivo type, a single accent, zero border-radius, strong 2px dividers — isn't bespoke to it. It's a real, versioned package (@miggiemigmig/design-system) that this repo hosts as the source of truth, consumed by a car-telemetry dashboard, a personal-finance mobile app, and a Flask app on a different machine entirely — each pulling from the same tokens and components rather than reimplementing the look per app.
Where it's used
Every page you're looking at right now — restyled from a generic Tailwind starter to this system.
A car-telemetry dashboard (React + Vite) — the first app this system was hand-adapted for, before being extracted into a shared package.
A new personal-finance mobile web app, built on the same tokens with its own finance-specific composite components (sign-colored figures, budget envelopes, sparkline stats) layered on top.
An existing Flask app on a different machine, with no npm build step at all — it links straight to the package's stylesheet over the network, so edits here show up there on the next page load.
Color
One accent, one neutral ramp, and a fixed status scale reserved for meaning (good / warning / critical) — never used for anything else. Every ramp step is derived from a single base color via color-mix(), not hand-picked hex values, so retuning the accent is a one-line change.
Accent
Neutral
Status (fixed meaning — never for chart series)
Elevation
Three fixed shadow tokens for stacking order — a card at rest, a hovered/raised card, and a modal at the top of the stack. Never an ad-hoc box-shadow.
--shadow-sm
--shadow-md
--shadow-lg
Spacing & radius
A fixed spacing scale (--space-1 through --space-8) instead of raw pixel values. Corner radius (--radius-sm/md/lg) is 0px everywhere, on purpose — nothing in this system rounds.
Type
Heading 1 / 42px
Heading 2 / 32px
Heading 3 / 25px
Heading 4 / 20px
Heading 5 / 16px
Heading 6 / 13px, uppercase
Body text sits on the same Archivo family as every heading — one typeface, weight does the differentiating.
Buttons
Tags
Forms
Cards
Full anatomy — kicker, title, body, and meta — paired with each elevation step.
Primary spending account, linked to the budget envelopes below.
Primary spending account, linked to the budget envelopes below.
Primary spending account, linked to the budget envelopes below.
Navigation
The header bar — brand pinned left, links flush right.
Table
| Account | Type | Balance |
|---|---|---|
| Everyday | Transaction | $4,182 |
| Emergency | Savings | $28,400 |
Dialog
The top of the elevation stack — shown here unpinned from the viewport for display.
This can't be undone. The record will be permanently removed.
Rule
A strong 2px divider (.hr) between major sections — never softened into a hairline.
Imagery
Every content photograph goes through .grayscale — pure black and white, never tinted or colorized.
