One token set.
Two platforms.
Kalibr8 is an offline-first tool for disaster-relief UAV survey pilots. This design system themes both the responsive web app and the Android app from the same variables, text styles and components, which live in the Kalibr8 Figma file. Only the platform mode changes, adjusting sizes for touch and reading distance.
Semantic, not literal
Screens reference roles like color/primary, never hex values. Roles alias primitives, so a re-theme is one change.
Built for no signal
Offline is a normal state, so it's shown calmly in warning orange, not error red. Nothing loads from the network.
Colour is never the only signal
FEMA damage categories always show their label next to the colour, and status pills always carry text.
The pilot stays in control
Hold and Return Home stay on screen during autonomous flight, and every AI damage call shows whether a pilot verified it.
Logo and app icon
The K8 monogram with the Kalibr8 wordmark. It sits on color/on-surface in the app and switches to color/document/text on light report paper. Narrow rails use the monogram alone.
On dark surfaces
Monogram + wordmark, white.
On report paper
Monogram + wordmark, document/text.
App icon
Black tile, white monogram. Used for the install icon and launcher.
Color
Three layers: primitives hold raw values, semantic roles (named after Material 3) alias them, and each role carries its code name for both platforms.
Primitives
Typography
Inter everywhere, bundled with the app so nothing loads offline. Style names follow Material 3 roles, and each style's size and line height come from the platform mode.
Platform modes
The same token names have two values. Web uses desktop density; Android follows Material 3 with 48dp touch targets and at least 14sp body text.
Spacing & radius
A 4-point spacing scale shared by both platforms. Buttons use radius/sm (4px) on Android too, a deliberate brand choice over Material's pill shape.
Corner radius
Elevation
Three shadow levels. Dark surfaces get their depth mostly from the surface-container scale, with shadows as support.
Icons
One icon set for both platforms on a 24×24 grid (Material Symbols geometry). Icons inherit colour from a color/* role. Size comes from size/icon.
Components
Every component below is drawn from the tokens above. The same component maps to a web class and an Android composable, usually a re-themed Material 3 component.
Web ↔ Android
The journey is the same on both platforms. The containers change to match each platform's conventions and the phone's orientation.
| Need | Web (responsive) | Android · portrait | Android · landscape |
|---|---|---|---|
| Primary navigation | 64px left rail | M3 Navigation bar | M3 Navigation rail |
| Task panel | Side drawer (up to 514px) | M3 Bottom sheet | M3 Standard side sheet |
| New flight wizard | Modal dialog | Full-screen dialog with top app bar | Two-column full-screen dialog |
| Confirmation messages | Toast | M3 Snackbar | M3 Snackbar |
| Main action | Footer button | Extended FAB | Rail FAB |
| Map controls | 32px zoom stack | 48dp small FABs | 48dp small FABs |