Room 05 · Private multi-specialty clinic · Concept
Salvora
Care, explained.
Salvora, a fictional private clinic. A coral route line leads from finding a doctor to a four-step appointment request that explains each step.
Concept project — fictional brand. This project was created by ARTLOGIC to demonstrate a possible brand and digital experience. The organization, name, people, prices, and data shown are fictional. This is not client work and does not represent measured business results.
01 The brief
- The brand
- Salvora is a fictional private multi-specialty clinic. Its tagline is "Care, explained."
- The problem
- Adults and their parents want to find a specialist and book without phoning. The site filters doctors by specialty, language and weekday, then walks through a request that states what comes next and what to bring.
02 The idea
One route line from need to confirmed
- What you see
- Like a hospital floor guide, a coral route line links numbered stops on the home page and through the booking. Each step says what happens next and what to bring, and the directory filters narrow ten fictional doctors. Doctors appear as initials on plates, not faces.
- How it works
- The route is drawn in CSS and SVG, and its stop states (current, done, upcoming) follow the form step. The booking is a client-side flow with validation and an error summary that links to the fields.
03 Design system
- Ground Sage#DCE7DF groundPage body and sticky header.
- Ink Teal#173C39 inkText, links, focus rings and completed stops.
- Route Coral#C8553A accentThe route line and logo leaf. A darker Deep Coral carries text, buttons and errors.
- Muted Teal#3F5F5B mutedSecondary text, hints and resting borders.
- Paper Sage #F4F8F5. Working fields, form surfaces and text on ink.
- Type
- Source Serif 4
Headings and names, semibold. - Atkinson Hyperlegible
All running text, labels, buttons and form input, at a 19px base size.
- Source Serif 4
- Edges
- Flat fields with no cards, shadows or gradients. Signage-plate buttons have a small 0.375rem radius, inputs 0.5rem, and every target is at least 48px.
- Motion
- Route drawing and rise-in animations switch off entirely under reduced motion.
04 Process
Pre-production
The product and design documents set the audience, the calm voice and the floor-guide idea before building.
Build
The site was built page by page against that direction: directory, booking flow and shared layout.
Finish review
Impeccable finish-review rounds compared the finished build with the direction and design system.
Fixes
Material findings were fixed and the pages checked again.
05 Technology and accessibility
- Stack
- Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
- Particular to this site
- Doctor directory with specialty, language and weekday filters
- Four-step booking flow with validation
- CSS and SVG route line
- Access
- Skip link and labelled regions
- Error summary that links to each invalid field, with aria-invalid and aria-describedby
- Mobile menu closes on Escape
- Visible focus rings and targets of at least 48px
- Status and live regions announce results and step changes; animations off under reduced motion
- Tests
- Covered by its own Playwright end-to-end spec.
06 Honest notes
Salvora is a fictional clinic and a concept project by Artlogic. The doctors and details are invented.
The appointment request is a demo and the page says nothing is stored.
The doctors are initials on plates, with no photographs of people. The one photograph, an empty corridor with a red line along the wall, is a CC0 image from Wikimedia Commons used as the clinic's guiding metaphor. All other graphics are drawn for this concept.
07 See it
Fictional prototype. A concept by ARTLOGIC for a fictional brand. English only.