# 25 Local Trades

**Philosophy and fit.** Answer the questions a customer has before contacting a local business. Appropriate for trades, storage facilities, repair services, and appointment-based businesses.

**Visual grammar.** Lead with service, coverage area, opening hours, and a clear contact action. Follow with a price or service table, practical photographs, and specific evidence of work. Use robust sans-serif headings, dark navy text, white and pale grey surfaces, and a safety-orange accent reserved for actions. Navigation names the work directly.

**Specimen and flow.** _Northline Repairs_ serves a fictional town. Select a repair type, inspect service details, and complete a quote-request demonstration. Supporting views include service-area information and a submitted-request summary. Form validation explains missing information beside the relevant field; no message is actually sent.

**Responsive behaviour.** Phone and enquiry actions stay easy to reach without covering the page. Service tables collapse into labelled records; addresses and hours remain visible text.

**Identity rules.** Preserve plain answers, real-looking work examples, and clear contact routes. Avoid generic stock-photo heroes, fabricated review badges, and excessive animation. **Effort: low.**

## Implemented sample

Northline Repairs is an expansive, bounded design reference. All organisations, events, prices, statistics and research claims are fictional fixtures. The page includes a complete primary composition and two local supporting routes that show its interaction and content hierarchy.

## Defining features

- Service and area before decoration
- Visible sample prices
- Clear contact and validation

## Adaptable choices

Brand, subject, accent and equivalent licensed typefaces can change. Preserve composition and navigation. Do not turn the hierarchy into a uniform collection of cards.

## Tokens and typography

Heading: DM Sans. Reading: DM Sans. Local WOFF2 fonts with system fallbacks. Page #f7f8f5; surface #ffffff; text #24374b; accent #be491b. Eight-pixel base spacing; reading measure 65ch; width 1240px. See tokens.css for role values and Demo.vue for composition. Palette and type match the working specimen.

## States

- Entry: /preview/25-local-trades/start
- Quote request demonstration: /preview/25-local-trades/quote
- Service-area information: /preview/25-local-trades/area

## Neighbours and adaptation

- [01 Civic Service](../01-civic-service/DESIGN.md) uses single-column service guidance with a prerequisite rail and breadcrumbs and explicit back links. This reference keeps plain service answers, visible coverage, and a practical price table and service selection and a short enquiry form.
- [02 Precision SaaS](../02-precision-saas/DESIGN.md) uses asymmetric product story beside a readable working inbox and capability links and a sample workspace. This reference keeps plain service answers, visible coverage, and a practical price table and service selection and a short enquiry form.

## Assets

See [asset record](../../../docs/ASSETS.md). All vector diagrams and sample writing are original to this repository. Photos are illustrative, not evidence of the fictional brands. Font faces: DM Sans.

## Verification

Reviewed working sample. Browser checks cover entry-page reflow at 320, 390, 768, and 1440 pixels, keyboard entry, direct routes, and automated accessibility; both supporting routes are checked at 390 pixels. Capture metadata is stored in public/previews/25/capture.json and names the source content hash. Accessibility scans are supplementary; no formal WCAG certification or field-performance claim is made.

## Distinctive composition

A service-and-coverage board now leads the page: practical hours, three clearly priced work types, and an illustrated repair detail. This removes the product-marketing hero and pale information card shared with Precision SaaS, while avoiding Service Bay’s industrial ticket language.