Index

Components

Every component in every state, in the colour direction selected above. Screens are built only from these.

Buttons

ui/button. Minimum 48px tall; the one primary action per screen is xl (56px), full width. No hover-only meaning.

default
secondary
outline
muted
ghost
destructive
link
xl
inverse
focus

Inputs

ui/input, ui/textarea, ui/checkbox. 48px tall, 17px text, labels always visible, errors in words under the field.

That number looks too short.

Six-digit code

48291

Selects

lf/Select. Native, so phones open their own picker.

Cards

lf/FirefighterCard and the surface styles. The firefighter is the brand: first name, station, photo.

Dave

Off-duty firefighter, Sheffield Central

DBS checked · Brigade approved

Dave

Off-duty firefighter, Sheffield Central

Dave

Off-duty firefighter, Sheffield Central

Raised card

shadow-card, on the page background

Muted panel

Supporting information

Inverse panel

Key box code, totals, the job offer

Countdown

lf/CountdownRing. Any window: 15, 30 or 60 seconds, or minutes for a broadcast. Turns the highlight colour in the last seconds.

15

seconds

15s, full

4

seconds

15s, urgent

19

seconds

30s group

6:52

left

Broadcast

0

seconds

Expired

Status pill

lf/StatusPill. Always a word, a colour and an icon. Brand red is never used for status.

VerifiedLast seen 4 min agoPayment failedWork in progressOn the wayCancelled

Step list

lf/StepTimeline: done, current, not yet, and stopped (cancelled).

Current: step 3

  1. Booked01:42

    £170 held, not charged

    Done

  2. Dave accepted01:43

    Collecting the van

    Done

  3. On the way01:51

    Happening now

  4. At your door

    Not yet

All done

  1. Booked01:42

    £170 held, not charged

    Done

  2. Dave accepted01:43

    Collecting the van

    Done

  3. On the way01:51

    Done

  4. At your door

    Done

Stopped

  1. Booked01:42

    £170 held, not charged

    Done

  2. Dave accepted01:43

    Collecting the van

    Stopped

  3. On the way01:51

    Not yet

  4. At your door

    Not yet

Map frame

lf/MapCanvas, standing in for the styled Google map. The moving pin is always labelled as the firefighter's phone.

Map: Your door.

searching

Map: 14 Kingfield Road, Drag the map to move the pin.

pin

Map: Dave is collecting the van, Pin shows the van base area.

route

Map: Dave's phone, Live.

live

Map: Dave's phone, Last seen 4 min ago.

stale

Map: Dave is at your door.

arrived

Price breakdown

lf/PriceBreakdown, calculated from data/pricing.ts so it always matches the invoice rules.

Minimum charge, no parts

Time1 hr 35 min on the clock, two-hour minimum applies
£170.00 at £85.00/hr
No parts fitted
£0.00
Total
£170.00

All prices include VAT.

Rounded up, with a part

Time2 hr 38 min on the clock, rounded up to 2 hr 45 min
£233.75 at £85.00/hr
Euro cylinder 35/40, anti-snapPart, at cost
£38.50
Total
£272.25

All prices include VAT.

Toasts

lf/Toast. Confirmations only. Anything that needs action is a banner.

New code sent to 07700 900123
Priya has accepted LF-4514

Banners

lf/Banner. Strong (bordered) for the one thing on a screen that must be seen.

ID checked at 02:08

Thank you. Dave can carry on.

Dave's phone last updated 4 minutes ago

He is still on his way. The map catches up when his signal does.

Get your ID ready

Something with your name and this address.

You are offline

Showing what we knew at 02:51.

Van left at a job

Van 1 is at 14 Kingfield Road after a dropped job.

Mark and logo

lf/LfMark, lf/LfLogo. Concept 1. On dark surfaces the mark switches to the inverse colour so the navy of direction B does not disappear.

Lockfighter
Lockfighter