{ "schemaVersion": 2, "id": "58", "slug": "service-bay", "name": "Service Bay", "brand": "BAY 04 / Auto workshop", "family": "Small business", "status": "ready", "thesis": "Turn an unfamiliar repair into an understandable job ticket.", "suitableFor": [ "Mechanic", "Tyre shop", "Auto detailing", "Equipment repair" ], "character": "Expressive", "traits": { "composition": "industrial orange job tickets, monospaced figures, and a workshop photograph", "navigation": "Vehicle selection, cost estimate and appointment job ticket", "typography": "Space Grotesk", "density": "Medium", "imagery": "A working mechanic beneath a raised vehicle", "surface": "Charcoal workshop header, orange ticket panel and ruled service rows", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Vehicle details", "Service prices", "Work authorisation" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Mechanic", "Tyre shop", "Auto detailing", "Equipment repair" ], "visitorGoals": [ "Understand a repair" ], "conversionActions": [ "Book a service" ], "siteSize": "Service site", "interactionTypes": [ "Vehicle selection", "Cost estimate", "Appointment intake" ], "keywords": [ "Mechanic", "Tyre shop", "Auto detailing", "Equipment repair", "Book a service", "Service site", "Vehicle details", "Service prices", "Work authorisation", "small business", "local business", "appointment based", "booking", "calendar" ] }, "patterns": [ "Vehicle details", "Service prices", "Work authorisation" ], "entryRoute": "/preview/58-service-bay/start", "states": [ { "key": "booking", "label": "Vehicle intake", "route": "/preview/58-service-bay/booking" }, { "key": "estimate", "label": "Service estimate", "route": "/preview/58-service-bay/estimate" } ], "referenceImages": [ { "file": "/previews/58/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/58/4ec67c9a594f563a-desktop.jpg", "route": "/preview/58-service-bay/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:b5cc04f84f0f21661b144ba009730227f12fed8331143315f5f5fc35b2f6e82a", "sha256": "4ec67c9a594f563a4b99ed289712165f3c36289a2b6a9818b4a96605a5690490", "fullPage": false }, { "file": "/previews/58/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/58/78d25613f6df4528-mobile.jpg", "route": "/preview/58-service-bay/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:b5cc04f84f0f21661b144ba009730227f12fed8331143315f5f5fc35b2f6e82a", "sha256": "78d25613f6df45285ca5fe62e89db20018d8a0f6ee3e8cb8b4714e0a2a22665d", "fullPage": false }, { "file": "/previews/58/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/58/da4642a0c7724bbf-detail.jpg", "route": "/preview/58-service-bay/booking", "viewport": { "width": 1440, "height": 1000 }, "state": "booking", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:b5cc04f84f0f21661b144ba009730227f12fed8331143315f5f5fc35b2f6e82a", "sha256": "da4642a0c7724bbf4a0560b5c5080fdff4824ea2b49a965ff88d51efbd86f99b", "fullPage": false }, { "file": "/previews/58/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/58/878c23173d286fec-full-page.jpg", "route": "/preview/58-service-bay/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:b5cc04f84f0f21661b144ba009730227f12fed8331143315f5f5fc35b2f6e82a", "sha256": "878c23173d286fecf62105176d6f139db2260db662f4c17ff6501ad3354e0e40", "fullPage": true } ], "sourcePath": "src/designs/58-service-bay", "neighbours": [ "25", "60" ], "palette": { "page": "#efeee7", "surface": "#ffffff", "ink": "#262a29", "accent": "#943d16" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Turn an unfamiliar repair into an understandable job ticket. Built for mechanic, tyre shop, auto detailing, equipment repair. The visitor’s next step is to book a service.\n\n**Visual grammar.** Use a industrial orange job tickets, monospaced figures, and a workshop photograph. Preserve the hierarchy of vehicle details, service prices, work authorisation; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** BAY 04 / Auto workshop is a fictional demonstration. The entry page establishes a complete visual direction, with vehicle intake and service estimate as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**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.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve vehicle details, service prices, work authorisation. 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.\n\n**Identity and adaptation.** An industrial job-ticket composition leads with the vehicle and the work required. Show the price estimate beside the service choice, with approval expectations explicit.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/58-service-bay.zip" }