Design System

Component inventory and brand reference

← Back to site

Colors

All tokens are in src/styles/theme.css under @theme static. Tailwind generates bg-*, text-*, border-* utility classes automatically.

navy #3D4A5C bg-navy Hero bg · CTA section · image scrims
ochre #C4901A bg-ochre Primary accent · CTAs · wave motifs · badges
terracotta #B86B4F bg-terracotta Secondary accent · service labels · hover states
linen #F8F4EC bg-linen Main page background
sand #EEE8DA bg-sand Card / surface background
charcoal #2A2A2A bg-charcoal Body text · headings on light bg
pebble #7A7060 bg-pebble Muted / secondary text · descriptions
cream #F5F0E8 bg-cream Text on dark backgrounds (hero)
ink #1A1208 bg-ink CTA button label text (on ochre bg)

Typography

Heading: Cormorant Variable (font-heading). Body: Nunito Variable (font-body). Always set font-optical-sizing: auto on Cormorant headings.

Hero h1 · clamp(2.8rem, 7vw, 5.5rem) · weight 700 · line-height 0.92

Your Dog Deserves a Head Start

Section h2 · clamp(2rem, 4.5vw, 3rem) · weight 700 · line-height 1.1

Training That Fits Your Life

CTA h2 · clamp(2.2rem, 5.5vw, 4rem) · weight 700

Your dog is ready. Are you?

Service h3 · clamp(1.6rem, 3.5vw, 2.4rem) · weight 700

New Puppy Training

Card h3 · text-xl (1.25rem) · weight 700

We come to you

Body paragraph · 1rem · weight 400 · line-height 1.75 · color: pebble

Every session is private, in your home, built entirely around your dog's temperament, your family's routine, and your goals. Not a program — a relationship.

Eyebrow / label · 0.75–0.8rem · weight 600–700 · uppercase · tracked

In-Home Private Training

Footer section header · 11px · weight 700 · uppercase · tracked · color: terracotta

Get in Touch

Small / caption · 0.82rem · color: pebble

5.0 from 50+ happy clients · In-home visits · No pressure · 5-star rated

Atoms

Small reusable elements used within section components.

WaveDivider src/components/WaveDivider.astro

SVG wave section divider. Props: fillColor (default: var(--color-linen)), flip (boolean), className.

WaveDivider (flipped) src/components/WaveDivider.astro

Same component with flip={true} and a dark fillColor.

Get in Touch

Let's Talk About Your Dog

Tell us about your pup — we'll get back to you within 24 hours.

ContactPageHero src/components/ContactPageHero.astro

Compact inner-page banner (~45vh) for secondary pages. Navy background, centered text, wave texture, decorative paw rule. Props: eyebrow, headline, headlineGold, subtitle.

Sections

Full page sections. Each is self-contained with its own padding and background. Rendered at full width below — scroll-reveal animations are active.

Nav src/components/Nav.astro

Fixed-position navigation with logo, desktop links, and mobile hamburger. Uses position: fixed — contained here via CSS contain: layout. Props: siteName, ctaHref, ctaLabel.

In-Home Private Training

Your Dog Deserves a Head Start

Professional in-home dog training that meets you where you are. Real results backed by a proven 5-star track record.

Book a Free Consultation
5.0 from 50+ happy clients
Happy trained dog
500+ Dogs Trained
Hero src/components/Hero.astro

Full-viewport hero. Navy background, arch-clipped photo, staggered reveal animations. Props: eyebrow, headline, headlineGold, sub, ctaLabel, ctaHref, proofText, badgeNumber, badgeLabel.

Training That Fits Your Life

Every dog and family is different. That's why I come to you, work in your home, and build a plan around your actual life — not a one-size-fits-all program.

Happy puppy sitting in grass, ready for training
Puppy Program

New Puppy Training

