Axiom Demo
The reference app: one screen per component, every state, every styling variant.
Phase 1
The demo app ships with the first components. It is the only app on this page that is already on the roadmap.
Every component in Axiom gets a screen here, showing its variants, its sizes and its states next to each other. It is the app we open first when something looks wrong, and the app a new contributor opens to see what already exists.
Why this app
It is the cheapest place to catch the two failures that break a design system quietly:
- A component that looks right in
stylesheetand wrong inunistyles, because the behavior / style split leaked. - A state nobody drew: disabled, loading, long text, right-to-left, a 24px label at the largest accessibility size.
Both show up immediately when the same props render side by side.
Screens
| Screen | What it holds |
|---|---|
| Catalog | The four layers — atoms, molecules, organisms, templates — as a grouped list. |
| Component | One component, all variants and sizes, with a props panel to toggle states. |
| Foundations | Palette, typography, spacing, radius, sizes and touch targets. |
| Behaviors | A screen per behavior, on real scrolling content. |
Built with
- Every atom, rendered from the same props in each styling variant.
- Scaffold, AppBar and BottomTabBar for the shell.
- Theme with a light / dark / system switch in the app bar.
- Tappable and Overlay on the component screens.
What it checks
- Props parity between variants: the same component, the same API, whatever the styling engine.
- Token coverage: no hard-coded color, spacing or radius anywhere in the demo’s own code.
- Touch targets: every interactive element stays at or above the minimum in metrics.