Gloves-and-sunlight interface

The crew screen deliberately abandons the app's own components for 64px minimum targets, near-black on white, chips instead of dropdowns and a sticky escape button.

What it is

The portal page uses its own visual vocabulary rather than the house Select, DatePicker and buttons. Minimum tap targets are 64px, the primary action is 76px, choices are cards or chips rather than dropdowns, and the cancel route is pinned to the bottom of the screen so it cannot scroll away.

Also called: big button UI · field UI · outdoor readable screen · no dropdowns

See it
Gloves-and-sunlight interface
🔒ridgelinepostframe.com/project/field-277
40×64 Shop
Framing · on schedule
Side-by-side of a desk-sized control versus the field control at the same physical scale, both shot in bright sun; renderer is the inline styles in src/app/crew/[token]/page.tsx. Sample data — no customer information appears here.
How it works
  1. 1A local colour constant defines ink, paper, go, stop and a separate filled-stone tone reserved for the escape route.
  2. 2Every choice screen renders full-width cards or chips; no dropdown appears anywhere in the flow.
  3. 3EscapeButton is position:sticky at the bottom with a rule above it, so on an eight-chip list the way out stays reachable.
  4. 4Checkpoints render as a real 30px empty square rather than a tick glyph, because an empty box reads as not-done across a yard.
  5. 5Confirmations clear themselves after four seconds so nothing has to be dismissed with a glove on.
Why we built it

The controls that work at a desk fail on a jobsite: a phone in direct sun loses most of its dynamic range so mid-grey secondary text disappears, and a 32px tap target is a coin toss in work gloves. The field screen uses its own oversized controls, high-contrast text and no dropdowns. The button that leaves a job is filled rather than outlined so it reads as not one of these before you have read anything, and it stays fixed to the screen — an escape that scrolls away is an escape you have to hunt for.

The problem
  • Mid-grey secondary text is invisible on a jobsite in direct sun.
  • Desk-sized tap targets miss when the user is wearing gloves.
  • Dropdowns and OS sheets add taps and hide state.
Sound familiar?
What you get
Actions land first time in gloves and glare.
No state to misread: two labelled buttons instead of one toggle.
The way out of any screen is always in the same place.

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →