# Prime Wellness Chiropractic — Design System Spec > Source: primewellnesschiropractic.com.au (live site, captured 2026-05-08) > Stack: Webflow site · `prime-wellness-chiropractic.webflow.698af7e50185727f23feda4d-2ed2a3b51.min.css` (theme) + `prime-wellness-chiropractic.webflow.shared.6a93c43d4.min.css` (Webflow base) > All tokens grepped from real production CSS. All photos pulled from the live Webflow CDN. --- ## At-a-glance - **Business**: Prime Wellness Chiropractic - **Tagline**: *"High-Performance Chiropractic in Penshurst"* - **What they actually do**: A chiropractic clinic in Penshurst (Sydney's south, St George area), focused on **postural correction and spinal care for gym-goers, athletes, and professionals**. Eight named conditions: 1. **Low Back Pain Relief** — disc bulges, sciatic compression, lumbar dysfunction 2. **Neck Pain & Headaches** — cervical adjustments, headache trigger management 3. **Sciatica & Nerve Pain** — radiating leg pain, nerve impingement 4. **Postural Correction** — gym-goer / desk-worker spinal alignment 5. **Hip & Pelvic Alignment** — pelvic tilt, hip rotation imbalances 6. **Sports Injury Treatment** — recovery and return-to-play 7. **Jaw Pain (TMJ) Dysfunction** — jaw alignment, bite tension 8. **Shoulder & Rotator Cuff** — shoulder mobility and impingement - **Location**: Penshurst, NSW 2222 (Sydney south / St George area). Single-location clinic. - **Audience**: gym-goers, weekend athletes, desk-bound professionals (postural-pain sufferers), 30s–50s. Not seniors-led; not pediatrics-led. The "high-performance" framing is the wedge. - **Voice anchors pulled from live site**: *"High-Performance Chiropractic in Penshurst"*, *"Postural correction and spinal care for gym-goers, athletes, and professionals"*, *"Evidence-based · One-on-one · Modern"*, *"Book an Appointment"*. - **Register**: Modern allied-health. Deep forest-green + mint-sage palette over warm white and warm-charcoal text. Reads closer to a contemporary boutique clinic / private allied-health practice (think a sports physio, an integrative medicine office, a high-end osteo) than a strip-mall chiro. The tone is calm-confident, gym-friendly, evidence-leaning — not woo-woo wellness, not white-coat-pharma either. --- ## Color tokens (extracted, frequency-counted) Frequency table from `prime-wellness-chiropractic.webflow.*.min.css` via `grep -oE '#[0-9A-Fa-f]{6}'` and the Webflow `--colors--*:` custom properties (Webflow exports them verbatim from the design tool, which is the canonical source): | Hex | Source / Role | |---|---| | `#2f5d50` | **THE Prime Wellness primary green** — `--colors--primary-color`, all primary CTAs, hero scrim base, headings on dark backgrounds, footer | | `#6fae8a` | `--colors--secondary-color` AND `--colors--primary-shade` — mint sage; CTA icon-circle background, hero floating "physio card" surface, hover accents | | `#3b3b3b` | `--colors--black-shade` — warm charcoal body text | | `#ffffff` | `--colors--white` — page surface | | `lightgrey` | `--colors--white-shade` — soft divider / placeholder text | Untitled UI palette tokens (carry-over Webflow library defaults — NOT used as brand tokens, but live in the CSS): `#475467`, `#f4ebff`, `#f2f4f7`, `#f9fafb`, `#7f56d9`, `#6941c6`, `#53389e`, `#101828` — these never paint to surfaces; we ignore them. → canonical mapping (see `_shared.css`): - `--brand` → `#2f5d50` (live `--colors--primary-color`) - `--brand-deep` → `#213f37` (derived darken) - `--brand-soft` → `#6fae8a` (live `--colors--secondary-color`) - `--brand-darker` → `#15281f` - `--brand-pale` → `#e6efeb` (derived pale mint) - `--ink` → `#3b3b3b` (live `--colors--black-shade`) Logo files literally named **"charcoal-mint"** (`pwc-primary-logo-charcoal-mint.svg`, `pwc-favicon-charcoal-mint.png`) — confirming charcoal + mint as the brand's own naming convention. --- ## Typography (extracted Webflow global tokens) Direct from the live theme CSS: ``` body — Inter Tight 500 16px line-height: 1.625em h1 — Inter Tight 600 74px line-height: 1.1351em letter-spacing: -.03em (mobile 54px) h2 — Inter Tight 600 54px line-height: 1.1852em letter-spacing: -.03em (mobile 48px) h3 — Inter Tight 600 38px line-height: 1.2632em letter-spacing: -.03em h4 — Inter Tight 600 28px line-height: 1.3571em letter-spacing: -.03em h5 — Inter Tight 500 24px line-height: 1.4167em letter-spacing: -.02em h6 — Inter Tight 500 20px line-height: 1.5em (no tracking) button-text — Inter Tight 500 16px line-height: 1.625em italic-accent (live) — Lora 500 italic (used for one-word emphasis inside headings) ``` → token mapping: - `--font-display` → `'Inter Tight', system-ui, ...` (Google Fonts) - `--font-body` → `'Inter Tight', system-ui, ...` (same family — single-font system) - `--font-italic` → `'Lora', Georgia, serif` (Google Fonts) — used **only** for italic-emphasis spans inside headings (live class pattern: `

