Cairn

Best for

• Canadian medical cannabis clinics, written to the Cannabis Regulations and provincial college standards: no charge for the assessment or medical document, the family doctor kept in the loop, reviews on a calendar, no ties to any seller (see "Medical cannabis clinics in Canada")
• Anyone whose service is built over time, in stages: mountain guides (Ridgeline), financial planners (Stillwater), physiotherapy and rehab, coaching, long-term care plans, renovation planners, training programs
• Audiences: people starting something that takes months, who want to see the whole path before the first step

Less suited to: quick transactions and retail (Tableau, Catalogue, Pebble); anything loud or nocturnal (Marquee, Vigil); paperwork someone else decides (Charter).

Personality and voice

Steady and unhurried, like a good guide: here's the path, here's where we'll stop and check, and here's what we won't do. Never rushes, never oversells.

• Headlines: "Care that's built one step at a time." · "Five stones, in order." · "Twelve months, marked out." · "Your document, their checks."
• Buttons: "Book an assessment" · "How we work" · "Plan a trip" · "Book a first meeting"
• Microcopy: "No charge to you." · "If it isn't right, we explain why." · "The same clinician, every time."
• Words to avoid on a cannabis clinic: "qualify", "approved", "fast", "same-day", "relief", "natural", anything about what cannabis treats, product, strain or seller names, discounts.

Colour

Measured contrast (WCAG): ink on paper 14.3:1 · muted on paper 5.5:1 (on well 5.0:1) · lake on paper 6.2:1 (on well 5.6:1, on its soft fill 5.5:1) · white on lake 6.8:1 · ink on the stones 6.2:1 or better · ember 4.8:1. Polar night: ink 15.6:1 · muted 7.0:1 (on card 6.3:1) · lake 9.3:1 · text on lake 8.2:1 · stone labels 5.4:1 or better.

No green, leaves or smoke on a cannabis clinic. The stones and the contours are the picture.

Typography

• Display: Young Serif 400: sturdy, warm, a little old-fashioned.
• Body: Onest 400–600: clear and friendly.
• Labels: Reddit Mono 500: eyebrows, stone captions, months.

The signature move: the plain fact at the end of every headline is in lake blue, underlined with a wavy contour line.

Layout

• 1200px wrap, gutter max(20px, 4vw). A quiet plain-words bar on top says the most important promise; a sticky header with a hairline.
• Hero: copy left, the cairn right, contour lines drifting behind. Then the path beside the plaques, the year of care, three cards, a FAQ and a slate closing card with its own contours.

Shape

• Soft and weathered: --r-s 10px, --r-m 18px, --r-l 28px, pill buttons.
• Stones are uneven ellipses (50% 50% 46% 54% / 62% 58% 42% 38%) with a soft inner shade. Plaques have an engraved double border.
• The brand mark is three stones, the top one lake blue.

Motion language

• The cairn: when it comes into view the stones drop from above and settle, bottom first, 330ms apart, each with a small overshoot.
• The contours drift and turn very slowly (90s, back and forth).
• The year of care: the line fills across the twelve months (2.2s) and each visit's stone lands as the line reaches it.
• Reveals: 16px rise and fade, 650ms. The phone menu drops in.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, default from prefers-reduced-motion). Calm shows the cairn built, the year filled and the contours still.
• Polar night switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Stones, contours and the year. Landscape photography works on the examples (a ridge, a harbour) if it's quiet and wide. On a cannabis clinic: no plants, leaves, smoke, products or people using cannabis, and no stock photos of smiling doctors.

Signature components

• .cairn[data-cairn] › ol › li.stone (first is the bottom; --w, --tilt, --c; .top for the lake stone) › b + small.
• .topo: an empty box that cairn.js fills with contour lines; data-hills ("x,y;x,y" in percent), data-levels, data-seed.
• .year[data-year] with data-unit (mo or wk) and data-marks, a JSON list of {"m": 0, "t": "Assessment", "c": "lake"}; then .year-legend. On phones the marks are also listed under the track.
• .path › li.you / li.us › h3 + .who + p.
• .plaque / .plaque.lake (.k, b, p), .card / .card.no, .facts, .notice, .plainbar, .faq, .licence, .close-card (--close-em).

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu (links with data-no); Escape, outside click and links close it; Tab stays inside while open.
• Current page: aria-current="page" (a lake-soft pill).
• Inner pages: .page-head (with a .topo), .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"]; form[data-template].
• Tiles: .choices › label.choice > input + span > b + small. Segmented control: .seg (pills; button[aria-pressed] with data-filter/data-value, or label > input + text).
• Gate: [data-gate] with button[data-show="panel-id"].
• Slider, switch, tables, layout: input.range, .switch[role=switch] (fires switch with detail.on), .table / .table.stack, .r, .grid-2.lean.
• Helpers: Cairn.calm(), Cairn.refresh(root).

Medical cannabis clinics in Canada

The federal rules decide what a medical document is; the provincial colleges decide how clinicians may provide one. What we checked, October 2026:

• Cannabis Regulations, Part 14: a health care practitioner may provide a medical document for someone under their professional treatment. It states a daily amount in grams and a period of use of no more than one year (s. 273). The patient registers with a federally licensed seller, who needs the original document and checks it with the practitioner (ss. 279 to 282).
• British Columbia (CPSBC standard, v3.4, April 2026): no charge to the patient or producers for the medical document or the assessment behind it; an ongoing treating relationship (or an agreement with the family doctor or nurse practitioner); a full assessment with a PharmaNet review and a substance-use risk screen; reassessment every three to six months; a warning about driving; no selling or dispensing.
• Manitoba (CPSM standard): no fee for the form or related assessment; no legal or financial involvement with licensed producers or dispensers, and no patient visits on their premises.
• Cannabis Act promotion rules: promote the clinic's care, never cannabis, a product or a seller.

Copy rules the style builds in for these clinics: "$0 to you" where the college says so; no ties to, or recommendations of, any seller; no promise of a document; no health claims; booking that asks about the family doctor and records, not symptoms; the emergency number in the footer.

These notes are design guidance, not legal advice. Other provinces have their own standards; check them before launch.

• Cannabis Regulations (SOR/2018-144), Part 14
• CPSBC practice standard: Cannabis for Medical Purposes
• CPSM standard of practice: Authorizing Cannabis for Medical Purposes

Do and don't

• Do show the whole path before the first step.
• Do mark the reviews on the year, not just the first visit.
• Do put what you won't do on the page.
• Don't use the contour colour for text: it's decoration.
• Don't stack more than six stones; label each in a few words.
• Don't imply a document before an assessment.

Accessibility

AA contrast throughout (measured above); contours are decoration, hidden from assistive tech. Skip link and a 3px focus ring. The cairn is a labelled figure with an ordered list (read bottom to top); the year's track has a full text label, and on phones its marks are listed in text. Forms label every field, mark errors with aria-invalid and say what's missing in an alert. Tables stack on phones. Responsive to 360px; tested with motion on and off, in Birch and Polar night.

How to make it yours