Breakdowns & repairs
ServiceCard. Lifts on hover, presses in on click, and morphs into the page header.
Breakdown repairsDesign system
v1.0 · proposedWorkshop
Sullco Air & Refrigeration, built like the ute: hi-vis yellow on ink, concrete ground, signwriting type and hard edges. Astro pages, shadcn/ui on Base UI for the bits you touch. The spec lives in design/DESIGN.md.
- 1
Built like the ute
Ink, concrete and hard edges. Things look made, not rendered: 2px borders, square corners, shadows that sit off the wall.
- 2
Hi-vis means act
One hi-vis button in view, usually the call. Yellow is for doing something, never for decoration.
- 3
Lettered like a sign
Barlow Condensed capitals for anything you'd paint on a van. Barlow for anything you read.
- 4
Proof beside every ask
The trust list or a job ticket near every call to action. Every fact is real or TBC.
- 5
Fun that helps
The fault finder and before/after slider explain the job while people play. Motion only shows a change.
Logo
SULLCO°, recoloured
The wordmark stays. Hi-vis ring on ink, a darker yellow on concrete, and the descriptor in Barlow Condensed. Built by design/logo/logo.py, never by hand.
Palette
Ink, hi-vis, concrete
Tokens are shadcn roles plus the brand names below. Add the dark class to any band to flip it to ink.
- Ink#16181A ·
inkText, ink bands, borders - Hi-vis#FFC72C ·
hivisThe action: call buttons, markers - Concrete#ECEAE5 ·
concretePage ground - White#FFFFFF ·
cardCards and fields - Steel#53595E ·
steelSecondary text (5.9:1), field borders - Muted#E0DDD6 ·
mutedLouvre bands - Signal#B42D1B ·
signalUrgent, warnings, before readings - OK#1E7B3C ·
okDone, after readings - Hi-vis strong#D9A300 ·
hivis-strongLogo ring on concrete only
Type
Lettered like a sign
Display · Barlow Condensed 600–800, caps
Adelaide heat, handled.
Buttons, labels, card titles
Body · Barlow 400–700
Breakdowns, servicing and installs for cool rooms, commercial kitchens, offices and homes.
Secondary text is steel on concrete (5.9:1). Numbers use tabular figures: 14°C → 3°C
Eyebrow label
Actions
Buttons and badges
Buttons press in when clicked. Links styled as buttons use buttonVariants().
Surfaces
Textures from the trade
Every band gets a texture via <Texture>. Hazard tape edges ink panels and bands, never sits behind text.
Grain
Concrete speckle on every fill
Louvre
A vent grille, on muted bands
Tread plate
Ink bands and panels
Hazard tape
Top of ink panels, band edges
Components
Cards, panels and proof
Astro components render to HTML with no JavaScript. Only the slider, fault finder and forms hydrate.
After3°CJob photo goes here
Before14°CJob photo goes here
Norwood · Restaurant · Cool room · Jan 2026
SampleCompressor replaced before Saturday service
- Before
- 14°C
- After
- 3°C
- On site
- 3h
- Licence & insuranceTBC
- ARC authorisationTBC
- Google reviewsTBC
Forms
Controls
shadcn/ui on Base UI, started from the Lyra style and restyled. Used by the quote form and fault finder.
Ink band
Numbered steps
A real sequence, so it's numbered. Never two ink bands in a row.
- 1
Call or send a photo
Tell us what you're seeing. A photo of the nameplate helps.
- 2
Triage on the phone
We work out what's likely wrong and what to bring.
- 3
On site with parts
Fault-finding and repair, on the first visit where we can.
- 4
Readings and a report
Before and after readings, photos and next steps.
Pages