Web Brand Guide

Light background headings — for use on all standard pages and headings, no underline.

Dark background headings — for use within navy and burgundy hero panels, no underline.

Site navigation is Capitalized and uses hover, border and bold effects in place of underline to indicate interaction and page location.

NOTE: The dropdown and sidebar menus are designed to work on white backgrounds as well as colour matched.

Click me:

Caption

Highlight

1.1 Brand Foundation

1. Start with the core brand colours: navy for primary structure, burgundy for clinical/provider emphasis, web blue for neutral navigation surfaces, and goldenrod for accent, focus, and selected states.
2. Map every colour decision to an existing CSS custom property before introducing a new value.

1.2 Goldenrod Usage

1. Use goldenrod #C69214 as text only on dark navy surfaces, where it passes contrast. On light surfaces, use accessible gold text #7A5C00 or #5A4400.
2. Use raw goldenrod #C69214 on light surfaces only as an accent border, icon fill, focus ring, or selected-state marker, and pair it with a text label when it carries meaning.
3. Use lighter goldenrod #E8C96A on burgundy dark surfaces for better readability and consistency with dark typography standards.

1.3 Functional Colour Pairs

1. Keep functional colour systems together: info, success, warning, alert, and neutral each require their tint, border, and text tokens to stay paired.
2. Use caption, placeholder, disabled, and body-text greys only for their named roles; do not promote disabled text or placeholder grey to required content.

1.4 Highlights

1. Use highlight colours semantically: yellow is temporary search-match highlighting; blue is persistent defined-term highlighting.
2. Use darker hover fills for highlight examples without adding outlines around the marked text.

2.1 Font Roles

1. Use Century Gothic for headings and Lato for body text on web. Calibri and Garamond are print/Office fonts only.
2. Set type hierarchy by role: H1 for page titles, H2 for major sections, H3 for subsections, H4 for compact card titles, body for reading text, caption/meta for supporting information.
3. Map each type and text-colour decision to the documented CSS custom properties before adding new text styles.

2.2 Dark Panel Typography

1. Use dark gradient panels for hero sections, callout blocks, vision/mission statements, and prominent navigation cards. Pair them with the dark-panel tokens instead of ad hoc opacity values.
2. Use dark-panel text in this order: eyebrow #C69214, main heading #FFFFFF, body rgba(255,255,255,0.88), subtitle #C8D8E0, and meta rgba(255,255,255,0.5) for decorative support only.
3. Use #E8C96A rather than raw goldenrod for gold text on burgundy panels.

2.3 Links and Text Indicators

1. Use standard body links with underline. Use no-underline interaction only in navigation, buttons, meta chips, and card actions where border, hover, focus, and/or bold states supply the interaction cue.
2. Use the external-link arrow as text, not an icon glyph, and only on links that leave the current site or open an external resource.

2.4 Search and Term Highlights

1. Use highlight-search only for temporary JavaScript search matches. Remove it when the search query clears.
2. Use highlight-term only for defined terms or glossary concepts, and pair it with a definition, tooltip, or nearby explanatory context.
3. Use <strong> for emphasis; do not use highlight styles for decorative emphasis.

3.1 Interaction Basics

1. Start with semantic structure: use real buttons for actions, real links for navigation, and appropriate headings, lists, tables, and landmarks.
2. Keep all interactive buttons at or above 44 px height. Adjust padding or wrapping rather than reducing the target size.
3. Use the global focus style: 3 px goldenrod outline plus white offset halo. Do not remove it for custom buttons, tabs, cards, or form controls.
4. Use body-link underlines in prose. Use hover/bold/border states instead of underline only for navigation menus, tabs, chips, button-like links, and card action rows.

3.2 Badges, Tags, and Chips

1. Use pills for compact status/category metadata, tags for card and directory metadata, and meta chips for dark-surface system metadata only.
2. Keep filled and outlined pills/tags the same size, and use inverse hover states without layout shift.

3.3 Icons

1. Use semantic icons without square backgrounds only when the shape itself carries meaning, such as warning, map, route, home, clinic, or accessibility marks.
2. Use squared icons for general UI actions and objects that do not have a strong semantic silhouette. Keep white icons on dark fills unless a documented semantic colourway applies.
3. Use large round/expanded icons for feature navigation, section headings, and splash surfaces; keep their hover motion on the full icon treatment rather than moving the glyph alone.

3.4 Cards and Messages

1. Use content-card accent borders consistently: navy = featured/resource, info = information/assessment, success = confirmed/submitted, gold = note/eligibility, danger = alert/declined, neutral = default/non-semantic.
2. Use message cards for inline status and guidance. Keep the icon aligned with the title/body text, place action links below a divider, and use matching hover borders for the non-left sides.

3.5 Editorial Blocks and Demos

1. Use block quotes with a cited source. Use the inline quote for body content and dark featured quotes for prominent editorial moments only.
2. Keep the guide self-contained: examples must use brand-guide scoped classes or inline demo styles so live site component changes do not distort the reference.

NOTE: All listed serif and sans fonts are required as fallback options for brand cohesion across different operating systems.

Background tint

Combined with an accent border for stronger semantic signal.

Messages

Inline status messages and contextual callouts for communicating success, warnings, errors, or guidance alongside content.

Underline

Rounded

Search results

Key terms

Side-by-side comparison

7.1 CanFASD tokens

/* 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; /* 7.3:1 on white ✓ */
  --link-hover:         #C69214;
  --link-visited:       #643335;
  --link-visited-hover: #C69214;
  --link-dark:          #C69214;
  --link-dark-white:    #FFFFFF;
  --link-dark-hover:    #E8C96A;
  --link-dark-hover-gold: #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;
}

8.1 Google Fonts

<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">

The following is drawn directly from the official CanFASD Branding Document. This web guide operationalizes these values for digital/screen contexts.

Brand story

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

Colours as specified in the official brand document, including CMYK and RGB values for print production.

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

Core vocabulary for CanFASD communications, campaigns and messaging.