Core components
ServiceM8 model: fixed colour + label per status, advanced by events (quote saved, delivery requested), never manual fiddling. Aging dot on Quoted: amber at 7 idle days, red at 14 — a distinct signal from the status colour itself, meant to vary independently of it. Delivered is green and is the terminal state — there's no separate "Complete" status; the job-detail timeline already treats "Delivered" as the true end of the job, so a second terminal status was redundant and has been removed.
Active chip inverts to ink. Pill-shaped, hairline-bordered, 44px min-height (touch floor, not just the 12.5px sans 600 label) — chips, status pills and buttons are all pills; every touch control is rounded.
Roof thumbnail from the measurement image; address leads; value right-aligned, tabular. Whole card is one tap target.
Powder panel, oversized tabular numerals, caps label. Exact values with stated tolerance — never round away precision.
Steppers, never free-text numerics. Edited lines get an "adjusted" marker with one-tap revert to the calculator value. Quantities are transactionally safe.
Real tile photos in production. Tap = apply instantly; long-press = favourite; shortlist capped at 8. Names follow AU convention: "Marseille Titan Gloss", "Elabana Barramundi".
52px min height, square flat field on the brand grey (#ECECEC, --field). On focus the field lifts to pure white with a thin, low-opacity ink border — soft enough to stay quiet, but a real edge (not just a fill shift) so it still reads in direct sunlight.
Autocomplete over typing wherever possible.
Related fields bound into one grey unit with hairline dividers (Gestalt common region) — the active row lifts to white with the same thin, low-opacity border used by every field. Use for any multi-field form; single fields stay flat.
Binary choices as full-width segments — used for delivery method, job type, ground drop vs rooftop load.
Flat and uniform — no raised FAB, no square-tile exception for "New." Inactive tabs are ink (never a lighter grey), both icon and label. The active tab turns only its icon maroon; the label stays ink, keeping the one accent as small as possible even in navigation.
That code’s incorrect. Check it or resend below.
Same field system as everything else: grey at rest, white + soft hairline when active. Error state lifts to white too, but outlines in status-red with an inline message — never just a colour change with no explanation.
The one deliberate exception to our own icon system: both marks stay at their real trademarked shape/colour rather than being reskinned into the one-outline-family rule. Grouped with the primary button below the form, not competing with it above — two columns to keep the row compact. Placeholder logos only; swap for each platform's official button component before shipping (Apple's Human Interface Guidelines and Google's Sign-In branding are both enforced, not optional).
Tapping the search icon swaps it for a full-width field at the same 52px height as every other input, plus the same × used to dismiss every other screen — not a text “Cancel” link, and not the OS-native rounded search bar.
For a job-type-style fork, not a text field: selected state borrows the same maroon-outline-plus-tint language as chips and swatches, and only the leading icon recolours — the label stays ink, the same rule the tab bar already uses (icon turns maroon, text doesn't). Tapping a card selects and advances immediately when it's the only choice on screen; no separate Continue tap.