TradeOS design system
The in-repo living design system. Every token + component, live β this is how we keep the system honest. Toggle light/dark and view-as role in the top bar.
Colour & semantic tokens
Inherited verbatim from the live Comfort Zone site so the app + website are one family. Red is rationed to one CTA + critical; gold is ratings/awards only; lilac is reserved for Kenny / proposed everywhere.
Brand Β· accent Β· gold
Semantic status (always colour + dot + word)
Role accents (wayfinding only β never the CTA)
Type scale
Montserrat for display/headings, Inter for body & UI β the site's exact pairing.
The warm surface ladder
RULE: one light source Β· cards lift off a deeper sand canvas. Four warm rungs, each ~+3 L*, same ~40Β° hue β so a card (off-white) sits ABOVE the canvas (deeper sand) instead of every panel painting flat onto one white. The contrast IS the depth.
This block sits on the raw canvas. Watch each rung step UP off it.
Elevation ramp β warm single-light vs the old grey
RULE: one light source, vertical offset 2Γ horizontal. Warm-tinted multi-layer shadows + a 1px white top-edge highlight = the 'new-car metallic paint'. Flip to the OLD flat 2-layer grey ramp so the difference is undeniable.
e1 hairline Β· e2 cards (the new floor) Β· e3 popovers/tiles Β· e5 modals. The warm ramp adds the top highlight + a coloured-by-light feel; the grey ramp is a flat drop-shadow smudge.
Depth helpers Β· concentric radii
RULE: rationed gloss. .tos-sheen (the ONE solid per view) Β· .tos-surface (cards) Β· .tos-lift (hover-lift tiles). Radii nest concentrically: a control (7px) inside a card (11px) inside a modal (16px).
Depth helpers (hover the lift)
Depth via gradient + warm shadow + coloured glow β brand hexes untouched.
Concentric radii
modal 16 β card 11 β control 7 β inner β outer β padding.
Buttons
One red CTA per view. Primary = brand blue; secondary/ghost/kenny carry the rest. The solid fills (CTA / primary) carry a faint convex sheen + gradient built from the SAME brand hex β depth, not a new hue (the 'poppy, like a beautiful car' finish).
State progress β lifecycle stepper
For ORDERED sequences (quote / job / payment), not alerts. The ramp walks the spectrum across the steps; the current step is high-contrast (filled solid + colour ring + larger), past steps filled-muted with a tick, future steps outlined-muted. The semantic StatusPill (critical/warning/success) stays for alerts; StateProgress is for 'where is it up to, what's next'.
Quote lifecycle (current: viewed)
- Draft
- Sent
- Viewed
- Accepted
Job lifecycle β step through it
- Lead
- Quoted
- Booked
- Done
- Paid
Full quote-to-aftercare lifecycle (9 steps, compact)
Draft β Sent β Viewed β Accepted β Booked β Invoiced β Guarantee sent β Review asked β 3-month follow-up. Used on the Quote Review surface; `size="sm"` keeps the 9-step rail legible.
- Draft
- Sent
- Viewed
- Accepted
- Booked
- Invoiced
- Guarantee sent
- Review asked
- 3-month follow-up
Follow-up / touchpoint timeline
What we've actually DONE with the customer after the quote went out β SMS / call / email / system events. Complements StateProgress (where it's up to) with what moved it. Each kind carries a glyph + tinted dot + word so meaning never relies on colour.
- SystemMon 23 Jun Β· 9:14amQuote sent to the customerβ Email + SMS link
- SMSMon 23 Jun Β· 9:15amSMS β βSent your ceiling quote, happy to talk it throughββ Delivered
- CallTue 24 Jun Β· 2:30pmCalled Kirsty to check she got itβ No answer β left voicemail
- EmailWed 25 Jun Β· 8:02amFollow-up email β answered the downlight questionβ Opened twice
Weather bar β 10-day forecast
A site-specific forecast strip labelled with the customer's suburb. Good ceiling-cavity days get a brand tint; the suggested day gets a ring. Mock data this slice β wires to a forecast API with no UI change.
- Mon21Β°13Β°π§80%
- Tue22Β°14Β°π§55%
- Wed23Β°14Β°π§30%good ceiling-cavity day
- Thu24Β°15Β°π§10%good ceiling-cavity day
- Fri25Β°15Β°π§5%good ceiling-cavity day
- Sat24Β°16Β°π§25%good ceiling-cavity day
- Sun22Β°15Β°π§50%
- Mon23Β°14Β°π§30%good ceiling-cavity day
- Tue25Β°15Β°π§10%good ceiling-cavity day
- Wed26Β°16Β°π§5%good ceiling-cavity day
Pricing-line row (the quote centrepiece)
One fully-controlled editable service line: tick to include, edit mΒ², pick an R-value (drives the multiplier), Recommended + Optional-for-customer toggles, an add-photo/video affordance, and the live ex/inc-GST. Toggle / edit it below β the inc-GST here is mock; on the real surface it's recomputed by the engine.
FAQ / content suggester
Kenny's 'links worth adding to the cover message' list β a FAQ page or a YouTube video, each with WHY it fits this customer and a tick (aria-pressed toggle, never a checkbox role) to add it to the cover note.
- Does blown cellulose cause mould?
Pre-empts the moisture worry for a hot, humid upstairs.
insulation.team/faq/cellulose-mould β - How we keep downlights safe under insulation (2 min)
Answers the downlight fire-risk question with real footage.
youtube.com/watch?v=czdownlights β
Toggle & tile pickers
Single toggle
aria-pressedEvery picker is aria-pressed toggle buttons in a role=group β never role=radio/checkbox.
Multi toggle
Picture-tile (warm quote-form variant)
Status pills & fields
Job / quote states
Sync (offline = amber, not red)
Fields
Eave-deducted measured area.
Enter a valid email so we can send the quote.
Voice-to-text fields & media upload
Every multi-line / longer text box gets a 'hold to talk' mic (Web Speech API, en-AU, push-to-talk, cancellable) β graceful fallback hides the mic where unsupported. Anywhere assets are captured carries an Attach: Photo / Video control (video sits alongside photo).
Mic field (hold the mic and talk)
Mirrors the website's MicInput. Hold the mic and talk instead of typing.
Attach photo / video
Front-end only this slice β chosen files list as removable chips; the video path sits next to the photo path.
Tabs & states
Tabs have an obvious hover state (tinted pill + underline hint) as well as the selected state β so it reads as selectable. Use β β / Home / End to move.
Loading
Empty
No sites yet.
Error
Couldnβt load.
Use β β / Home / End to move between tabs.
The Kenny action card
Every Kenny output is born proposed β lilac wash, lilac rail, 'awaiting your tap'. On mount it MATERIALISES (rise + 2pxβ0 blur) with a one-time lilac edge-glow that lands attention then releases. The human always presses the button; reasoning is shown, not hidden.
Why Kenny suggests this
Priced by the deterministic engine (not by Kenny) from the eave-deducted 168 mΒ² at R3.0 + in-ceiling walls, +$2/km round-trip from Tiaro, less the $150 price-shave; removal offered as an optional add-on. Narrative grounded in the verified FAQ + claims library. Nothing sent until you approve.
Money-hold confirm
Two-phase. Approve swaps to a confirm row: press-and-hold below $2,000; type the exact amount at/above $2,000.
Under $2,000 β press & hold
$2,000+ β typed amount
Modal β bottom sheet Β· offline banner
Offline / failed banners
Responsive dialog
Centered modal on desktop, bottom sheet on mobile (resize the window).
Motion lab
RULE: asymmetric timing β arrivals fast+snappy (~140ms ease-out), exits slow+relaxed (~280ms). The spring is reserved for the ~10% that earns it (approveβsent). Feel each one.
Skeleton shimmer (warm 100Β° sweep)
The success button is the ONE workhorse spring β the SVG check draws + the circle pops. Buttons lift on hover and depress on press (the convex surface visibly sinks). Tabs (above) SLIDE their indicator; they donβt fade.
Role dashboards
RULE: 60-30-10 + role containment. One token set, six accents read together β each tcard carries only a 3px role top-border + one role dot, staggered entrance, tabular-nums KPIs. No paint-chart.
CRM foundation (Slice 1)
The shared pieces the Contacts β Sites β Quotes spine is built on: the 3-tier breadcrumb, the privacy-band figure for the HQ deck, the per-device density toggle, and the sticky multi-select bar.