Lustre

Best for

• Hair salons and colourists: services with lengths and from-prices, stylists by level, free chairs, gift cards, patch tests and a plain-words policy
• Anyone who sells by swatch and by appointment: bespoke tailors (Ashby & Cole, a cloth fan), paint and colour studios (Kiln & Co., a paint chip fan), interior designers, florists with seasonal palettes, nail and beauty bars (see Lustre's siblings as they arrive)
• Audiences: people choosing a look, who want to know how long it takes, what it costs and who'll do it

Less suited to: clinical or regulated services (Remedy, Candour, Cairn); information-first catalogues (Catalogue, Signal); anything loud (Marquee).

Personality and voice

Polished and warm, like a good stylist at the consultation: honest about what's possible, clear about time and price, never pushy.

• Headlines: "Colour that catches the light." · "Every service, timed." · "Pick a chair, pick a time." · "Give a good hair day."
• Buttons: "Book a chair" · "Services and prices" · "Continue to booking" · "Send a gift card"
• Microcopy: "Prices are from: your stylist confirms after a quick consultation." · "Tap a swatch to see it." · "Move or cancel free with a day's notice."

Colour

Measured contrast (WCAG): ink on paper 14.6:1 · muted on paper 5.6:1 (on well 5.1:1) · rose on paper 6.1:1 (on well 5.6:1, on its soft fill 5.4:1) · white on rose 6.9:1. After hours: ink 16.0:1 · muted 7.2:1 (on card 6.6:1) · rose 9.0:1 · text on rose 8.7:1 · champagne on card 10.8:1. The top line is cream on espresso in both modes (14:1).

Typography

• Display: Gloock 400: high-contrast, glossy, editorial.
• Body and labels: Plus Jakarta Sans 400–600; labels in 600 caps with wide tracking.

The signature move: the lit phrase is copper rose, and a gloss runs across it every few seconds, like light on a fresh blow-dry.

Layout

• 1220px wrap, gutter max(20px, 4vw). An espresso top line for this week's note; a sticky header with an underline that sweeps in.
• Hero: copy left, the swatch fan right on a champagne glow. Then the service menu, the chair board, the gift card, visit facts with the policy, and an espresso closing card.

Shape

• Soft and polished: --r-s 6px, --r-m 14px, --r-l 26px, pill buttons and time chips.
• Hair swatches are tall, rounded at the tip, with a tag at the root and fine strands; cloth swatches are squared with a twill; paint chips are flat with a fold.
• The brand mark is a fan of three swatches.

Motion language

• The swatch fan opens on its rivet when it comes into view (900ms, a little overshoot, 60ms apart). Hover or focus lifts a swatch; tapping one raises it, rings it in rose and names it in the caption.
• The gloss runs across the lit phrase every six seconds, and across the gift card.
• Time bars grow to length (1.1s) when the menu comes into view.
• The gift card's amount bumps when you change it. Reveals: 18px rise and fade, 700ms. The phone menu unrolls.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, default from prefers-reduced-motion). Calm shows the fan open, the bars full and no gloss.
• After hours switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

The swatches are the picture. Real salon photography works when it's warm, close and natural (hands, hair, light), never stock smiles. Before-and-after photos only with the client's written permission and no editing.

Signature components

• .fan[data-fan][data-spread] (.cloth, .chips) › .fan-deck › button.swatch[data-name][data-note] (style="--c: …", .light) › span; .fan-rivet; figcaption.fan-caption › [data-fan-name] + [data-fan-note].
• .svc-list[data-svc][data-max] › .svc › div > h3 + p, .dur[style="--m:45"] (text + i), .price > small + amount.
• .chairs[data-chairs][data-out] › .chair[data-stylist][data-level] › .chair-head (.face, b, small) + .times > button[data-time][data-day] (disabled = taken); .chair-out.
• [data-gift] › .giftcard (.gc-brand, .gc-amt[data-gift-amt], .gc-foot) + button[data-amount].
• .topline, .card, .facts, .notice, .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" (the rose underline stays).
• 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 (button[aria-pressed] with data-filter/data-value, or label > input + text); filters work on [data-tags], including .svc.
• Gate: [data-gate] with button[data-show="panel-id"].
• Slider, switch, tables, layout: input.range, .switch[role=switch] (fires switch with detail.on), .table / .table.stack, .r, .grid-2.lean.
• Events and helpers: swatch (detail.name), chair (detail.stylist, level, day, time); Lustre.refresh(root) wires a chair board you've drawn yourself.

Salons: what we build in

• Times and prices on every service, with "from" prices and a line saying the stylist confirms after a consultation.
• Patch tests for colour: hair dyes can cause allergic reactions, so colour bookings offer a free skin test at least 48 hours before (and booking moves the first day out to match).
• A plain policy: notice to move or cancel, deposits for long appointments, how they're refunded.
• Gift cards with their terms on the card (when they expire, what for). In Australia, gift cards bought since 1 November 2019 must be redeemable for at least three years, show the expiry date prominently (or say there isn't one), and carry no fees after purchase; Juniper Row prints the real expiry date on the card.

These notes are design guidance, not legal advice.

• Gift cards and discount vouchers (ACCC)

Do and don't

• Do show how long a service takes, not just its price.
• Do show taken times as taken, not hidden.
• Do keep the fan to five to eight swatches, each with a real name.
• Don't use champagne for text in Salon mode.
• Don't promise a result from a photo.
• Don't hide deposits or fees until checkout.

Accessibility

AA contrast throughout (measured above). Skip link and a 3px focus ring. Each swatch is a real button with aria-pressed and a caption that's announced politely; the fan is a labelled group. Time bars carry their length as text. Chair times are buttons, taken ones disabled and struck through. 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 Salon and After hours.

How to make it yours