Luckiest Man Ventures.Brand System

Chapter 06 · Shells

Two SaaS shells. Pick one per product.

Reusable dark product skeletons, extracted from two real Luckiest Man Ventures apps. Both run on the canonical tokens, are billing-agnostic on purpose, and ship as clean starting points you can reuse, or sell, without ripping anything out.

§ 6.1

What both give you

Same bones, two signature moves

A 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.

Rail

Navy icon rail

An 86 to 88px rail: brand, nav, settings, avatar. The constant across both.

Surfaces

Dark, tokenized

Every surface from the canonical palette. No drift, no cool blue, no pills.

Type

The four families

Inter runs the UI, Fraunces heads the panels, JetBrains Mono stamps the meta.

Billing

Agnostic

No plan or pricing UI baked in. Billing is a future add-on, so the skeleton stays clean.

§ 6.2

The two options

Live demos · open either full screen

You ship both and choose per product. The previews below are the real shells running; open either one full screen to drive it.

Option A

The Fly-out

from lightbreak

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
Pick it when users live in a list-then-detail loop and the fly-out can keep context while showing depth.
Option B

The Primitives

from coaching-os

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
Pick it when you are starting fresh and want a finished primitive layer, a command palette, and an auth seam out of the box.
§ 6.3

Why no billing

A skeleton you can sell
$0

Billing 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.