Clipper

Best for

• Barbershops: walk-ins with a live wait, a barber picker where "any barber" is quicker than a named one, cuts and shaves with prices and times, booking
• Anyone whose customers ask "how long's the wait?" at a counter with a few people working: bike workshops (Freewheel, repair stands), tyre shops (Treadline, service bays), phone and shoe repair counters, key cutters, car washes, tailors doing alterations while you wait
• Audiences: people deciding whether to wait now or come back later, who want the price and the minutes straight

Less suited to: colour-led beauty (Lustre, Polish); quiet clinical services (Lucent, Cairn); anything luxurious (Blush).

Personality and voice

Straight-talking and friendly, like a good barber: here's who's free, here's the wait, here's the price. No fuss, no upsell.

• Headlines: "A good cut, no fuss." · "Every cut, on the board." · "Take a number, grab a coffee." · "Your chair, today."
• Buttons: "Take a number" · "Print my ticket" · "Book a time" · "Book with Mick"
• Microcopy: "Any barber is usually quicker." · "We'll text you ten minutes before." · "A fresh blade every shave."

Colour

Measured contrast (WCAG): ink on paper 15.3:1 · muted on paper 5.3:1 (on well 4.8:1) · red on paper 5.8:1 (on well 5.3:1, on its soft fill 5.1:1) · white on red 6.6:1 · blue 7.5:1 · free on enamel 5.0:1 · ink on the ticket 17.2:1. Late shift: ink 15.9:1 · muted 7.6:1 (on card 6.9:1) · red 6.6:1 · text on red 6.5:1 · red on its soft fill 5.5:1 · free 8.3:1 · blue 5.6:1. Example accents on paper: cobalt (Freewheel) 7.3:1, hazard amber (Treadline) 5.6:1, harbour navy (Corner Chair) 7.5:1.

Typography

• Display: Alfa Slab One 400: a fat slab, like sign-writing on a shop window.
• Body: Work Sans 400–700: plain and sturdy.
• Tickets, times and labels: Space Mono 400–700: the thermal printer, the price column, the minutes left.

The signature move: the plain promise at the end of every headline is in pole red with a blue painted drop shadow, like gold-leaf sign-writing done cheaply and well.

Layout

• 1200px wrap, gutter max(20px, 4vw). A striped awning and a navy note line on top; a sticky header ruled off in ink, the current page underlined in red.
• Hero: copy left; the pole and the chair board right. Then the price board, the ticket printer beside its pitch, the barbers, visit facts and FAQ, and a navy closing card under its own awning.

Shape

• Square-shouldered: --r-s 6px, --r-m 12px, --r-l 20px. Buttons, cards, tiles and fields carry a 2px ink outline; buttons sit on a 4px shadow and press down.
• Chair signs and the price board are enamel plates: an ink edge, a cream gap and a brass inner line.
• Tickets have a torn zigzag foot. The brand mark is a little pole.

Motion language

• The pole turns: its stripes climb forever (2.4s a turn).
• The chair board: while motion is on and it's on screen, a minute passes every three seconds. Rings fill as a cut goes on; when one finishes, the next person sits down or the chair comes free, and the sign flips. The free light breathes.
• The ticket printer: "Print my ticket" feeds the ticket out of the slot line by line (1.4s, stepped), and the board adds you to that barber's queue.
• Buttons press down 2px. Reveals: 16px rise and fade, 600ms. The phone menu drops in.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, default from prefers-reduced-motion). Calm holds the pole and the board still and prints the ticket at once.
• Late shift switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

The pole, the signs and the tickets carry the page. Photos work if they're real and in the shop: the chairs, the window, hands at work. No stock models with perfect fades.

Signature components

• .pole › .cap + .glass + .cap.bottom (decoration; --pole-a, --pole-b recolour the stripes).
• .seats[data-seats][data-tick][data-noun]#id › .seats-head ([data-seats-free], [data-seats-wait]) + ul > li.seat[data-barber][data-state="free|busy|break"][data-left][data-cut][data-waiting][data-back] › .ring + span > b + small + .status.
• .printer[data-printer][data-next][data-seats="#id"] › .printer-body (select[data-printer-barber] with an option[value=any] and one per barber, select[data-printer-svc] > option[data-min], [data-printer-wait], button[data-printer-go], [data-printer-live]) + .printer-slot + .receipt ([data-rc-no], [data-rc-barber], [data-rc-svc], [data-rc-wait], [data-rc-time]).
• .price-board › .pb-cols (.one for a single column) › div > h3 + .pb-row (span > small, i leader, b > small time) + .pb-foot.
• .barber (.face, .role), .card, .facts (--n), .notice, .awning, .noteline, .faq, .licence, .close-card (--close-em), .grid-4.

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu (links with data-no); Escape, outside click and links close it; Tab stays inside while open.
• Current page: aria-current="page" (a red underline).
• Inner pages: .page-head, .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"]; form[data-template].
• Tiles: .choices › label.choice > input + span > b + small. Segmented control: .seg (filters work on [data-tags]).
• Gate: [data-gate] with button[data-show="panel-id"].
• Slider, switch, tables, layout: input.range, .switch[role=switch], .table / .table.stack, .r, .grid-2.lean.
• Events and helpers: seat (detail.barber, state), ticket (detail.number, barber, minutes); Clipper.wait(board, "any" | name) returns the wait in minutes and who; Clipper.refresh(root).

Barbershops: what we build in

• The real wait, both ways: "any barber" shows the shortest wait and who it'll likely be; a named barber shows theirs. Booking does the same with times.
• Prices and minutes on everything, GST included, card or cash, no booking fees.
• Hygiene in plain words: a new single-use blade for every razor shave; combs, clippers and capes cleaned between clients.
• A fair queue: a text ten minutes before; miss it and you go next after the person in the chair, not to the back.

These notes are design guidance, not legal advice.

Do and don't

• Do show who's free and how long the others will be.
• Do put the minutes next to every price.
• Do say "any barber is usually quicker", and mean it.
• Don't use blue or brass for text: they're the pole and the trim.
• Don't put more than six chairs on one board; split by room.
• Don't show a wait you can't keep: connect the board to the real queue.

Accessibility

AA contrast throughout (measured above). Skip link and a 3px focus ring. The pole is decoration, hidden from assistive tech. The chair board is a plain list, deliberately not a live region so its ticking doesn't chatter, with each state in words ("Free now", "12 min left", "On break") beside the coloured light, so colour never carries it alone. The printer uses real selects; the wait line is announced politely and a printed ticket is announced as a status. Forms label every field, mark errors with aria-invalid and say what's missing in an alert. Tables stack on phones. Responsive to 360px; tested with motion on and off, in Shopfront and Late shift.

How to make it yours