The Tauri-first design system and design language.
Whiskeyjack is a design language shaped through practice and built for one-handed use – one web codebase, delivered native on desktop and mobile via Tauri, and battle-tested in shipping apps before it earned its public release.
The philosophy
A design language first, a component library second. Four ideas carry it:
Windows Phone lineage
Metro's best ideas, carried forward – swipeable pivot tabs, a bottom nav with a morphing action pill, tap-again confirmations instead of modal dialogs, frosted sticky bars. Content-first chrome, everything reachable with a thumb.
Tauri-first
Tauri's UI ecosystem is thin, so the design language covers the app shell as well as the widgets – window controls, tray and background behavior, update UX. The PWA is the foundation; Tauri is the product surface.
Battle-tested
Nothing ships on day one. Every token, component, and convention proved itself in real apps – health trackers, goal trackers, shared lists – before being extracted into the system.
Meet the reference appsBuilt for agents too
The conventions are codified in agent-readable rules – the same rules and skills AI tooling used to build these apps – so generated code stays on the design language. The public starter kit will ship with them pre-wired.
Three pillars, one system
Design system
Design tokens compiled from one source to CSS, JS, Swift, and Kotlin, with 20+ React components and hooks built on them – accent theming with automatic contrast included.
Explore the componentsStarter kit
A create-* template that scaffolds a new app the way the reference apps are built – PWA shell, bottom nav, pivot tabs, theming, and agent rules wired from the first commit.
Tauri extension pack
The desktop and mobile shell layer: per-platform window controls, tray and close-to-background patterns, update UX, and OS accent integration – extracted from the most-iterated app.
Get started
The design system, the Tauri extension pack, the starter kit, and the component registry are all live – install and start building. The agent rules ship pre-wired in the starter. Here's where each piece stands:
Design tokens & Tailwind preset
One npm package: CSS variables, theme files, and the Tailwind preset.
npm i @whiskeyjack-net/design-systemComponent registry
shadcn-style – copy components into your repo and own the code.
npx shadcn add https://whiskeyjack.net/r/button.jsonStarter kit (create-*)
Scaffolds a PWA shell with nav, pivot tabs, and theming wired.
npm create whiskeyjack@latestTauri extension pack
Window controls, tray and background behavior, update UX – the app-shell layer.
npm i @whiskeyjack-net/tauri- Available
Agent rules & skills
The conventions in agent-readable form, shipped pre-wired with the starter kit.