Design system — Sand Glass
Everything the prototype is built from. Tokens live at the top of css/app.css; components are the UI.* helpers in js/core.js. Every sample below is rendered by the same code as the prototype, in light and dark, and once more in Arabic (RTL).
Colour
Deep navy is the primary, crimson a sparing accent (links, the unread dot, the assistant orb), warm sand the ground. Status colours are deliberately muted. Text on every surface meets WCAG AA (4.5:1 body, 3:1 large text and icons).
Brand
Semantic — light
Semantic — dark
Type
SF Pro on iOS, Roboto Flex on Android, IBM Plex Sans Arabic for Arabic (same as the web). All sizes follow Dynamic Type / font scale; nothing is fixed-height that contains text. Arabic sets letter-spacing to 0 and uses a taller line height.
Spacing, radius, elevation
A 4-point grid. Screen margin 16, card padding 14–16, section gap 22. Touch targets are at least 44 × 44 pt.
Spacing
Radius
Elevation
| Token | Use | Light | Dark |
|---|---|---|---|
--e1 | Cards, tiles | Soft 24px shadow at 25% navy + glass blur 22px | No shadow; 1px light hairline + blur |
--e2 | Tab bar, floating button, toasts | 34px shadow at 40% | 34px shadow at 60% black |
--e3 | Sheets | Upward 50px shadow + scrim 38% | Upward shadow + scrim 55% |
| Glass fallback | “Reduce transparency”, low-end Android | Blur removed, surfaces become solid --solid (toggle “Reduce transparency” in the prototype) | |
Motion
Restrained and purposeful. Springs for things that move under the finger, eases for things that fade. “Reduce motion” replaces movement with a 160 ms cross-fade. Tap a sample.
| Moment | Motion | Haptic |
|---|---|---|
| Push to detail | Shared-element move of title + status pill, 320 ms spring | — |
| Sheet open | 480 ms spring from the bottom; detents medium → large | — |
| Assistant orb | Breathes on a 4.5 s loop; faster while the AI is thinking; expands into the chat sheet | Soft impact on open |
| Status change (start, approve, convert) | Pill cross-fades colour; row settles | Success notification |
| Progress drag | Thumb follows the finger, snaps every 5% | Selection tick per step |
| Validation error | Field label turns soft red; no shake | Error notification |
Components
Light and dark side by side. The third and fourth panels repeat the key components in Arabic.
Arabic · RTL
States
Every list and card has four states beyond “loaded”.
iOS → Android
iOS is designed fully; Android uses the Material 3 Expressive equivalent of each pattern with the same tokens.
| Pattern | iOS | Android (Material 3 Expressive) |
|---|---|---|
| Navigation | Floating glass tab bar with centre orb; large titles that collapse | Floating toolbar / navigation bar with the orb as the centre FAB; large top app bar that collapses |
| Glass | Material blur (ultra-thin / regular) | Tonal surface containers; real blur only on Android 12+ with capable GPU |
| Sheets | Sheet with medium and large detents, grabber | Modal bottom sheet, partially / fully expanded, drag handle |
| Row actions | Swipe actions, context menu on long-press | Swipe-to-reveal, long-press menu |
| Pickers | Sheet with search field | Bottom sheet with search bar; Material date picker for dates |
| Icons | SF Symbols (line set here is a stand-in) | Material Symbols Rounded, weight 400 |
| Back | Edge swipe + back label | Predictive back gesture; up arrow without label |
| Glanceable | Home-screen widget “Today at a glance”; Live Activity for a meeting in progress | Glance widget; ongoing notification with live update |
| Biometrics | Face ID / Touch ID | BiometricPrompt |
Accessibility
| Area | Rule |
|---|---|
| Contrast | Body text ≥ 4.5:1, large text and icons ≥ 3:1, in both themes and on glass (measured against the lightest and darkest point of the background light field). |
| Text size | Dynamic Type up to AX3: rows grow, two-column grids fall back to one column, the tab bar keeps icons and drops labels above AX1. |
| Touch | 44 × 44 pt minimum; destructive actions are never the default button. |
| Screen readers | Every icon-only button has a label; status pills read “Status: In progress”; the progress bar is an adjustable slider; banners are announced. |
| Colour independence | Status is never colour-only: every pill has a label and, where space allows, an icon. |
| Motion / transparency | Honours Reduce Motion and Reduce Transparency (both toggles are in the prototype’s left panel). |
| RTL | Layout uses leading/trailing only; directional icons mirror; numbers, times and Latin names stay left-to-right inside Arabic text. |