--charcoal
#111715 Primary dark ground, page hero overlays, high-confidence contrast
Design system
Built from carpet, craft, and local trust. Use this page before adding new sections, service pages, forms, or AI-generated layouts.
Foundation
A local-service system with a material memory.
Advanced Carpets should feel like a team that handles fibres, equipment, water, rooms, and urgent restoration work every day. The visual system is quiet, tactile, and direct.
Use swatches for palette explanation and material references. Section dividers stay as a single solid orange rule.
Colour
Colour tokens
Use the named CSS variables. The palette should feel like wool, equipment, water extraction, Central Otago landscape, and practical job-site signage.
--ink
#24211d Main reading text on light surfaces
--muted
#626159 Secondary copy, captions, and proof notes
--wool
#f4f0e7 Warm page background, chosen to feel like carpet backing rather than SaaS white
--paper
#fffdf8 Clean surface for cards, forms, review panels, and documentation blocks
--line
#d8d2c7 Borders, dividers, field edges, and measurement guides
--clay
#d94f22 Primary action, job urgency, rating stars, and key material stripe
--water
#147f9f Cleaning equipment accent, links, icons, and focus states
--sage
#748b62 Positive proof, local landscape, and secondary stripe accent
--taupe
#b9aa94 Neutral carpet sample, quiet separators, and inactive material stripe
Typography
Type system
Display headings use Plus Jakarta Sans with a strong 900 weight and open line height so multi-line mobile headings can breathe. Body text uses Source Sans 3 for readable service detail and forms.
.hero h1 / .page-hero h1 Carpet cleaning, restoration, and practical property care
.section-heading h2 Built around real rooms, stains, fibres, and service areas
.service-card h3 Stain Treatment
.copy / section p Plain-language service copy should describe what the customer needs to know before getting in touch.
.overline / .system-label ENQUIRY WORKFLOW
Components
Buttons, service cards, and proof panels
Components should make high-intent actions and service choices clear. Use lucide icons for service meaning, not emojis or decorative symbols.
.button .button-primary .button .button-dark .button .button-outline Carpet Cleaning
Hot water extraction steam cleaning and practical carpet care for homes, rentals, offices, and commercial spaces.
Pest Control
Professional pest control for common household and commercial pest issues across Central Otago and the Southern Lakes.
Google Reviews
Rating lockup
Use only with a verified count. Stars are always var(--clay).
RT
Rachel T. 2 days ago
★★★★★
Kevin did a fantastic job on our lounge carpet. Stains we thought were permanent came out completely. Would highly recommend to anyone in the area.
Compact service links
Before/after
Draggable comparison card
Use this component for genuine matching before/after imagery only. It is a reusable site primitive, not a one-off page decoration.
Before After Usage rules
- Use paired images from the same job, angle, and crop wherever possible.
- Keep labels as Before and After for fast scanning.
- Use the component on service pages when it proves workmanship.
- Do not fake transformations by tinting unrelated images.
Sections
Section patterns
Sections use full-width bands and a stable inner container. Transition rules are solid orange. Avoid floating wrapper cards around entire page sections.
Light section
Services, FAQs, forms, and local content.
Use wool or paper backgrounds with clear dividers and enough density to scan.
Dark section
Proof, process, and strong brand moments.
Use charcoal for workmanship proof, real photos, and trust points.
Measure
Use borders and grid lines as measurement cues, not decorative data widgets.
Restore
Show practical steps and honest limits before broad claims.
Finish
Prefer rooms and fibres over abstract icons when the user needs confidence.
Service pages
Shared service detail template
Service detail pages use one shared template. Keep layout changes in src/pages/services/[slug].astro, service copy in content/services/services.json, and styling in reusable service classes.
Use a real job photo with texture, equipment, room context, or finished detail.
Central Otago
What the service covers
Use balanced 50/50 media rows for service explanation. Add the reversed row further down the template when the page needs another image-led proof point.
15+ yrs Local experience
5.0 Average Google rating
100% Satisfaction focused
Tell us what needs cleaning
Use this home-style CTA in the middle of service detail pages. Change the verb to match the service and link the button to the service enquiry form lower on the page.
AC
Local customer Google review placeholder
★★★★★
Use one larger service-specific review when there is a strong quote. Keep it visually related to the home page reviews.
Template rules
- Hero subheading is the region label: Central Otago.
- Do not add pill badges in the hero.
- Use a home-style
.cta-panelafter the review section as the lighter enquiry prompt. - Place the Tradify enquiry form near the bottom, immediately before related services.
- Use
.service-media,.service-metrics,.service-review-card, and.service-cta-panelinstead of one-off CSS.
Forms
Enquiry form
Forms should be short, labelled, keyboard-friendly, and consistent with Netlify form handling. Use photos to help explain the job, not as a required hurdle.
Enquiry details
Make an enquiry
Send the job address, contact details, service notes, and photos through our enquiry form.
FAQ
Accordion pattern
Use one shared FAQ item component everywhere. Keep the class names consistent so the animation, spacing, and editable fields stay in sync.
What areas do you service?
Cromwell, Alexandra, Queenstown, Wanaka, and the wider Central Otago and Southern Lakes region.
How long does carpet cleaning take to dry?
Most carpets are dry within a few hours under normal conditions. Good airflow helps speed this up.
Can you treat pet stains and odours?
Yes. Pet marks and odours can be assessed and treated with a targeted approach.
Editing rules
- Use the `FaqItem` component for every FAQ list.
- Wrap items in `faq-list` and keep questions short enough to scan.
- Prefer one factual answer per item and avoid stacked paragraphs.
- Pass Tina field props when the content is editable from the CMS.
Motion
Hover and motion rules
Motion should clarify interaction and hierarchy. No ambient loops, parallax tricks, or animated decoration unless it explains a real cleaning or enquiry workflow.
Service cardsBorder shifts to water blue, shadow appears, and the card lifts by 2px.
ButtonsUse colour and a 1px lift only. Keep labels stable: Make an enquiry, View services, Meet the team.
Reduced motionThe global stylesheet respects
prefers-reduced-motion and disables transitions for motion-sensitive users.FocusKeyboard focus uses the water-blue outline system and must remain visible on all interactive elements.
Rules
Dos and don'ts
Use this before shipping any new section. If the design could be pasted onto an AI SaaS homepage, revise it.
Do
- Use real photos, material texture, equipment, service areas, and enquiry actions.
- Keep copy plain: what gets cleaned, where, how to enquire, what to expect.
- Use cards only for repeated items, reviews, forms, or reference examples.
- Check desktop and mobile for clipping, wrapping, focus states, and horizontal scroll.
Do not
- Use purple gradients, generic badges, emoji icons, fake dashboards, or invented metrics.
- Hide the carpet/flooring subject behind vague local-service layout.
- Wrap every section in floating rounded cards or stack cards inside cards.
- Ship abstract before/after blocks when a real client image is available.