Web Brand Guide
Colours, typography, and UI components for CanFASD web properties. All values are WCAG 2.2 Level AA compliant.
Brand
6.3:1 on #002A3A ✓ dark bg only
#643335 text: 6.4:1 ✓
Use instead of #C69214 on light bg
Use instead of #888 for small text
Functional
Tokens
Link
Info
Success
Warning
Alert / Danger
Neutral
Highlight
Accessible gold
Caption
Design Notes
Brand Colours
- There are eight baseline colours that make up the core CanFASD style guide.
- Goldenrod (#C69214) may only be used as text on the navy background — it fails to meet WCAG 2.2 AA contrast ratios on white and light surfaces.
Functional Colours
- Colours for message boxes, callouts, and status indicators. Each pair (background + text) is pre-validated — always use them together.
- Goldenrod (#C69214) is used as a border/icon accent only in warnings, never as text on a light background.
Colour Tokens
- All values derived from brand undertones.
- Each token name maps to a CSS custom property (see Code).
Fonts
Heading font — web
Century Gothic
Heading H1
Heading H2
Heading H3
Body font — web
Lato
Regular body text for all CanFASD web properties. Clear, accessible, and highly legible at all sizes.
Bold weight — used for labels, buttons, and emphasis.
Italic — used for quotes and captions.
Scale
| Level | Class / element | Specimen | Size | Weight | Colour |
|---|---|---|---|---|---|
| H1 | h1.canfasd-heading |
Page title | 2rem | 700 | #002A3A |
| H2 | h2.canfasd-heading |
Section heading | 1.5rem | 700 | #002A3A |
| H3 | h3.canfasd-heading |
Sub-heading | 1.25rem | 700 | #643335 |
| H4 | h4.canfasd-heading |
Card title | 1.125rem | 700 | #643335 |
| Body | p, li, td |
Body paragraph text | 1rem | 400 | #3F3F3F |
| Caption | .canfasd-caption |
Small caption text | 0.875rem | 400 | #595959 |
Buttons
All buttons have a minimum height of 44 px (WCAG 2.5.8 target size). Focus ring: 3 px goldenrod outline + 5 px white halo.
Primary actions
Outline variants
Semantic action buttons
Links
- All body text links must be underlined (WCAG 1.4.1).
- Link colour (#005B8E) must be visually distinct from surrounding body text.
- Visited links use burgundy.
- External links use an arrow ↗ indicator and open in a new tab.
- Body text link — Find a diagnostic clinic by Province/Territory
- Visited link — Guidelines for Assessing and Diagnosing FASD (English)
- On dark background — Visit Website↗
Badges & tags
Filled pills — labels and categories
Outlined tags — status indicators
Icons
Icon backgrounds for SVG or font icons. White icon on dark fill — all pass at 4.5:1 or better.
#002A3A#643335#006494#2A7A4B#C69214 icon/bg only#A8001A#303e4e#EDEDED + #3F3F3FDark + Gradient
Navy + burgundy — two-column layout
Vision
All Canadians are engaged and united with awareness, evidence and knowledge and are effectively addressing the complexities of FASD.
Mission
CanFASD supports Canada's families, caregivers, individuals with FASD, practitioners and leadership across all sectors and at all levels, in addressing the extraordinary complexities of FASD.
Navy — single-column hero panel
Canada FASD Research Network
Find a Diagnostic Clinic
Use the map or search below to find an FASD diagnostic clinic near you. Referral criteria and wait times vary by clinic — contact the clinic directly to confirm.
Web blue — supporting content panel
Did you know
FASD is the most common developmental disability in Canada
It is estimated that 4% of Canadians live with FASD. Early diagnosis and appropriate supports can make a significant difference in outcomes for individuals and their families.
Highlights
Live example — search highlight
There is currently not a standardized, validated identification tool for FASD, although the diagnostic criteria — facial features, significant brain domain impairment, and prenatal alcohol exposure — are well-established.
Live example — term highlight
There is currently not a standardized, validated identification tool for FASD, although the diagnostic criteria — facial features, significant brain domain impairment, and prenatal alcohol exposure — are well-established.
Colour tokens
background: #E8F3F8 (--hl-term-bg)
color: #003D5C (--info-text)
Contrast: 8.2:1 ✓
Usage rules
- For defined terms and glossary entries
- Pair with a tooltip or inline definition
- Can be hardcoded in page content
- Use
<mark class="highlight-term">
Side by side comparison
Design Notes
Typography
- DO NOT: Use Calibri and Garamond on web. They are print/Office fonts only.
- Use Lato for all web body text.
- Use Century Gothic for all brand appropriate header content and page names.
- Eyebrow label:
#C69214(gold) — 6.3:1 on navy ✓ · usedp-eyebrow - Main heading:
#ffffff— 18.3:1 on navy ✓ · usedp-heading - Body text:
rgba(255,255,255,0.88)— usedp-body - Subtle body / subtitle:
#c8d8e0— 8.1:1 on navy ✓ - Links on dark bg:
#C69214— 6.3:1 on navy ✓ - Meta / footnote:
rgba(255,255,255,0.5)— decorative use only
Highlights
- Two highlight styles are available for inline text. Each has a distinct semantic purpose — do not use them interchangeably.
- Used to mark text that matches a user's search query. Applied dynamically via JavaScript — never hardcoded in content.
- Key term highlight: Used to draw attention to defined terms, glossary entries, or concepts that have a tooltip or definition available. Can be hardcoded in content.
- DO NOT: Use highlight-search for static defined terms, or highlight-term for search matches.
- DO NOT: Use either style purely for decorative emphasis — use bold for emphasis instead.
Contrast
- Dark gradient panels for hero sections, callout blocks, vision/mission statements, and prominent content areas.
- All text meets WCAG AA on each background.
Colour tokens
background: #FFF4CC (--hl)
color: #3F3F3F (--dk-grey)
Contrast: 8.6:1 ✓
Usage rules
- Applied by JS only — never static markup
- Marks exact query matches in search results
- Remove highlights when query is cleared
- Use
<mark class="highlight-search">
Content cards
Bordered card containers for clinic listings, resource items, and general content blocks. All card variants use white backgrounds by default — background tints are optional.
Accent border variants
Left-border colour communicates the card's semantic role at a glance.
Resource
FASD Practice Guidelines for the Criminal Justice System
Guidance for lawyers, judges, and corrections staff working with individuals with FASD.
Clinician tool
Screening & Referral Pathway
A step-by-step guide for primary care providers to identify and refer individuals for FASD assessment.
Tip
Early Identification Makes a Difference
Research shows that diagnosis before age 6 is associated with significantly better outcomes for children with FASD.
Online course
Introduction to FASD for Educators
A free, self-paced course for teachers and education assistants supporting students with FASD in the classroom.
Accepting referrals
BC Children's Hospital — FASD Clinic
Comprehensive assessment for children and youth up to age 18. Referral from a health care provider required.
Waitlist closed
Northern Regional FASD Clinic
This clinic is not currently accepting new referrals. Contact your regional FASD network for alternative options.
Background tint variants
Combine with an accent border for stronger semantic signal.
Featured
CanFASD Research Digest
Monthly summaries of the latest FASD research, curated for practitioners and policymakers.
Information
What is an FASD Assessment?
A multidisciplinary assessment evaluates an individual across ten neurodevelopmental domains using standardized measures.
Confirmed
Referral Submitted
Your referral has been received. A clinic coordinator will contact you within 5–10 business days to discuss next steps.
Note
Eligibility May Vary
Referral pathways differ by clinic, province, and age group. Confirm current criteria directly with the clinic before submitting.
Neutral surface card
Default card for non-semantic content — no colour connotation.
Province
Alberta
Alberta has 3 diagnostic clinics and 12 FASD support network service providers across the province.
CSS variables
Copy this block into your theme's :root or WPCode custom CSS.
:root
/* CanFASD Web Brand Tokens */
:root {
/* ── Core brand ── */
--navy: #002A3A;
--burgundy: #643335;
--gold: #C69214;
--gold-safe: #7a5c00;
--web-blue: #303e4e;
--lt-grey: #EDEDED;
--dk-grey: #3F3F3F;
/* ── Link ── */
--link: #005B8E;
--link-hover: #003f56;
--link-visited: #643335;
--link-dark: #C69214;
/* ── Info ── */
--info: #006494;
--info-hover: #004d70;
--info-bg: #E8F3F8;
--info-bg-mid: #cce4f0;
--info-border: #b5d4f4;
--info-text: #003D5C;
/* ── Success ── */
--success: #2A7A4B;
--success-hover: #1f5c38;
--success-bg: #E8F5EE;
--success-bg-mid: #c8ebd6;
--success-border: #a3cfb6;
--success-text: #1A4D30;
/* ── Warning ── */
--warn-bg: #FEF8E6;
--warn-bg-mid: #fde99c;
--warn-border: #e8c96a;
--warn-text: #5D4200;
--warn-text-dark: #3d2b00;
/* ── Alert / Danger ── */
--danger: #A8001A;
--danger-hover: #7d0013;
--danger-bg: #FDECEA;
--danger-bg-mid: #fac9cc;
--danger-border: #f5c2c7;
--danger-text: #6B0011;
/* ── Neutral ── */
--surface: #fafbfc;
--neutral-bg: #F0F4F6;
--neutral-bg-mid: #dce4ea;
--border: #d0d7de;
--neutral-mid: #8fa3b0;
--neutral-text: #1F2D3A;
/* ── Highlight ── */
--hl: #FFF4CC;
--hl-mid: #fde99c;
--hl-border: #e8c96a;
--hl-term-bg: #E8F3F8;
--hl-term-mid: #cce4f0;
--hl-selection: #b5d4f4;
/* ── Accessible gold ── */
--gold-safe-hover: #5a4400;
--gold-tint: #FEF8E6;
--gold-tint-mid: #fde99c;
--gold-border: #e8c96a;
/* ── Caption / UI text ── */
--caption: #595959;
--placeholder: #767676;
--disabled-text: #949494;
/* ── Typography ── */
--sans: 'Lato', Arial, Helvetica, sans-serif;
--serif: 'Century Gothic', 'Futura', 'Trebuchet MS', 'Lato', Arial, sans-serif;
}Font stack & import
Add the Google Fonts import to your site header via WPCode or functions.php.
<head><link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">Source brand
The following is drawn directly from the official CanFASD Branding Document. This web guide operationalizes these values for digital/screen contexts.
Brand story
Vision
All Canadians are engaged and united with awareness, evidence and knowledge and are effectively addressing the complexities of FASD.
Mission
CanFASD supports Canada's families, caregivers, individuals with FASD, practitioners and leadership across all sectors and at all levels, in addressing the extraordinary complexities of FASD. The Network does this through facilitating and sustaining a national research collaborative focused on the domains of FASD prevention, intervention and diagnosis, and by disseminating research-based knowledge about FASD to those who need it.
Values
- Undertake, coordinate and facilitate research that is meaningful and applicable to families, governments, service providers and stakeholders
- CanFASD works collaboratively with partners and stakeholders
- Use appropriate language when communicating about FASD, recognizing the sensitivities and complexities of FASD
- CanFASD recognizes and values the critical importance that research contributes to informing policy and program development and delivery
- CanFASD engages Canada's diverse cultural groups as partners in working to achieve the vision and goals of the Network
Source colours
Colours as specified in the official brand document, including CMYK and RGB values for print production.
CMYK 100, 47, 22, 82
CMYK 30, 85, 59, 70
CMYK 6, 35, 99, 18
CMYK 82, 65, 46, 45
CMYK 8, 6, 7, 0
CMYK 47, 38, 36, 17
CMYK 68, 61, 60, 48
Source typography
Primary typefaces
Century Gothic
Headings, accent text, social graphics. Chosen for a modern, approachable appearance.
Lato — Web Font
Official CanFASD web font. Used for all body text on digital properties.
Print / Office typefaces
Calibri
Modern and approachable. For large text bodies — issue papers, PowerPoint. Minimum 10 pt.
Garamond
Classic and established. For printed documents — letters to government, progress reports. Minimum 11 pt.
Logo usage guidelines
Primary logo rules
- Primary option is always the tri-coloured logo
- Maintain proportions when resizing — never stretch or distort
- Minimum print size: 3.5 cm × 1.12 cm
- Do not add effects (outlines, shadows, filters)
- Do not place over a busy image — text must remain legible
- Do not rotate the logo
- Always maintain buffer space (clear space) around the logo
- Use all-white full logo on dark backgrounds
When to use alternatives
- Secondary logo — only when the full logo does not fit, e.g. alongside other organizations' logos
- Submark — subsequent pages where the full logo already appears; social media profiles; document icons
Brand buzzwords
Core vocabulary for CanFASD communications, campaigns and messaging.