Blush

Best for

• Makeup artists and bridal beauty: looks, prices with what's included, a wedding-morning run sheet, a date check, hygiene and patch tests in plain words
• Anyone who plans a big day to the minute, or sells by palette: wedding planners and stylists (Marlow, a set-up day run sheet), cooking schools (Copper Pot, a dinner countdown), event hair, photographers, celebrants, cake makers, florists
• Audiences: people with one important day, who want to see it planned and know what it costs

Less suited to: walk-in or high-volume services (Lustre's chair board suits those better); clinical services (Remedy, Candour, Cairn); bold, loud brands (Marquee, Riso).

Personality and voice

Elegant and exact, like a calm makeup artist at 6am: everything has a time, nothing is rushed, and you're told what's included.

• Headlines: "Makeup that lasts the day." · "Your morning, worked backwards." · "Plain prices, no surprises." · "Check your date, today."
• Buttons: "Check a date" · "Looks" · "Send enquiry" · "Book a class"
• Microcopy: "Tap a shade to see it." · "Your date is held when the deposit is paid." · "Single-use wands and sponges."

Colour

Measured contrast (WCAG): ink on paper 16.9:1 · muted on paper 5.8:1 (on well 5.3:1) · lipstick on paper 6.5:1 (on well 6.0:1, on its soft fill 5.5:1) · white on lipstick 7.0:1. Evening: ink 16.6:1 · muted 7.8:1 (on card 7.2:1) · lipstick 8.3:1 · text on lipstick 8.1:1. The top line is cream on the case colour in both modes.

Typography

• Display: Italiana 400: thin, tall, fashion-magazine. Use it large (headlines, prices, names), never for body text.
• Body and labels: Urbanist 400–600; labels and buttons in 600 caps with wide tracking.

The signature move: the lit phrase is lipstick pink with a soft swipe behind it, like a swatch on the back of a hand, that sweeps in on load.

Layout

• 1220px wrap, gutter max(20px, 4vw). A dark top line for what's booking now; a sticky header with caps links and a swipe underline.
• Hero: copy left, the compact right on a pink glow. Then looks, the run sheet, three price cards (the main one ringed), plain terms and a FAQ, and a dark closing card.

Shape

• Tailored: --r-s 4px, --r-m 12px, --r-l 30px, pill buttons.
• The compact is a rounded black case with a recessed pan well and a mirror lid; pans are round with a rim.
• The brand mark is a closed compact with a pink ring.

Motion language

• The compact: when it comes into view the lid swings up on its hinge (1.3s, a small overshoot) and turns into a mirror. Tapping a pan lifts it, rings it in pink and names it. Shimmer pans twinkle slowly.
• Looks: each colour swipe draws across, one after another.
• The run sheet recalculates as you type; new rows slide in.
• The lit phrase's swipe sweeps in under the headline.
• Reveals: 18px rise and fade, 700ms. 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 shows the compact open, the swipes drawn and no twinkle.
• Evening switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

The compact, swipes and run sheets do the work. Real photography of real clients (with their written permission), in daylight, unretouched. No stock models.

Signature components

• .compact[data-compact] › .compact-base › .pans > button.pan[data-name][data-note] (style="--c: …", .shimmer) + .lid > .lid-face > span + .lid-mirror; figcaption.compact-caption › [data-pan-name] + [data-pan-note].
• .looks › .look[data-enter] › .swipes > i[style="--c: …"], h3, p, .meta.
• .runsheet[data-runsheet][data-lead][data-steps][data-done-text][data-count-unit] › .rs-in (input[type=time][data-rs-at], input.range[data-rs-count] with output[data-rs-count-out], select[data-rs-each], [data-rs-done]) + .rs-out ([data-rs-start], ol[data-rs-list]). Steps: {"t": "Bride", "m": 75, "main": true}, {"t": "Bridal party {n}", "m": "each", "repeat": true}.
• .price-card (.feature), .card, .facts, .notice, .topline, .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 swipe 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]. A slider inside a field keeps its own shape.
• Tiles: .choices › label.choice > input + span > b + small. Segmented control: .seg.
• 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: pan (detail.name); Blush.refresh(root).

Makeup artists: what we build in

• Prices with what's included, GST stated, and travel by area.
• Hygiene in plain words: brushes cleaned between clients, single-use wands, sponges and lash applicators.
• Patch tests for lash glue and new products, offered at the trial.
• The deposit and date terms on the page and in the enquiry: the date is held when the deposit is paid.

These notes are design guidance, not legal advice.

Do and don't

• Do show the morning's timings before anyone asks.
• Do say what's included in every price.
• Do keep the compact to six to twelve pans with real names.
• Don't set body text in Italiana.
• Don't use before-and-after photos without written permission.
• Don't hide travel or early-start fees.

Accessibility

AA contrast throughout (measured above). Skip link and a 3px focus ring. Every pan is a labelled button with aria-pressed, and its name is announced politely; the lid is decoration. The run sheet's inputs are labelled and its list is announced politely. 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 Daylight and Evening.

How to make it yours