# 53 Appointment Studio

**Philosophy and fit.** Choose the person first; find the time that fits. Built for barber, hair salon, beauty, tattoo studio. The visitor’s next step is to book an appointment.

**Visual grammar.** Use a black and peach editorial staff roster with a time-slot ledger. Preserve the hierarchy of staff profiles, service menu, staff-first calendar; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.

**Sample and interaction.** COMMON / Barber studio is a fictional demonstration. The entry page establishes a complete visual direction, with choose an appointment and booking summary as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.

**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.

**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve staff profiles, service menu, staff-first calendar. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.

## Commercial and content patterns

- Staff profiles
- Service menu
- Staff-first calendar

## Routes

- Entry: /preview/53-appointment-studio/start
- Choose an appointment: /preview/53-appointment-studio/book
- Booking summary: /preview/53-appointment-studio/confirmation

## Reference and adaptation

- Page scope: Service site.
- Distinct composition: black and peach editorial staff roster with a time-slot ledger.
- Typography: Space Grotesk / DM Sans.
- Tokens: page #f5e9df, ink #262221, accent #713b31.
- The staff roster is the central decision. Portraits lead to each professional’s availability, while a priced service menu sets expectations before booking.
- Use the native inputs and labelled states in Demo.vue as interaction references. Replace local fixtures with real validation, availability and backend behaviour in the destination application.

## Assets

All brands and fixture data are fictional. Original SVG diagrams are source-native. Commercial photos are illustrative and are documented in [asset provenance](../../../docs/COMMERCIAL_ASSETS.md); do not present them as evidence of a real business or rename a stock subject as actual staff. See the public commercial asset manifest for URLs, checksums and cropping guidance.