Design System

CTCMPAO Learning Hub

Visual language, colour system, typography, and interactive block components. A living reference for designers and developers.

Brand Colours

Custom brand palette defined in tailwind.config.js. Each colour has light and dark variants for flexible UI composition.

Red Family

brand-redlt

#D9534F

brand-red

#C0272D

brand-reddk

#9B1B20

Teal Family

brand-teallt

#5BA8B8

brand-teal

#20788A

brand-tealdk

#195E6B

Gold Family

brand-goldlt

#FCD34D

brand-gold

#F59E0B

brand-golddk

#D97706

Neutrals

brand-charcoal

#1F2937

brand-charcoallt

#374B5C

brand-cream

#F2E0C4

brand-bronze

#866C40

Tailwind Supplementary Colours

Standard Tailwind colours used alongside the brand palette for semantic states and block styling.

cyan-50

cyan-200

cyan-700

amber-50

amber-300

emerald-50

emerald-300

emerald-500

red-50

red-300

yellow-100

red-100

Audience Colour System

Each audience segment has a dedicated colour that runs through its entire page hierarchy — headers, links, hover states, and accents.

Members

brand-red

Page hierarchy

  • Members Landing Page
  • Practice Corner Index
  • Practice Corner Page
  • Scenario Index
  • Webinar Page
  • Case of the Month Index
  • Case Study Page
Header Links Accents

Applicants

brand-teal

Page hierarchy

  • Applicants Landing Page
  • Resource Pages
Header Links Accents

Patients & Public

brand-golddk

Page hierarchy

  • Patients & Public Landing Page
  • Patient Guide Pages
Header Links Accents

Cross-cutting elements

Some elements are audience-neutral and use a fixed colour regardless of context.

Standard of Practice pills — always teal Sidebar cards — charcoal/gold Footer sections — cream

Colour Combinations

Proven pairings used across the interface. Background + text combinations that meet contrast requirements.

White on Red

Headers, hero sections

White on Teal

Interactive block headers

White on Gold Dark

Patient & public headers

White on Charcoal

Gold accent — sidebar cards

Gold on Charcoal

Labels, section headings

Charcoal on Cream

Footer, related sections

Charcoal on White

Default body text

Cyan-900 on Cyan-50

Info callout

Amber-900 on Amber-50

Warning callout, result panels

Typography

Inter is the primary typeface, loaded from Google Fonts. Body text defaults to text-brand-charcoal.

Heading 1

text-5xl / font-bold — Page titles

Heading 2

text-3xl / font-bold — Section headings

Heading 3

text-2xl / font-bold — Subsection headings

Heading 4

text-lg / font-semibold — Card titles, block headers

Body text — The College of Traditional Chinese Medicine Practitioners and Acupuncturists of Ontario regulates the practice of traditional Chinese medicine.

text-base — Primary body copy

Secondary text — Approved February 2017. Interactive content coming soon.

text-sm / text-gray-600 — Supporting copy

EYEBROW LABEL

text-xs / font-semibold / uppercase / tracking-widest

Monospace — code references, hex values

text-xs / font-mono

Buttons & Links

Interactive elements used across the Learning Hub.

Primary Buttons

Secondary Buttons

Text Links

Members link Applicants link Public link With arrow

Pill Links (Decision Tree Results)

See related case Full standard

Badges & Pills

Used to tag content types, counts, and categories.

Advertising Consent 5 docs 3 cases 2 resources Scenarios Webinar Regulation Demo

Cards

Card patterns used for navigation, content previews, and sidebar modules.

Scenarios

Advertising Scenarios

Work through real-world advertising decisions and test your knowledge.

Demo

Advertising

Approved February 2017

5 docs 3 cases

Interactive Learning Module

Advertising Standard

Explore CTCMPAO's advertising requirements through interactive scenarios.

Sidebar Activity Cards

Scenarios

Advertising Decisions Social Media Compliance

Callout Block

Four semantic styles for inline alerts and notices. Each uses a solid-fill icon with a white symbol.

Info
Members must use their registered name in all advertising. This includes social media profiles, business cards, and website headers.
Warning
Using unregistered titles or credentials in advertising may constitute professional misconduct and could result in disciplinary action.
Success
Your advertising complies with the standard. You may proceed with publication.

Expandable Content Block

Collapsible sections for detailed content. Uses brand-teallt background with Alpine.js toggle.

The advertising standard ensures that all advertising by members is accurate, verifiable, and does not mislead the public. It protects patients by setting clear boundaries on what claims practitioners can make about their services.
Members are expected to advertise their services in a manner that is professional, truthful, and verifiable. Advertising must not contain testimonials, comparative claims, or guarantees of outcomes.

Cross-Reference Block

Links to related pages or external resources. Charcoal background with gold icon accent.

Advertising Guidelines (PDF)
Complete advertising requirements for registered members
CTCMPAO Official Website (opens in new tab)
External link to the college's main website

Step-by-Step Block

Numbered sequential steps with a vertical connector line. Used for procedures and guided walkthroughs.

1

Observation

Observing the patient's general appearance, complexion, tongue, and demeanour. The practitioner notes skin colour, body shape, and movement patterns.
2

Inquiry

Asking about symptoms, medical history, lifestyle, diet, sleep patterns, and emotional state. A structured interview covering the "Ten Questions" of TCM diagnosis.
3

Palpation

Taking the pulse at the wrist. TCM pulse diagnosis involves assessing multiple positions and qualities, along with palpating areas of the body.

Treatment Modality Block

Cards for individual treatment types. Charcoal header with mortar & pestle icon when no image is provided.

Acupuncture

The insertion of fine, sterile needles into specific points on the body. Used to regulate the flow of qi along pathways called meridians.

Moxibustion

The burning of dried mugwort near or on acupuncture points to warm and stimulate the area. Produces a gentle, penetrating warmth.

Cupping

Glass or silicone cups placed on the skin to create suction. Used to promote blood flow, relieve muscle tension, and clear stagnation.

Decision Tree Block

Interactive choose-your-scenario blocks. Users select an option and see a contextual result with regulation references and cross-links.

A patient asks you to post their testimonial on your clinic website. What should you do?

Choose a scenario:

You selected: Post it — the patient gave permission

Not Permitted

Even with patient consent, testimonials are prohibited in practitioner advertising. The standard explicitly forbids the use of patient endorsements.
See related case

You selected: Decline politely and explain why

Correct Approach

You should thank the patient for their kind offer but explain that the college's advertising standard does not permit the use of testimonials. Suggest they leave a review on a third-party platform instead.

Scenario Quiz Block

Multiple-choice knowledge checks with instant correct/incorrect feedback and explanations.

Knowledge Check

A practitioner posts on Instagram: "Acupuncture cures migraines! Book now for 50% off your first visit." Which part of this post violates the advertising standard?

Select the best answer:

Not quite. While discounts require careful framing, they are not outright prohibited. The main violation here is the unsubstantiated cure claim.
Correct! The word "cures" is an unsubstantiated health claim. Members must not guarantee outcomes or imply that a treatment can cure a condition.
Incorrect. Social media advertising is permitted — members may promote their services on any platform, provided the content complies with the standard.

Accessibility

Key accessibility patterns used throughout the Learning Hub.

Focus Ring

3px solid teal with 2px offset on all focusable elements.

Skip Navigation

Hidden link revealed on focus, jumps to #main-content.

<a href="#main-content" class="skip-nav sr-only ...">

ARIA Labels

Interactive blocks use role, aria-label, and aria-expanded for screen reader support.

Decorative Icons

All SVG icons use aria-hidden="true" to prevent screen reader noise.