Default
The Vault
The training behind what Scott does with your dog, so it holds when he’s home.
Scott McKay · Design system
One system.
Every pixel from it.
Every colour, size and component on scottmckay.com comes from this page. It’s built from the same code that runs the site, so if something on the site doesn’t match it, the site is wrong.
01 · Colour
Gold, ink and three surfaces.
Brand values come from the Style Guide settings; every role below is a named token and components use nothing else. Values print live from this page.
--sm-goldAction: buttons, rules, keylines, links on dark.--sm-gold-dimLabels and specs on light surfaces.--sm-inkHeadings, button text, prices.--sm-body-inkBody copy on light.--sm-pageSurface 1: white sections and cards.--sm-tintSurface 2: the warm band.--sm-surface-blackSurface 3: heroes and black cards.--sm-section-darkThe Style Guide “Dark section” setting: currently black, the same as --sm-surface-black.--sm-scrimThe grade over photographs.--sm-hairlineCard borders and table rules. Never between sections.--sm-ghostEmpty states only. Decorative — fails contrast.--sm-error · NEWProposed: form errors. Also --sm-ok, --sm-warn, --sm-info.Text on dark: five steps, nothing in between
--sm-on-dark-strong · one-liners over photographs
--sm-on-dark-body · copy on black
--sm-on-dark-muted · meta rows · £4,000
--sm-on-dark-faint · tags
--sm-on-dark-small · marks rows
The pairs we use, contrast-checked live
WCAG AA needs 4.5:1 for text, 3:1 for large text. Ratios are computed in your browser from the live tokens.
Aa Heading
Aa Body
Aa Body
Aa Label
Aa Label
Aa Button
Aa Eyebrow
Aa Copy
Aa Marks
Aa Ghost
02 · Type
Three families. One scale.
Headings Menda Bold, copy Inter, labels Geist Mono. Every size is a Style Guide slot. Each row is measured live at your screen width and checked against the real element on this page — a red check means something drifted.
Before you give up.
Two ways we fix it.
The 30‑Day Reset
The Vault
What happens in week one
Train at your own pace. Spend 5 intensive days working alongside me. Or hand it over — your dog lives here for 30 days and I do the work.
Professional dog training and IGP in Norfolk — one-to-one assessments and training programmes.
Prices include VAT. Assessments are free and carry no obligation.
You do it · Membership
Residential · 30 days · £4,000
The section heading: eyebrow, gold rule, H2
In person
Two ways we fix it.
Eyebrow: label recipe (Geist Mono 500, 12px, .16em, uppercase). Rule: 72 × 1px gold, 18px above and below. Heading: H2.
<p class="sm-label sm-xyz__eyebrow">In person</p> <span class="sm-rule"></span> <h2 class="sm-xyz__heading">Two ways we fix it.</h2>
03 · Space, shape & motion
Nine steps of space. Two corners. One shadow.
Every gap, padding and stack uses a step below. Sections are separated by surface, never by lines.
--sm-radius-btn · 2px
--sm-radius-card · 6px + --sm-shadow-card
--sg-radius · (not used by cards)
| Token | Value | Use |
|---|---|---|
| --sm-container | Widest content box; inner gutters --sm-container-pad (). | |
| --sm-measure | Longest line of copy. | |
| Breakpoints | 767 · 900 · 1022 · 1299px | Phones (Kajabi) · card grids and black card stack · carousels · header to hamburger. CSS can’t hold these as tokens; they live here. |
| --sm-dur / --sm-ease | · | Every hover transition. |
| --sm-dur-slow | Scroll reveal (once per element; heroes never animate). | |
| --sm-arrow-travel / --sm-lift | · | Arrow slide on hover · button rise on hover. Nothing else moves. Off under reduced motion. |
| --sm-z-sticky / --sm-z-menu | · | Sticky booking bar · mobile menu panel. |
04 · Buttons & links
One button. One link.
The gold button is the only button. On hover it lifts 1px and its arrow slides 4px — nothing else changes. Hierarchy comes from placement and size, never fill. There is deliberately no outline, ghost or destructive button on this site.
Hover any button: 1px lift, arrow slides. Tab to one: 2px gold focus ring. Disabled (NEW): 45% opacity, no hover. Inside sections, buttons run full width on phones, 48px tall, one size step down.
<a class="btn btn--solid btn--large btn--auto" href="/offers/…"> Book an Assessment <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12H19" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 7L19 12L14 17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> </a>
The secondary link
Mono label with a permanent 1px full-gold line that runs under the arrow, with room for the arrow’s travel. On hover only the arrow moves. The line never dims, grows or moves.
<a class="sm-label sm-link" href="/the-30-day-reset"> <span class="sm-link__text">About the Reset</span> <span class="sm-link__arrow"><!-- the same 18 × 18 arrow --></span> </a>
The boundary: grouped navigation — the header, the footer, the contents list at the top of this page — is hover feedback only: a gold line grows in, nothing at rest. A standalone action link always shows its gold at rest, because phones never hover.
05 · Labels
One label recipe.
Geist Mono 500, uppercase, the H6 size (12px), .16em tracking — .14em on numeral rows. Gold-dim on light, gold on dark. Every card label is 12px; the older components that still carry smaller sizes are listed under Decisions.
I do it
Flagship
Online · Any time
In person · 5 days · £1,500
Before you give up
Residential · 30 days · £4,000
06 · Cards
Cards hold still.
A card never moves on hover — motion signals something to click, and the card isn’t the click target; its button is. White card: 1px hairline, 6px corners, the one shadow. Title H3, kicker and spec on the label recipe, copy on the body size.
I do it
Flagship
The 30‑Day Reset
Gold keyline plus the tag. On a poster, the tag only.
Posters and the black card render live in 08, from the same section types as /programmes.
Add section → “SM Programme Cards” Layout: Card grid (white cards) or Posters (image fills the card, one per row) Per card: image · kicker · title · one-liner · spec · price · button (size, width) · Flagship · Ghost
07 · Forms
The enquiry form.
Built from the production classes Kajabi’s own forms use — .form-group, label, .form-control, .form-btn. Try sending it empty. Demo only: nothing is submitted.
States: default · focus (tab in) · error and success (proposed, status tokens) · disabled (NEW: tint field, muted text). Kajabi’s live forms still show Kajabi’s own error red — see Decisions.
08 · Live patterns
Every section below is a real section.
Same section types and same CSS as the live pages — copies of their settings, so you can play with them here without touching the site. The hero at the top of this page is one too.
08.1 · Pricing, in person
Posters
One per row; the image fills the card. Title H2, kicker and meta on the label recipe, the secondary link as the action. Flagship shows as the tag only.
SM Programme Cards · Layout: Posters · settings copied from /programmes
In person
Two ways we fix it.
We do it
The 5‑Day Bootcamp
5 intensive days side by side with me — you, your dog, and the method worked until it sticks. You leave knowing exactly what to do.
Book an Assessment
I do it
Flagship
The 30‑Day Reset
Your dog lives here with me for 30 days and I do the work — one dog at a time. You get back a different dog, then I teach you how to keep it that way.
About the Reset08.2 · Pricing, online
Card grid
White cards, three across; one per row on phones. Ghost cards hold slots that aren’t open yet.
SM Programme Cards · Layout: Card grid · settings copied from /programmes
Online courses
Train from wherever you are.
The work behind the programmes, on video — and new courses as they open.
You do it · Membership
The Vault
The training behind what Scott does with your dog, so it holds when he's home.
Coming
Course
Coming soon
New courses will appear here as they open.
Coming
Course
Coming soon
New courses will appear here as they open.
08.3 · Image and text
Feature split
Image on one side, copy and feature tiles on the other; an optional second row carries a pull quote and signature.
SM Feature Split · settings copied from /residential-training
One dog
at a time.
Who’s training your dog
I train with the best in Europe.
I’m Scott McKay. I’ve trained dogs for over 25 years, from family pets to elite working German Shepherds, and I compete in IGP, one of the most demanding dog sports there is.
I’m a NePoPo® Gold School graduate, and I travel across Europe to train alongside some of the best dog trainers in the world. I’ve never stopped learning, and every dog I take on gets all of it.
NePoPo® Gold School graduate
IGP competitor
Trains across Europe
500+ dogs in 25 years
“Every dog I take on gets everything I’ve learnt. That’s why I only take one at a time.”
Scott McKay
I take one dog at a time. For 30 days, yours is the only dog in residence, and every session is planned around him.
While I train your dog, Kate looks after you: your updates, your questions and your follow-ups. She’s a NePoPo® Gold School graduate too, so she knows exactly what she’s looking at.
Scott McKay
One dog.
One trainer.
Thirty days.
08.4 · Proof
Proof cards
A number, what it counts, and one line of proof each, on the deep surface.
SM Proof · Style: cards · settings copied from /residential-training
The record
Twenty-five years.
Five hundred dogs.
One guarantee.
500+
Dogs trained
Family pets and working dogs, over twenty-five years, in the real world.
30 days
Or less to see improvement
Against goals we write down the day your dog arrives, not a vague promise of ‘better’.
100%
Money-back guarantee
If I can’t show you that improvement, you get every penny back. Full terms below.*
08.5 · Comparison
Programme table
Rows, a price line, notes and one button. Hidden on the live page today; shown here so the pattern stays documented.
SM Table · settings copied from /residential-training (hidden there)
The programme
You don’t pick a package.
The dog sets the time.
After the assessment I recommend the shortest stay that gives us enough time to do the job properly and hand it over to you at the end. Most dogs need four or five weeks.
| Stay | Right for | Fee |
|---|---|---|
| 3 weeks | Young dogs and one recent problem. Everyday reliability. | £3,000 |
| 4 weeks | One established problem: pulling, recall, the door. | £4,000 |
| 5 weeks | Reactivity, or two or three problems that feed each other. | £5,000 |
| 6 weeks | Long-standing behaviour. Dogs other trainers gave up on. | £6,000 |
Every stay includes the assessment, the handover in person with your dog, the written plan you take home, and 90 days free in the Training Club.
A £500 reservation secures your dates and comes off the fee; the balance is due 14 days before arrival. Collection and delivery are priced at assessment.
From £3,000 · £500 reserves your dates
Book an assessment
Free · 45 minutes with Scott · No obligation
08.6 · Questions
FAQ accordion
Split layout with a working accordion: click a question, or Tab to it and press Enter.
SM FAQ · first four questions copied from /residential-training
Questions
Straight answers.
The questions every owner asks before they book. If yours isn’t here, ask me on the call.
No. Thirty days feels long to you, not to him. Dogs go straight back to the people they live with, and most owners notice a calmer, more attentive dog, not a distant one. What changes is his behaviour, not who he loves.
In my home, indoors, as part of the household. Not a kennel block. I take one dog at a time, and he trains where real life happens: the front door, the street, the car and the park.
Whatever is right for your dog: food, play, markers, structure and the lead. Where it’s right for him and lawful, that can include an e-collar. If it does, he’s properly conditioned to it, you’re taught to use it at the handover, and it goes home with him. Equipment is part of the training. It’s never the product.
Often, yes. Reactivity is one of the most common reasons dogs come to me. But I don’t take every dog: a serious bite history, a medical problem or a welfare concern can mean another route is right. If I can’t help, I’ll tell you on the call, before you’ve paid a penny.
08.7 · Close
Black card CTA
The contained black card that ends a page: gold eyebrow, H2, one button, a marks row.
SM CTA Banner · Layout: Card · settings copied from /programmes
Before you give up
45 minutes.
Then you'll know.
One honest conversation about your dog, what's fixable, and what it takes. If Scott can't help, he'll tell you that too.
One-to-one
Straight answers
No obligation
09 · How to use it
Change it once. It changes everywhere.
| To change | Where | What follows |
|---|---|---|
| Gold, heading colour, page background | Website → Design → Style Guide → Colours | Every button, rule, kicker, heading and surface on the site. |
| Gold-dim, tint, hairline, scrim, on-dark steps | sm.css → DESIGN TOKENS (top of the file) | Every component that uses them — none repeats the value. |
| H1–H6, body size, fonts | Style Guide → Typography | All headings, card titles, labels (H6) and copy. |
| Spacing steps | sm.css → --sm-space-1 … --sm-space-9 | Card padding, gaps, stacks. Section padding is each section’s own padding setting. |
| Card and button corners | sm.css → --sm-radius-card, --sm-radius-btn | Every card, poster, black card and button. |
| Motion | Style Guide → Motion (--sg-dur) · sm.css → --sm-arrow-travel, --sm-lift | Every hover and reveal. Reduced-motion settings switch it off. |
Building a new section
1. Start from a pattern on this page (Add section → SM …). 2. Give it the next surface in the white → tint → black rhythm. 3. Eyebrow, heading (H2), one line of intro. 4. One gold button, or a secondary link. 5. If it truly needs new CSS: tokens only, written as a component block in sm.css, and added to this page the same day. Nothing goes live that isn’t on this page.
/* a new component block in sm.css — tokens only */
.sm-xyz { padding:var(--sm-space-6); background:var(--sm-tint); border-radius:var(--sm-radius-card); }
.sm-xyz__label { color:var(--sm-gold-dim); } /* add class="sm-label" for the label recipe */
.sm-xyz__title { font-size:var(--sg-fs-h3); line-height:var(--sm-lh-heading); letter-spacing:var(--sm-track-heading); }
.sm-xyz__copy { font-size:var(--sg-fs-body); line-height:var(--sm-lh-body); max-width:var(--sm-measure); }10 · Decisions needed
Still open. Nothing here changes without a ruling.
| Item | Today | Proposed |
|---|---|---|
| “Coming soon” cards | Ghost text fails contrast (see 01) and costs two screens of grey on phones. | Hide ghost cards until a course exists, or hide them on phones. |
| Kajabi’s own form errors | Shown in Kajabi’s red, not --sm-error. | Wire Kajabi’s error classes to the status tokens (07). |
| Style Guide radius | Setting is 12px; cards and posters use the ruled 6px token. | Set the Style Guide radius to 6px so native elements match. |
| Older components | 72 font sizes outside the cards are still raw pixels, including 10–11px labels in the library block, the CTA band and the photo hero. | Same treatment as the cards, one component at a time, with before/after shots each. |
| Focus ring on light | The 2px gold ring is 1.9:1 against white, under the 3:1 that WCAG 2.2 asks of focus indicators. | Ink ring on light surfaces, gold on dark. |
| New today | Disabled state for buttons and fields; ink radios and checkboxes instead of the browser’s blue. | Keep, or change. |
| The 30-Day Reset page | Runs on the landing theme with a frozen copy of sm.css — none of these tokens reach it. | Port the token block into the landing theme’s CSS channel. |
| Poster titles | H2 (chosen 5 Oct — H3 read underpowered on the photographs). | Keep, or switch to H3: one token in one line. |
| Status colours | Defined, proposed for form feedback only. | Approve, or replace with your own four. |