Design reference 53 · Small business

Appointment Studio

Choose the person first; find the time that fits.

Download design ZIP · Open interactive specimen

Design specification

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.

Identity and adaptation. The staff roster is the central decision. Portraits lead to each professional’s availability, while a priced service menu sets expectations before booking.

Files for a coding model

Reference images

Supporting routes

Reuse

Use and adapt the original code and specifications for personal or commercial work under MIT. Keep applicable font and photo notices. The ZIP includes the complete runnable reference and its local assets.

Asset notices · Agent instructions