Postural correction for life

`) The defining typographic move: **Inter Tight at body weight 500 (NOT 400)** — slightly heavier than typical SaaS body, gives a confident clinical tone — and **all headings tracked at -0.03em** (much tighter than the typical -0.005em / -0.01em). The brand reads as "modern allied-health professional" because of those two choices, not the typeface alone. The Lora italic insert is the brand's most distinctive typographic signature. --- ## Site-specific patterns These are the signature stylistic moves that make the live site recognizably Prime Wellness — not generic Webflow defaults. They are baked into `_shared.css` from the start, **not** retrofitted as a refinement layer. ### 1. The Lora italic single-word insert The brand's most unmistakable typographic signature. Inside every Inter Tight heading on the home page, **one word** is set in Lora italic 500. e.g. *"Postural **correction** for life"*, *"Get back to **movement**"*. Reads as a soft serif breath inside otherwise tight-tracked sans — "expressive medical professional." Captured as `.lora-italic` and `.italic-accent`. Use sparingly (one word per heading max). ### 2. 20px corner radius — the dominant card chamfer Live `border-radius:` frequency table: ``` 31 border-radius: 20px ← DOMINANT — cards, photo tiles, sections 11 border-radius: 10px ← chips, small surfaces, icon-squares 5 border-radius: 50% ← icon circles, hero floating physio-card icon 4 border-radius: 30px ← hero floating physio-card, larger feature panels 2 border-radius: 16px ← primary button (live: `.primary-button` 16px) 1 border-radius: 24px / 12px / 100px / 100% (each) ``` The dominant 20px sits on every photo tile, service card, and large surface. Like Imperial Shinez, but with **lighter** shadows — so the same radius reads softer here. We bake `--radius-lg: 20px` as canonical. ### 3. Light, restrained drop-shadows (calm clinical surface) Live `box-shadow` patterns are remarkably **light**: ``` 0 8px 8px #0000000f ← live card drop (~6% black, very soft) 0 4px 4px #0000001a ← live wider drop (~10% black) none ← many cards have NO shadow ``` This is the brand's most distinctive visual restraint. Where Imperial Shinez uses heavy directional drops for "showroom lighting," Prime Wellness uses barely-perceptible drops for "calm clinical surface." Hover gets a slightly more prominent green-tinted lift (`0 16px 24px -8px rgba(47,93,80,0.18)`) — but never harsh. We bake the soft drop as `--shadow-card`. ### 4. Mint icon-circle on the right of every CTA The live primary button is a 16px-radius forest green pill with a **30×30 mint sage circle** anchored to the right side, containing a right-arrow SVG. Live class: `.primary-button` + `.button-icon-wrap`. The mint circle is the brand's most recognizable component move — every CTA has one, no exceptions. We bake `.btn .icon-circle` into the button system. ### 5. Hero floating "physio card" — 30px-radius mint contact card On the hero of the home page, a 30px-radius mint sage card floats over the hero image area, displaying contact info ("Call us · 04xx xxx xxx") with a small white circle icon. White-on-mint, prominent placement. Captured as `.hero-physio-card`. Specific to clinic / appointment-based services. ### 6. Calm 0.35s transitions (slightly slower than typical) Live transitions: ``` 2 transition: color .35s 1 transition: box-shadow .3s ``` The brand pace is slightly slower than the standard 0.30s — reads as "considered, deliberate" rather than "snappy." We expose 0.35s as `--transition-base`. ### 7. Health-fund logo carousel — Australian-clinic signature The live home page shows a greyscale logo strip of Australian health insurers: HICAPS, BUPA, AHM, HCF, Medibank, Suncorp, Union Health, Work Safe. This is the canonical Australian allied-health "we accept your fund" trust signal — a flat 36px-tall greyscale strip that desaturates on rest, fully colors on hover. Captured as `.fund-strip`. ### 8. Mint dot eyebrow lead Eyebrows on the live site are preceded by a small filled mint sage dot (rendered as an 8px circle with the secondary color). Used universally on hero blocks, section heads, and process-step labels. Captured as `.eyebrow.with-dot`. ### 9. 3-step "How it works" process row Live design shows a 3-step row: **Book → Examination → Treatment Plan**. Each step is numbered and sits in a flat-bordered cell with a top brand-green sweep on hover. We expose this as `.process-steps` (3-up by default; `.process-steps.four` opt-in for 4-up). ### 10. Minimalist medical illustrations The live site uses Freepik-style minimalist line-and-tone illustrations of human back/spine/side-profile views as the iconography for the 8 conditions. These are real assets pulled to `assets/prime-wellness-brand/illust-*.webp`. The brand's photography aesthetic pairs **clinical photography** (chiropractor portraits in a modern clinic) with **diagrammatic illustrations** (back/spine line art) — never stock-medical-pharma photography. --- ## Imagery / Photography **Real assets pulled from live Webflow CDN**: - **Logo**: `pwc-primary-logo-charcoal-mint.svg` (real SVG — "PRIME WELLNESS" wordmark in charcoal with mint mark) — also available as PNG. - **Secondary logo**: `pwc-secondary-logo-charcoal-mint.svg` (compact alt mark). - **Favicons**: 32×32 and 256×256 PNG variants. - **Arrow icon**: real SVG used inside CTA mint circles. - **Hero/portrait shots (5)**: chiropractor in modern clinic, friendly chiropractor in all-black outfit, chiropractor portrait, senior patient stretching, female patient mid-adjustment. - **Clinic-scene shots (3)**: professional physio scene, professional chiro clinic scene, exterior clinic-location shot (1×1 + landscape). - **Medical illustrations (4)**: back view, side profile, alternate side, alternate back — minimalist line-and-tone style for service icons. - **Health-fund logos (10)**: HICAPS, BUPA, AHM, HCF, Medibank, Suncorp, Union Health, Work Safe, plus 2 misc fund assets. - **Feature/badge images (5)**: Evidence-based, One-on-one, Modern (the three pillars), plus vector and icon decorative assets. **Treatment rules**: - Photo tiles default to 4:3 aspect at 20px radius with the soft `--shadow-card` drop. Hover: gentle shine sweep + 3px lift. - Hero photo blocks use a 180deg dark scrim (`--grad-hero-scrim` — 30% → 78% charcoal) over the photo for white-text legibility. - Avatars use 88px circles with a 2px white border and soft shadow. - Health-fund logos sit greyscaled at 36px height in a single strip; full color on hover (interactive trust-signal pattern). --- ## Catalog chrome (`sections.html`) The pattern catalog wrapper UI (`sx-shell`, `sx-header`, `sx-index`, `sx-pattern`, `sx-demo`, `demo-label`) is themed with Prime Wellness tokens: - `sx-header::before` — 4px green-mint gradient strip across the top (signature page-opener) - `sx-index` — flat `--bg-pure` panel; each item gets a brand-mint dot glyph that animates on hover (matches the live eyebrow lead-dot) - `sx-pattern::before` — 80px × 4px brand-green rule above each pattern (brand divider) - `sx-pattern .id` — left-rule 4px brand-green border on a pale mint `--brand-pale` ID chip with 8px corners - `sx-demo` — `--bg-pure` surface, **20px radius (NOT 0px)**, hover-only `--shadow-card-hover` drop - `demo-label` — solid forest-green pill in the upper-left with Inter Tight 600 caps All values flow from `--brand`, `--brand-deep`, `--bg-soft`, `--shadow-card`, `--radius-lg`, etc., so the palette toggle works. --- ## Domain-fit reframings (chiropractic-shaped) These section names map the canonical SECTION-PATTERNS.md vocabulary to Prime Wellness's clinic voice: | Canonical pattern | Prime Wellness reframe | Notes | |---|---|---| | `service-times` | `clinic-hours` | Mon–Sat clinic opening windows | | `ministries-grid` | `conditions-grid` | The 8 named conditions as `.tile` cards | | `staff-profile` | `chiropractor-profile` | Single-practitioner bio (Dr. lead chiro) | | `staff-grid` | `team-grid` | Lead chiro + practice manager + therapist | | `service-area` | `coverage-zones` | St George + Sydney south suburbs (Penshurst, Hurstville, Mortdale, Oatley, Peakhurst) | | `member-quote` | `patient-testimonial` | 5-star Google review with reviewer + condition | | `ways-to-give` | `booking-paths` | Online / Phone / SMS / Walk-in booking | | `events-list` | `recent-results` | Treatment outcomes / case studies | | `beliefs-list` | `process-steps` | "Book → Examination → Treatment Plan" | Plus DS signatures unique to Prime Wellness: - `lora-italic-insert` — single-word italic emphasis inside headings (the brand's typographic signature) - `hero-physio-card` — 30px-radius mint contact-info card overlaid on hero - `fund-strip` — Australian health-insurer logo carousel (HICAPS, BUPA, etc.) - `mint-icon-circle-cta` — 30px mint circle on the right of every CTA button - `before-after` — postural-correction signature (chiro variant of the detailing pattern) - `condition-treatment-matrix` — which treatments map to which conditions - `gloss-rule` — 56px green-mint gradient rule above section heads - `availability` — pill-style clinic-hours cards --- ## Provenance / gaps - **Logo**: real SVG (primary + secondary lockups) pulled from the live Webflow CDN. Files literally named "charcoal-mint" — confirming the brand's own naming. - **Type**: Inter Tight (Google Fonts) + Lora italic (Google Fonts). Both real, free, no proprietary substitution required. - **Photography**: 28 real assets confirmed (see `assets/prime-wellness-brand/`). All pulled from the live Webflow CDN: 5 portraits, 3 clinic scenes, 4 medical illustrations, 10 health-fund logos, 5 feature/badge images, 1 location shot. - **Brand colors**: 100% extracted from production Webflow CSS — `#2f5d50` is unambiguously the brand primary green (literal `--colors--primary-color` in the live theme). `#6fae8a` (mint sage) is also a live token. - **Note**: the brand has a Penshurst clinic but the live site doesn't publish a single explicit street address in the markup we captured — booking happens via the contact form / phone. Demo pages reflect this. - **Note**: the Webflow theme retains "Untitled UI" carry-over color tokens (`--untitled-ui--gray*`, `--untitled-ui--primary*`) that are NEVER painted to surfaces. We ignore them — they're build-tool detritus, not brand colors.