CJW Dev Handoff · Mockup spec — not production

Dev Handoff · 02 Style Guide

The visual language — locked.

Tokens are sourced from client/src/index.css. Configure Elementor's Site Settings → Global Colors and Global Fonts to mirror these values before you start composing pages — every Elementor block should reference a global token, never a hand-typed hex.

Color

Navy + Gold + Paper + Ink

Four families. Navy is brand fill. Gold is the only accent — used sparingly for CTAs, eyebrow text, and focal points. Paper is the warm cream background. Ink is the text scale.

Navy

#07101e

--color-navy-900

Primary dark surface (footer, dark hero)

#0a1628

--color-navy-800

Primary brand fill, primary buttons, body headings

#0f2138

--color-navy-700

Card surface on dark

#1a3354

--color-navy-600

Hover state for navy

#2d4a73

--color-navy-500

Secondary dark accent / chart

Gold

#a88934

--color-gold-700

Eyebrow text on light, link color, icon accents

#c9a84c

--color-gold-600

Primary CTA fill, focus ring, signature accent

#d4b66a

--color-gold-500

Hover state for gold buttons

#e6cf95

--color-gold-300

Eyebrow on dark, text accents on dark surfaces

#f5ebcc

--color-gold-100

Subtle gold tint on light surfaces

Paper

#fafaf7

--color-paper-50

Default page background

#f5f3ec

--color-paper-100

Subtle section alternation, muted fill

#ebe8df

--color-paper-200

Borders, dividers, input borders

Ink

#1a1d22

--color-ink-900

Body text on light

#2c3037

--color-ink-800

Secondary body text

#4a4f57

--color-ink-700

Muted text, captions

#6f7480

--color-ink-500

Disabled state, fine print

#b3b6bc

--color-ink-300

Border on dark, faint dividers

Type

Source Serif 4 (display) + Inter (body)

Display — Source Serif 4 (variable)

Move Better.

Feel Stronger.

Used only for editorial headings and slab numerals. Optical-sized variable font; pull wght 400/600 with optsz 8–60 from Google Fonts (already wired in client/index.html).

Body — Inter (variable)

Inter handles every UI element, body paragraph, button, navigation item, and form control. Weights in use: 400, 500, 600, 700.

font-feature-settings: "ss01", "cv11"; — left at Inter defaults.

Role	Class / Element	Specimen
Display H1	h1 / font-display 4xl–6xl	Two doctors. One philosophy.
Display H2	h2 / font-display 3xl	Why this happens
Display H3	h3 / font-display 2xl	What we do about it
Eyebrow	.eyebrow / .eyebrow-on-dark	A MyoCore franchise
Body lg	text-[17px] leading-relaxed	Veteran-led care without the conveyor belt.
Body sm	text-[14.5px]	Most chronic headaches start in the upper neck.
Slab numeral	.slab-num	$108
UI label	text-xs uppercase tracking-wider font-semibold	Hours

Spacing & radius

Tailwind defaults — leaned into

Section rhythm

Section padding (sm): py-12 md:py-16
Section padding (lg hero): py-20 md:py-28
Container: max-w-7xl mx-auto px-5
Card padding: p-6 default, p-7 for editorial
Stack gap (cards): gap-5 or gap-6
Vertical text rhythm: mt-2 / mt-4 / mt-6

Radius scale

rounded-md — inputs, small chips
rounded-lg — buttons, icon tiles
rounded-xl — content cards
rounded-2xl — featured cards, panels
rounded-3xl — CTA banners, hero overlays
rounded-full — pills, chips, AI mic, avatars

Buttons

Primary, secondary, ghost — three variants only

Primary (gold) — single highest-intent action per surface (booking, call). Never two on screen.
Secondary (navy) — paired with primary or used standalone for support actions.
Ghost (outlined) — tertiary, navigation, "read more" patterns.

Depth

Shadows & grain

Card lift

shadow-[0_2px_24px_-16px_rgba(10,22,40,0.25)]

Hover lift

shadow-[0_8px_36px_-18px_rgba(10,22,40,0.35)]

Paper grain

.grain — apply on dark surfaces

Motion

Restraint over flourish

Defaults

Duration: 150ms / 200ms / 300ms
Easing: ease-out for enter, ease-in for exit
Hover translate: -translate-y-0.5 max
Hover icon shift: translate-x-0.5
Card hover shadow + lift only — no scale

Don't

No bounces, springs, parallax
No scroll-triggered animations on healthcare content
Respect prefers-reduced-motion — fade only
Animations should support the content, not draw attention

Voice

Plain, direct, slightly dry

Do

"Most chronic headaches start in the upper neck."
"No required X-rays. No 60-visit packages."
"Same-day appointments. No referral needed."
Use plain English; clinical terms only when explained.
Use real numbers ($108, 60 min, 4–6 visits).

Don't

No "world-class" / "premier" / "state-of-the-art."
No medical jargon without a plain-English follow-up.
No invented patient quotes or stock-photo testimonials.
No fear-based copy ("untreated whiplash leads to…").
No exclamation marks in headings or CTAs.

A11y floor

WCAG 2.2 AA — minimum bar

All text passes 4.5:1 contrast against its background (large display passes 3:1).
Visible focus ring (2px gold) on every interactive element.
Skip-to-main-content link in the header.
Form fields paired with explicit <label>; required fields announced.
Images have descriptive alt text; decorative images use empty alt.
Heading order is sequential — no skipped levels.
Tap targets ≥ 44×44 px on mobile.
Honor prefers-reduced-motion — disable transitions, keep state changes.