# Chestermere Mobile Massage — Design System Brand & product design system for **Chestermere Mobile Massage Inc.**, a professional mobile massage therapy and workplace-wellness service for Chestermere, Calgary, Langdon, Conrich and surrounding Alberta communities. Registered therapists travel to the client's home, office or event — bringing the table, oils and a calm, clinical-grade experience. > **Positioning:** *Massage that comes to you.* Trustworthy, registered, calming. The brand sits at the intersection of **clinical health care** and **spa relaxation** — professional but warm, never clinical-cold and never woo-woo. ## Sources used - `assets/logo-emblem.png` — supplied 512×512 brand logo (lake emblem + serif wordmark). The full colour palette in this system was sampled directly from it. - A supplied UI style reference (an unrelated "ILABS" hero) establishing the **two visual asks**: generously **rounded corners** and **frosted-glass panels with a soft drop shadow**. Only that *treatment* was adopted — none of its content/branding. - No codebase, Figma file, or existing website was provided. Product surfaces here (the marketing UI kit) are **original** recreations built on the brand, not reproductions of an existing site. Attach a site/codebase to make the UI kit match production exactly. --- ## CONTENT FUNDAMENTALS — how the brand writes - **Voice:** warm, reassuring, professional. The reader is a busy person who needs relief — speak to comfort and ease, not luxury or indulgence. - **Person:** address the client as **"you"**; the business is **"we" / "our therapists"**. ("We bring everything — you just clear a little space.") - **Tone:** calm and plain-spoken. Short, confident sentences. No hype, no exclamation-mark spam, no pressure tactics. - **Casing:** Sentence case for headings and body. **Wide tracked UPPERCASE** only for short eyebrow labels (echoing "MOBILE MASSAGE · INC.") — never for full sentences. - **Emoji:** not used in product copy or marketing voice. (Emoji glyphs appear only as placeholder service medallions in specimen cards and should be swapped for real icons — see Iconography.) - **Numbers & specifics:** be concrete and honest — durations ("60 min"), prices ("$110"), service areas (named towns), "registered massage therapist (RMT)". Avoid invented stats or filler. - **Sample phrases:** - "Massage that comes to you." - "Registered therapists. Your space, your schedule." - "Book in 60 seconds — we handle the rest." - "Workplace wellness we bring to your team." - **Avoid:** "pamper", "indulge", "treat yourself", "luxury escape" (too spa-resort); medical over-claims ("cures", "heals"). Stay in *relief, ease, professional care*. --- ## VISUAL FOUNDATIONS **Palette** — sampled from the logo: a single blue story running from deep **lake-navy `#0a2e6e`** (the wordmark) through **royal `#2563b5`** (primary action) to **sky `#5ba8dc`** and **cyan `#b3ddf0`** (the emblem highlight). Neutrals are **cool greys** tuned slightly blue so nothing fights the brand. Status colours are deliberately **desaturated** to stay calm. Use the semantic aliases (`--brand`, `--text-strong`, `--surface-page`…) in product UI; reach for raw ramps (`--blue-600`) only when defining new patterns. **Type** — **Cormorant Garamond** (display serif) for headings, echoing the classic Roman serif of the CHESTERMERE wordmark; **Mulish** (humanist sans) for all UI and body; Mulish in **wide tracked caps** for eyebrows. *(Both are Google Fonts substitutes — see Caveats.)* **Backgrounds** — soft, airy, watery. Page wash is a cool off-white `--surface-page (#eef4f9)`; hero/brand sections use the **lake gradient** (`navy → royal → sky`, 135°). Faint cyan frost tints sit behind glass panels. No photographic full-bleeds shipped (none supplied) — imagery, when added, should be **warm, soft-focus, natural-light** wellness photography, never cold or grainy. **The signature surface — rounded + glass.** Corners are generous (controls `18px`, panels `24px`, hero cards `32px`, pills fully round). Two card treatments: - **Glass** (`.cmm-glass` / ``): `rgba(255,255,255,.62)` + `backdrop-filter: blur(18px)` + a 1px white inner-lit border + `--shadow-glass`. Use over tinted/gradient sections. - **Solid** (`.cmm-card` / ``): white, hairline `--border-subtle`, `--shadow-md`. The default. **Shadows** are always **tinted with brand navy** (`rgba(10,46,110,…)`), never neutral black — soft, wide, low-opacity for the spa calm. A 5-step scale (`--shadow-xs → --shadow-xl`) plus `--shadow-glass` and a white `--shadow-inset` top highlight. **Borders** are hairline and low-contrast (`--border-subtle/-default/-strong`), expressed as navy at 10–28% alpha so they read as soft edges, not hard lines. **Motion** — gentle and quick. Hover = a `-1px` lift + slightly stronger shadow; press = settle down `+1px` with a tiny `0.99` scale. Transitions `140–360ms` on `--ease-out` (a soft over-damped curve). No bounces, no looping decorative animation. **Hover / press states** — buttons lift on hover and deepen their shadow; cards (when `hoverable`) lift `-3px` to `--shadow-xl`; the press state always nudges down rather than changing colour drastically. Focus shows a 4px soft `--focus-ring` (royal at 45%). **Transparency & blur** are reserved for the glass surface and glass buttons/over-image controls — used intentionally, not everywhere. --- ## ICONOGRAPHY - **No icon assets were supplied.** The recommended system is **[Lucide](https://lucide.dev)** — clean, rounded-cap, ~2px stroke line icons that match the soft, calm, rounded aesthetic. Link from CDN (`https://unpkg.com/lucide-static`) or `lucide-react`. *(This is a substitution — flagged below.)* - **Style rule:** outline / line icons only, ~2px stroke, rounded caps & joins, drawn on a 24px grid. Tint with `--brand` or `--text-muted`; never multicolour or filled-glyph. - **Emoji** are **not** part of the brand. The 🌿💪🏢 glyphs used as service medallions in some specimen/UI-kit demos are **placeholders** — replace with Lucide icons (e.g. `leaf`, `dumbbell`, `building-2`, `hand`, `heart`, `calendar`, `map-pin`, `clock`) in real work. - **The logo** (`assets/logo-emblem.png`) is the one brand mark — the lake emblem with the light-blue wing/swoosh. Use it on light backgrounds as-is; on dark, pair the emblem with the serif wordmark set in Cormorant (see the Logo card). Do **not** recolour or redraw it. --- ## INDEX — what's in this system **Root** - `styles.css` — the single entry consumers link; `@import`s every token + base file below. - `readme.md` — this guide. · `SKILL.md` — portable Agent-Skill manifest. **`tokens/`** — `colors.css` (brand ramp + cool neutrals + semantic aliases), `typography.css` (families, scale, fonts via Google import), `spacing.css` (4px grid + layout), `effects.css` (radii, navy-tinted shadows, glass, motion), `base.css` (resets + `.cmm-glass` / `.cmm-card` / `.cmm-eyebrow` / gradient utilities). **`components/`** — reusable React primitives (namespace `ChestermereMobileMassageDesignSystem_15f603`): - `core/` — **Button**, **IconButton**, **Badge**, **Card** (solid/glass/muted/brand) - `forms/` — **Input**, **Switch**, **Checkbox** - `feedback/` — **Avatar** - `navigation/` — **Tabs** - `brand/` — **ServiceCard** (the signature offer card) **`guidelines/`** — foundation specimen cards (Colors, Type, Spacing/effects, Brand) shown in the Design System tab. **`ui_kits/`** — `marketing/` original marketing-site recreation (home / services / booking). **`assets/`** — `logo-emblem.png`. --- ## CAVEATS - **Fonts are substitutes.** Cormorant Garamond + Mulish (Google Fonts) were chosen to match the logo lettering because no brand font files were supplied. **Please confirm or send the real brand fonts.** - **Icons are a substitution.** Lucide is recommended in place of a supplied set. Confirm, or send the brand's icon assets. - **No product/codebase/Figma was provided** — the UI kit is an original, on-brand recreation, not a copy of a live site. Attach the real site to make it production-accurate.