Components
A curated tour of the components that carry the design language. Pick one on the left to see it live; every component and hook the design system ships is here, and each shipped in a real app before it earned its place.
AppMain
The main scroll region with a bounded scroll indicator.
No interactive demo for this one – it's a hook or utility. The description above and the import below are the reference.
Import
import { AppMain } from '@whiskeyjack-net/design-system'Why it behaves this way
The components are the vocabulary; these are the grammar rules – and they matter most where the vocabulary runs out. A page the system doesn't cover yet still knows where its actions go and how its surfaces behave. Each rule is a decision that survived the reference apps:
Tabs are the way through content
Related surfaces sit side by side under Metro-style pivot tabs, so a lazy thumb swipe moves you through an app. Any tab bar is always swipeable: the titles are labels, the gesture is the navigation.
Important actions live in the bottom half of the screen
Whatever matters – navigation, the primary action, a form's Save – stays where a thumb naturally rests. The frosted bottom pill is the canonical case, and the rule holds for any new surface. On desktop the same items morph into the header.
Drawers modify the page
The bottom drawer exists to change what's on the page – add, edit, confirm. Content you might want to look at – stats, charts, detail views – belongs in the main chrome as a page, a tab, or an inline expand.
Edits are deferred, dismissal is free
Nothing in a drawer applies until Save, so swiping it away, tapping the backdrop, pressing Escape, or hitting the Back button is always a safe cancel – no "discard changes?" interrogation on the way out.
Tap again instead of "Are you sure?"
Destructive actions arm on the first tap and commit on the second, right where your thumb already is. No dialog to travel to – and the armed state is announced to assistive tech.
Content first, chrome translucent
Headers, tab bars, and nav pills are frosted surfaces the content scrolls behind – the app is the content. Separation comes from the content itself rather than boxed panes and hard dividers.
This is what makes the system a design language: when a feature needs UI that doesn't exist yet, the rules decide its placement and behavior before a line is written – so the new piece feels like it was always part of the language.
The design system is being prepared for public release – the components above will be installable from a registry, with a starter kit to scaffold new apps.