static physiotherapy center website Design System

Use this package when future work needs to stay faithful to the real Movement Rehabilitation Centre website rather than falling back to a generic healthcare aesthetic.

Contents

• README.md for the full package guide and review workflow
• DESIGN.md for canonical visual, layout, motion, and voice rules
• colors_and_type.css for the preserved palette, font binding, and reusable classes
• preview/ for focused inspection cards
• assets/ for the preserved wordmark, footer art, mobile reference, PDFs, and project reference images
• build/ for preserved runtime icons and favicons
• fonts/ for SouvenirStd-Light.otf
• source_examples/ for the original homepage HTML and CSS snapshots preserved outside context/
• ui_kits/app/ for a runnable modular browser kit showing the design system applied to a maintainable interface
• provenance-notes.md for evidence traceability and limits

Source context

This package is grounded in the actual Movement Rehabilitation Centre source, not inferred from category defaults.

• GitHub intake note: context/github/jshchn-movementrehab.md
• Local intake note: context/local-code/movementrehab.md
• Preserved source files: source_examples/index.html, source_examples/stylesheet.css
• Linked source folder: C:\Users\jocha\Documents\movementrehab
• Source repository URL: https://github.com/jshchn/movementrehab

The strongest visual evidence is the source stylesheet, the preserved SouvenirStd-Light font, the homepage art in assets/sizeoflogo-teal.png and assets/sizeoffooter-teal.png, the mobile reference in assets/sizeofmobile.png, and the runtime icons preserved in build/.

When to use this skill

Use this package for:

• refreshes or extensions of the Movement Rehabilitation Centre website
• brochure-style physiotherapy or rehabilitation website work that should stay calm, serif-led, and source-backed
• tasks that need the original wordmark, footer art, PDFs, runtime icons, or preserved font
• review or reuse workflows where future agents should inspect previews, source examples, and a modular UI kit before generating artifacts

Do not use it for dark dashboards, dense SaaS admin tools, neon health-tech landing pages, or brand directions that conflict with the preserved source evidence.

How to use

1. Read README.md for the product overview, package map, and preview manifest.
2. Read DESIGN.md for the authoritative rules on color, typography, spacing, layout, components, motion, and voice.
3. Load colors_and_type.css before writing new UI so the preserved font and tokens are active.
4. Review preview/colors-primary.html, preview/colors-theme-light.html, preview/typography-specimens.html, and the other preview cards to understand the system in isolated slices.
5. Reuse real preserved files from assets/, build/, and fonts/ instead of recreating approximations.
6. Inspect source_examples/index.html and source_examples/stylesheet.css when you need the original composition or behavior.
7. Start from ui_kits/app/ when you need a modular, browser-runnable foundation that already composes the key surface patterns into one interface.

Design system highlights

• Source-backed palette: the system keeps #b2d8d8, #dbeded, #272525, and the sampled accent teal from preserved imagery
• Preserved brand typography: fonts/SouvenirStd-Light.otf is bound in colors_and_type.css and used throughout previews and the UI kit
• Calm product posture: open canvas, rounded resource pills, long-form reassuring copy, and minimal interaction chrome
• Real preserved artifacts: wordmark art, footer art, mobile reference, PDFs, and runtime icons are carried outside context/ for direct reuse
• Focused reviewability: preview cards isolate colors, theme application, typography, spacing, links, panels, and brand assets
• Runnable package example: ui_kits/app/index.html mounts modular components so future agents can inspect the system in a maintainable composed interface