# 64 Service Plans

**Philosophy and fit.** Make the price, frequency, and coverage easy to compare. Built for cleaning, lawn care, property maintenance. The visitor’s next step is to schedule recurring service.

**Visual grammar.** Use a fresh teal subscription table with explicit frequency and inclusion rows. Preserve the hierarchy of service plans, coverage checks, frequency selector; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.

**Sample and interaction.** Tidy / Home care is a fictional demonstration. The entry page establishes a complete visual direction, with choose your plan and recurring booking 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 service plans, coverage checks, frequency selector. 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

- Service plans
- Coverage checks
- Frequency selector

## Routes

- Entry: /preview/64-service-plans/start
- Choose your plan: /preview/64-service-plans/plan
- Recurring booking: /preview/64-service-plans/booking

## Reference and adaptation

- Page scope: Service site.
- Distinct composition: fresh teal subscription table with explicit frequency and inclusion rows.
- Typography: DM Sans.
- Tokens: page #f3f8f4, ink #24433b, accent #1f6555.
- Price, frequency and service coverage lead the page. Comparable plans are appropriate here because visitors are choosing an ongoing routine; keep exclusions and per-visit pricing close to that choice.
- 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.