hosman20 gives Mike a paper-and-ink makeover

Phase one of turning the Mike prototype into a polished commercial product starts where users actually look - the interface.

brandingchat-ui

Before touching features, hosman20 laid down a full design system: a warm-paper background, near-black "ink" accents, and thin hairline borders instead of heavy boxes and drop shadows. The core building blocks every screen relies on - buttons, text fields, status badges, menus - were rebuilt against that system, with the primary button reshaped into a rounded "ink pill."

It's a disciplined pass rather than a quick reskin. The team audited every page first, kept the old serif typeface that powers the statute-and-regulation document viewer so legal reading stays intact, and shipped a handful of automated checks so the new components don't quietly break later. The result is a consistent, deliberately understated look - the kind of restraint that reads as professional to a legal buyer.

So what If you care how a legal-AI tool looks across a partner's or client's screen, this is the groundwork that decides whether it feels like a prototype or a product.

View this fork on GitHub →

Spotted something wrong? Or know the PR text has fresher detail than the writeup above?

Commits in this thread

2 commits from hosman20/mike-2.0, oldest first. Source extracted verbatim from the harvested git log.

SHA Subject Author Date
3da5dd95 docs(mike-2.1): add design tokens and frontend inventory specs z 2026-05-13 ↗ GitHub
commit body
Batch 0a + 0b - pre-implementation reference docs.

- docs/mike-2.1-design-tokens.md: bespoke unprefixed token family
  (B:* nitro and F:* shadcn .pen kits are reference only, the
  unprefixed tokens are production).
- docs/mike-2.0-frontend-inventory.md: catalog of existing primitives
  + auth pages + chrome shell that Phase 1 migrates.

Agent IDs: a431cf5ab43329570 (tokens), ad8271abf2f042093 (inventory).
7b4dccea feat(design): apply Mike 2.1 tokens and redesign 4 shadcn primitives z 2026-05-13 ↗ GitHub
commit body
Batch 1 - replace globals.css @theme with bespoke Mike 2.1 token
family, rebuild Button/Input/Badge/Dropdown against the new tokens,
add vitest + 3 smoke tests.

- frontend/src/app/globals.css: bespoke unprefixed tokens (production
  family). --color-blue/--color-azure preserved as faded blue for
  legacy .usc-section / .cfr-section CSS in legal-doc viewer.
  --font-eb-garamond next/font wiring kept for legacy .font-eb-garamond
  utility.
- frontend/src/components/ui/{button,input,badge,dropdown-menu}.tsx:
  rebuilt against Mike 2.1 tokens.
- frontend/vitest.config.ts + vitest.setup.ts: test runner config.
- frontend/src/components/ui/__tests__/primitives.smoke.test.tsx:
  3 smoke tests. All pass.

Agent ID: a4c766b6e2d6a274e (general-purpose).

Capture this thread into my fork

Download a single Markdown prompt that tells Claude how to port every commit above into your working tree — adapting paths and structure to match your repo. Run it via claude -p < capture-thread-403.md from inside the repo you want the changes in.

⬇ Download capture-thread-403.md