What both give you
Same bones, two signature movesA thin navy icon rail, a top bar with workspace switcher and search, dark surfaces from the canonical tokens, Inter-led UI with Fraunces headers and JetBrains Mono meta, styled scrollbars, focus rings, and empty states.
Navy icon rail
An 86 to 88px rail: brand, nav, settings, avatar. The constant across both.
Dark, tokenized
Every surface from the canonical palette. No drift, no cool blue, no pills.
The four families
Inter runs the UI, Fraunces heads the panels, JetBrains Mono stamps the meta.
Agnostic
No plan or pricing UI baked in. Billing is a future add-on, so the skeleton stays clean.
The two options
Live demos · open either full screenYou ship both and choose per product. The previews below are the real shells running; open either one full screen to drive it.
The Fly-out
Signature move: the OverlayDrawer. Click a summary row and a rich detail panel flies in from the right edge alongside the rail. Compress to summary, expand to detail.
- Master/detail
- List into a right-side fly-out drawer
- Best for
- Record-centric apps: issues, deals, tickets, contacts
The Primitives
Signature move: a Command palette (Cmd/Ctrl-K) over a finished typed primitive library, with a demo-mode auth seam that degrades with no keys.
- Master/detail
- Routed, plus a fixed right-hand context panel
- Best for
- A new product that wants the strongest foundation
Why no billing
A skeleton you can sellBilling is a future add-on, on purpose
Neither shell carries plan, upgrade, or pricing UI. Billing lands later as a module, so the shell stays a clean, reusable skeleton you can hand to a new product or sell to someone else without ripping payment logic out first.