UI Library

The real production tokens and components ServiceLine's screens render with — every state below is live and interactive, not a documentation-only lookalike.

Brand

Three offset gradient bars — a coordinated order-flow / ticket-rail motif that also reads as an abstract "S." Pure SVG (react-native-svg), so it scales cleanly from a 20px nav glyph up to app-icon size with no image asset.

Color

Surfaces & elevation

Not every item sits in an identical white rounded card.

Typography

display — The quick brown fox jumps over the lazy dog

h1 — The quick brown fox jumps over the lazy dog

h2 — The quick brown fox jumps over the lazy dog

h3 — The quick brown fox jumps over the lazy dog

bodyLg — The quick brown fox jumps over the lazy dog

body — The quick brown fox jumps over the lazy dog

bodyMedium — The quick brown fox jumps over the lazy dog

caption — The quick brown fox jumps over the lazy dog

label — The quick brown fox jumps over the lazy dog

Icon containers

Compact tinted tiles for KPI cards and section headers.

Buttons

Status badges

Text plus a dot, so status is never color alone — real OrderStatus type.

Lists

The left/right row shape used for Orders, Menu items, and the CRM customer list. A row nested inside an existing Card (e.g. items under a category) uses surface=false.

Ranked bars

Real relative magnitude from actual data — never a decorative or fake metric.

Navigation

The actual bar rendered in the app shell (apps/dashboard/components/NavBar.tsx), which just wires these to expo-router's Link. Click a link to try the active/hover/focus states — tab to one to see the focus ring. Resize the window below the tablet breakpoint to see it collapse to the dark mobile menu.

Form controls

Modal

Toast

Loading, empty, and error states

Accessible contrast pairings

Measured with the WCAG relative-luminance formula against this file's exact tokens, not eyeballed.