Polish

Best for

• Nail, lash and brow bars and day spas: a menu with add-ons, walk-ins and a queue, packages, vouchers, patch tests for tints
• Anyone with a choice of colours, a build-your-own menu and a queue: craft beer bars (Hop & Barrel, a tap rack and a table waitlist), paint-your-own pottery (Glaze, glazes and walk-in tables), ice-cream and bubble-tea shops, barbers with walk-ins, car washes, phone repair counters
• Audiences: people deciding on the spot, who want to see the price and the wait

Less suited to: quiet, considered services (Lucent, Cairn); luxury and editorial (Blush, Lustre); information-first (Catalogue).

Personality and voice

Bright and straightforward, like a good front desk: here's what it costs, here's how long, here's the wait. Friendly, never fussy.

• Headlines: "Nails, done properly." · "One service, any add-ons." · "Walk in, skip the wait." · "Regulars, sorted."
• Buttons: "Build your visit" · "Join the queue" · "Book this visit" · "Continue to payment"
• Microcopy: "We'll text you ten minutes before." · "Prices include GST." · "Files and buffers new for you."

Colour

Measured contrast (WCAG): ink on paper 15.8:1 · muted on paper 5.6:1 (on well 5.2:1) · cherry on paper 5.4:1 (on well 5.0:1, on its soft fill 4.6:1) · white on cherry 5.9:1. Night shift: ink 16.5:1 · muted 7.5:1 (on card 6.8:1) · cherry 7.5:1 · text on cherry 7.2:1 · cherry on its soft fill 6.2:1.

Typography

• Display: Syne 700–800: wide, quirky, confident.
• Body: DM Sans 400–700: friendly and clear; labels in 700 caps.

The signature move: every headline ends on its plain promise in cherry.

Layout

• 1220px wrap, gutter max(20px, 4vw). A cherry top strip for walk-in news; a sticky header with pill links (the current page filled in cherry).
• Hero: copy left, the rack right. Then the builder (choices and add-ons beside a dark summary), the queue beside its pitch, packages and a voucher, visit facts and FAQ, and a dark closing card with a big bottle.

Shape

• Rounded and friendly: --r-s 10px, --r-m 20px, --r-l 32px, pill buttons with a 2px outline variant.
• Bottles have a black cap and a glossy glass body; nails are rounded beds with a lacquer layer; vouchers have a perforated stub and notches.
• The brand mark is a polish bottle.

Motion language

• The rack: tapping a bottle lifts it, rings it and paints the five nails from the cuticle up, one after another (520ms each, 90ms apart). Shimmer and matte finishes change the lacquer.
• The builder: new segments pop into the time bar; totals update as you tick.
• The queue: a live dot pulses; while motion is on and the queue is on screen, the first ticket is served every seven seconds and your ticket moves up.
• Vouchers bump when you change the amount. Buttons lift on hover. Reveals pop up 18px, 600ms. The phone menu springs open.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, default from prefers-reduced-motion). Calm paints without the sweep and holds the queue still.
• Night shift switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

The rack, nails, tickets and vouchers carry the page. Real photos work when they're bright and close (hands, colours, the bar itself); no stock models.

Signature components

• .rack[data-rack] › .nails > i×5 + figcaption.rack-caption ([data-rack-name], [data-rack-note]) + .bottles > button.bottle[data-name][data-note][data-finish] (style="--c: …").
• .builder[data-builder] › .build-in (.choices radios and .addons > label.addon > input[type=checkbox] + span, each input[data-min][data-price][data-label][data-c]) + .build-out ([data-build-min], [data-build-price], [data-build-bar], ul[data-build-list]).
• .queue[data-queue][data-next][data-tick] › .queue-head ([data-queue-wait], [data-queue-count], .live) + ol.tickets > li.ticket[data-min] (.no, .what, .eta) + .queue-join (select[data-queue-svc] > option[data-min], button[data-queue-join]).
• [data-gift] › .voucher (.voucher-main with [data-gift-amt], .voucher-stub) + button[data-amount]; .pack, .card, .facts, .notice, .strip, .faq, .licence, .close-card (--close-em).

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 cherry pill).
• 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: polish (detail.name), build (detail.minutes, price, items), queue (detail.number); Polish.refresh(root).

Beauty bars: what we build in

• Prices and times on everything, GST included.
• Patch tests for lash and brow tints, lifts and lamination, at least 48 hours before (booking moves the first day out to match).
• Hygiene in plain words: metal tools sterilised; files and buffers new for each client.
• Vouchers follow Australia's rules for gift cards bought since 1 November 2019: at least three years, the expiry date shown, no fees after purchase (ACCC).

These notes are design guidance, not legal advice.

Do and don't

• Do show the time and price before anyone books.
• Do keep the queue honest: real waits, real numbers.
• Do name each colour.
• Don't add more than eight bottles to a rack.
• Don't use the bottle colours for text.
• Don't hide voucher terms.

Accessibility

AA contrast throughout (measured above). Skip link and a 3px focus ring. Bottles are labelled buttons with aria-pressed, and the chosen colour is announced politely; the nails are decoration. The builder uses real radios and checkboxes, and its totals are announced politely. Queue tickets are a list announced politely, with the wait in words. 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 Daytime and Night shift.

How to make it yours