Those first weeks matter more than you think. I'll help you lay the right foundation — housetraining, bite inhibition, socialization, and basic manners — before small habits become big problems. We work at your puppy's pace, in your home, where the real learning happens.

  • Housetraining & crate training
  • Bite inhibition & mouthing
  • Socialization guidance
  • Foundation obedience (sit, stay, come)
Start Your Puppy's Training
All Ages

Obedience & Manners

Whether your dog pulls on walks, ignores you at the park, or turns into a different animal when guests arrive — we fix that. Private, in-home lessons tailored to your dog's personality and your goals. No group classes, no distractions, just results.

  • Leash manners & loose-lead walking
  • Reliable recall & impulse control
  • Door manners & greeting behavior
  • Behavior problem-solving
Get Better Manners
Well-trained Weimaraner dog at home
Services src/components/Services.astro

Alternating 2-column service rows with images. Props: title, subtitle, services (array of 2 service objects with label, name, desc, features, cta, ctaHref).

Why families choose Headstart

01

We come to you

Your home is where your dog actually lives. Training there — not in a sterile facility — means the skills stick. No car stress, no distractions from unfamiliar environments.

02

Private, not group

Group classes move at the pace of the slowest dog. Private lessons move at the pace of yours. Every minute of every session is focused entirely on your dog's specific needs.

03

A proven track record

Over 500 dogs trained. Hundreds of 5-star reviews. Not because we promise miracles — because we show up, do the work, and stay until you have real results.

WhyUs src/components/WhyUs.astro

3-column reason cards on sand background with wave motifs. Props: title, titleGold, reasons (array of objects: num, title, body, arc).

What families are saying

"We tried two other trainers before finding Headstart. In three sessions, our reactive rescue went from a dog I couldn't walk past other people to a dog I'm proud to take anywhere. I never thought it was possible."

SM

Sarah M.

Rescue dog owner · Headstart client since 2023

"Our golden retriever puppy was a chaos machine — jumping, nipping, pulling on every walk. Now she sits patiently at the door and greets guests without bowling them over. The change is remarkable."
JK

James & Priya K.

Puppy training clients

"What I appreciated most was the honesty. No gimmicks, no promises of overnight miracles — just a clear plan, consistent follow-through, and results that actually stuck months later."
LT

Laura T.

Obedience training client

Testimonials src/components/Testimonials.astro

Large featured quote on navy + two supporting cards on sand. Props: title, titleGold, featured (object: quote, name, detail, initials), supporting (array of same shape).

A trainer who shows up,
and stays until it works.

I started Headstart because I knew there had to be a better way than crowded group classes and generic advice that doesn't account for your actual dog.

Every session is private, in your home, built entirely around your dog's temperament, your family's routine, and your goals. Not a program — a relationship.

Over 500 families later, the approach is the same: show up, listen, do the work, and don't stop until the results are real and lasting.

500+ Dogs Trained
8+ Years Experience
5.0 Star Rating
Dog trainer working with a dog in a home setting

Certified Trainer

APDT Member · Force-Free

About src/components/About.astro

2-column trainer intro with photo, credentials row, and floating cert card. Props: headline, headlineGold, paragraphs (string[]), credentials (array: num, label), certTitle, certDetail.

Your dog is ready.
Are you?

Free 20-minute consultation. We'll talk about your dog, your goals, and the honest path to getting there.

Book a Free Consultation

In-home visits · No pressure · 5-star rated

FinalCTA src/components/FinalCTA.astro

Navy full-bleed CTA section with wave background pattern and wave top divider. Props: headline, headlineGold, sub, ctaLabel, ctaHref, footnote.

Footer src/components/Footer.astro

Sand background footer with 3-column grid: brand column, pages links, contact. Props: siteName, tagline, quote, email.

Book Your Free Consultation

Ready to Get Started?

About You

About Your Dog

How Can We Help?

Type of Training

ContactForm src/components/ContactForm.astro

2-column contact form section (form left, sidebar right; single column on mobile). Custom checkbox styling, ochre focus rings, 3-card sidebar with contact info, "What Happens Next" steps, and business hours. Props: email, formAction.