Find the service
Prioritize the most needed tasks across government. Published
The system
Fixed, everywhere
- Government identification, common header/footer and mandatory styles. (Source: https://design.canada.ca/specifications/mandatory-elements.html)
- Clear, accurate and authoritative task information. (Source: https://design.canada.ca/specifications/design-content.html)
- Official-symbol artwork and authorization requirements. (Source: https://www.canada.ca/en/transparency/terms.html)
The one thing that varies
Select patterns and content layouts around user needs; campaign pages have layout flexibility within mandatory header, footer and identity requirements. (Source: https://design.canada.ca/common-design-patterns/global-header.html)
How loud each format gets
Silent
Quiet
Calm
Warm
Loud
Loudest
Our engine's setting, built from their rules.
Every piece passes 3 checks
Recognizable source
Verify official assets, the red flag on white and separate header/footer identifiers before evaluating decorative fidelity. (Source: https://design.canada.ca/common-design-patterns/signature.html)
Task completion
Can a person find the needed information, understand it and take the next action? Assess with users, not only visual conformity. (Source: https://design.canada.ca/specifications/design-content.html)
Source boundary
Check which colour and typography layer applies. Mandatory Canada.ca values and GC foundation tokens should not be silently interchanged. (Source: https://design.canada.ca/styles/colours.html)
Strategy
The federal digital presence that connects people to authoritative government information and services. Published
Understand the answer
Present relevant information in clear, accessible language. Published
Recognize the source
Use a common official identity and consistent navigation. Published
Full spec
- For Published
- People seeking Government of Canada services and information, including people using mobile devices and assistive technologies.
- Problem Published
- People need to find the right service across a complex administration without understanding departmental structures.
- Promise Published
- Consistent navigation and clear content help people find answers and complete their tasks.
- Mission Published
- Help Canadians locate and understand federal information and services more easily.
Proof behind each pillar
- Find the service. The home template prioritizes top tasks using page-view data and user research.
- Understand the answer. The content guide sets plain-language, structure, tone and accessibility rules.
- Recognize the source. The global-header guidance reports that consistency, a red flag and white backgrounds support trust.
Story Published
Canada.ca brings government information and services into a consistent digital presence. Its shared design framework is refined through user research, usability testing and evidence about task success.
Values
People first
Organize around the information and services people need most.
PublishedTask completion
Make content simple, predictable and useful for finishing a task.
PublishedEvidence-based iteration
Revise patterns and information architecture using research and testing.
PublishedOpen collaboration
Develop and improve shared design with the government web community.
PublishedMobile access
Provide the same content in responsive layouts rather than a separate mobile site.
PublishedSearch and navigation together
Make search filters and information structure reinforce each other.
PublishedCategory. Government information and service website. Published
Why them
- Government-wide organization puts public needs ahead of departmental boundaries. Published
- Official identification and common page elements make federal content recognizable. Published
- Only publish content for which government is the authoritative source; link outward for other information. Published
Boilerplate Published
Canada.ca is the federal government’s digital presence, designed to help people find and understand its information and services.
They never claim
- Publish current, relevant, accurate and authoritative information. Remove duplicate content and manage content throughout its life cycle. Published
- Do not imply an endorsement of a private organization or product; distinguish fair partnership acknowledgement from endorsement. Published
- Do not invent a commercial tagline or treat navigation labels as advertising claims. Our reading
Published mission and design intent supply service messaging: make federal information easier to find and understand, surface important tasks and connect people to authoritative answers. The homepage byline identifies the official source; it is not a commercial tagline.
Source: canada.ca/en/government/about-canada-ca.htmldesign.canada.ca/specifications/design-content.htmldesign.canada.ca/mandatory-templates/home-page.htmldesign.canada.ca/style-guide/index.htmlcanada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program.html
Personality and voice
Modernbut not Novelty for its own sakeOur reading
Openbut not Opaque about the route to informationOur reading
Helpfulbut not Promotional at the expense of the taskOur reading
Crediblebut not A lookalike identity without authorityOur reading
People can scan, understand and act without decoding the administration’s internal vocabulary.
Full spec
- Use sentence case for titles, headings, captions and table headers; retain proper nouns and omit final punctuation. Campaign slogans may retain punctuation.
- Address readers with you and your. Do not narrate their task as I or my except in proper names.
- Use we and our for government as a whole. Name a department when its specific role or contact matters.
- Choose familiar terms, explain necessary technical terms and remove internal government jargon.
- Use active, positive statements and action verbs. Explicit negatives are appropriate for serious consequences.
- Put essential task information first, supporting detail later; remove welcomes and irrelevant history.
- Aim for sentences under 15 to 20 words; keep paragraphs to one idea and no more than three sentences.
- Use must for legal obligations, need to for administrative requirements, and may or might for permission or possibility.
- Use common spoken contractions; avoid uncommon contractions and spell out critical negative instructions.
- Describe the destination or action in link text; avoid click here, read more and promotional wording.
- Explain necessary abbreviations on first mention; prefer a plain short reference such as the program thereafter.
- Reserve underlining for links. Use bold sparingly; do not use italics for decorative emphasis or long passages.
- Keep list items parallel and focused. Number ordered steps; use bullets for unordered items. Reconsider lists longer than seven items.
- Use and rather than an ampersand except in established names or abbreviations. Use to in ranges; simplify sentences instead of em dashes.
- Spell out zero to nine in narrative content; use digits from 10 and for comparisons, data, steps and conventional formats. Avoid beginning a sentence with digits.
- Write dates with a named month and no ordinal suffix. Use yyyy-mm-dd only when space is limited and explain that format.
- Give tables clear titles and row and column headers; split complex tables and explain empty values. Do not convey meaning only through colour.
- Provide functional-image alternative text, long descriptions for complex images and transcripts for audiovisual content. Decorative images use empty alt text.
- Front-load descriptive keywords in a unique page title. Break content into logical sections approximately every 200 words and avoid boastful promotional headings.
- Use website, web page, web, email and online as the specified English forms.
directinformativeconversationalprofessional
The content guide specifies direct, informative, conversational and professional writing. The homepage expresses this through task labels and concise descriptions, while content pages explain actions and requirements in plain language.
- Use sentence case for titles, headings, captions and table headers; retain proper nouns and omit final punctuation. Campaign slogans may retain punctuation. (Source: https://design.canada.ca/style-guide/index.html)
- Address readers with you and your. Do not narrate their task as I or my except in proper names. (Source: https://design.canada.ca/style-guide/index.html)
- Use we and our for government as a whole. Name a department when its specific role or contact matters. (Source: https://design.canada.ca/style-guide/index.html)
- Choose familiar terms, explain necessary technical terms and remove internal government jargon. (Source: https://design.canada.ca/style-guide/index.html)
- Use active, positive statements and action verbs. Explicit negatives are appropriate for serious consequences. (Source: https://design.canada.ca/style-guide/index.html)
- Put essential task information first, supporting detail later; remove welcomes and irrelevant history. (Source: https://design.canada.ca/style-guide/index.html)
- Aim for sentences under 15 to 20 words; keep paragraphs to one idea and no more than three sentences. (Source: https://design.canada.ca/style-guide/index.html)
- Use must for legal obligations, need to for administrative requirements, and may or might for permission or possibility. (Source: https://design.canada.ca/style-guide/index.html)
- Use common spoken contractions; avoid uncommon contractions and spell out critical negative instructions. (Source: https://design.canada.ca/style-guide/index.html)
- Describe the destination or action in link text; avoid click here, read more and promotional wording. (Source: https://design.canada.ca/style-guide/index.html)
- Explain necessary abbreviations on first mention; prefer a plain short reference such as the program thereafter. (Source: https://design.canada.ca/style-guide/index.html)
- Reserve underlining for links. Use bold sparingly; do not use italics for decorative emphasis or long passages. (Source: https://design.canada.ca/style-guide/index.html)
- Keep list items parallel and focused. Number ordered steps; use bullets for unordered items. Reconsider lists longer than seven items. (Source: https://design.canada.ca/style-guide/index.html)
- Use and rather than an ampersand except in established names or abbreviations. Use to in ranges; simplify sentences instead of em dashes. (Source: https://design.canada.ca/style-guide/index.html)
- Spell out zero to nine in narrative content; use digits from 10 and for comparisons, data, steps and conventional formats. Avoid beginning a sentence with digits. (Source: https://design.canada.ca/style-guide/index.html)
- Write dates with a named month and no ordinal suffix. Use yyyy-mm-dd only when space is limited and explain that format. (Source: https://design.canada.ca/style-guide/index.html)
- Give tables clear titles and row and column headers; split complex tables and explain empty values. Do not convey meaning only through colour. (Source: https://design.canada.ca/style-guide/index.html)
- Provide functional-image alternative text, long descriptions for complex images and transcripts for audiovisual content. Decorative images use empty alt text. (Source: https://design.canada.ca/style-guide/index.html)
- Speak to people with the authority of an institution and the clarity of an in-person explanation. (Source: https://design.canada.ca/style-guide/index.html)
- The homepage voice is navigational: useful task labels and short descriptions connect people to services. The content guide governs the writing throughout. (Source: https://design.canada.ca/mandatory-templates/home-page.html)
Never
click hereread more
- Don’t Use vague link labels such as click here or read more. (Source: https://design.canada.ca/style-guide/index.html)
- Don’t Speak on a reader’s behalf using I or my task labels, except established proper names. (Source: https://design.canada.ca/style-guide/index.html)
- Don’t Use unexplained jargon, acronyms or legal references as a substitute for an explanation. (Source: https://design.canada.ca/style-guide/index.html)
- Don’t Treat an algorithmic readability score as proof of user understanding. (Source: https://design.canada.ca/style-guide/index.html)
| Tone | Direct, informative, conversational, professional (Source: https://design.canada.ca/style-guide/index.html) |
|---|---|
| Sentences | Optimal under 15 to 20 words (Source: https://design.canada.ca/style-guide/index.html) |
| Paragraphs | One main idea; no more than three sentences (Source: https://design.canada.ca/style-guide/index.html) |
Source: design.canada.ca/style-guide/index.htmldesign.canada.ca/mandatory-templates/home-page.html
Logo
Consistent official identification lets people recognize the source.
Full spec
Consistent official identification lets people recognize the source. Header research specifically supports the red flag on white.
- Use the red flag and black signature text on a white header; English first on English pages and French first on French pages. (Source: https://design.canada.ca/common-design-patterns/signature.html)
- Use Government of Canada as English alt text and Gouvernement du Canada as French alt text. The signature links to Canada.ca home; transactional-page home linking is optional. (Source: https://design.canada.ca/common-design-patterns/signature.html) Additional source for transactional link exception: https://design.canada.ca/common-design-patterns/global-header.html
- Wordmark clear space equals its C height; flag-signature clearance equals the flag height; arms and ministerial clearance equals half the arms width, all around. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/size-position-design-standard-fip.html)
- When paired, allow at least a signature flag height or half an arms width between the identifiers. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/size-position-design-standard-fip.html)
- Flag-signature flag height matches the distance from the wordmark bottom to its flag bottom. Arms-signature two-line title height uses that same distance, including longer titles. Ministerial arms width is half the wordmark width. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/size-position-design-standard-fip.html)
- Use official digital masters for flag signatures, arms signatures and ministerial templates; request through the FIP coordinator. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/titles-signatures-design-standard-fip.html)
- The web-specific requirement is Helvetica medium in official symbols; do not apply Helvetica to content instead of Lato and Noto Sans. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/government-canada-websites-design-standard-fip.html)
- Prior written authorization is required for reproducing official symbols. This book links government-hosted originals without re-hosting them. (Source: https://www.canada.ca/en/transparency/terms.html)
- Partner acknowledgements normally use one identifier per partner; prefer the Canada wordmark domestically and the Government of Canada signature internationally. More than one federal contributor uses the shared federal identifier. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program.html)
- Don’t Alter, stretch, skew, rotate, crop, shadow or pattern the symbols; put them into a sentence or URL; translate them beyond English and French. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/size-position-design-standard-fip.html)
- Don’t Redraw the Canada wordmark in Baskerville or recreate a signature in web fonts. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/official-symbols-design-standard-fip.html)
- Don’t Apply or replicate Canada.ca global header/footer on a non-government organization’s website. (Source: https://design.canada.ca/specifications/usage-canadaca-design.html)
| Standard web colours | Black type and FIP red flag on white (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/government-canada-websites-design-standard-fip.html) |
|---|---|
| Web minimum size | not published in the supplied pages; responsive SVG is specified (Source: https://design.canada.ca/common-design-patterns/signature.html) |
| General positioning | Same baseline with signature left; opposite top-left/bottom-right corners; or wordmark below aligned to signature text or symbol. Product-specific rules take precedence. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/size-position-design-standard-fip.html) |
Canada.ca uses a bilingual flag signature and the Canada wordmark as separate identifiers. The signature identifies government content and links to the homepage; the wordmark closes the page. The modified Baskerville wordmark must come from its digital master, not newly typeset lettering.
Source: design.canada.ca/common-design-patterns/signature.htmldesign-system.canada.ca/en/components/signaturecanada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/size-position-design-standard-fip.htmlcanada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/official-symbols-design-standard-fip.htmlcanada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/titles-signatures-design-standard-fip.htmlcanada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/government-canada-websites-design-standard-fip.htmlcanada.ca/en/transparency/terms.htmlcanada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program.html
Color
Colour communicates navigation and state while mostly white pages preserve a consistent, legible government presence.
Full spec
- Keep a majority white page; alternative section backgrounds must meet the specified enhanced text contrast criterion. (Source: https://design.canada.ca/styles/colours.html)
- Use #284162 default links, #0535D2 hover/focus and #7834BC visited. (Source: https://design.canada.ca/styles/colours.html)
- Use #26374A as accent, #D3080C for error or required indicators and #333333 for selected initiation elements. (Source: https://design.canada.ca/styles/colours.html)
- Prefer semantic GC tokens; use base shades only when existing globals cannot serve the need. Check combinations rather than treating every shade as an approved text pairing. (Source: https://design-system.canada.ca/en/foundations/colour/)
- GC components state WCAG 2.1 AA colour contrast; mandatory Canada.ca background guidance refers to WCAG 1.4.6 AAA. Preserve the different scopes. (Source: https://design-system.canada.ca/en/foundations/colour/)
- Don’t Treat FIP red, the H1 rule red and the form-error red as interchangeable. (Source: https://design.canada.ca/common-design-patterns/signature.html)
- Don’t Use colour or texture alone to communicate table information. (Source: https://design.canada.ca/style-guide/index.html)
| Web default | White #FFFFFF and dark grey #333333 (Source: https://design.canada.ca/styles/colours.html) |
|---|---|
| H1 bar | #A62A1E (Source: https://design.canada.ca/styles/typography.html) |
| Flag | #EB2D37 (Source: https://design.canada.ca/common-design-patterns/signature.html) |
| Proportions | White majority; numeric allocation not published (Source: https://design.canada.ca/styles/colours.html) |
| FIP production colours | See kit.palette.production for exact published Pantone, CMYK, RGB and vinyl values, separate from web styles. Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/colour-design-standard-fip.html |
The mandatory web palette is restrained: white backgrounds, dark-grey content, blue links with separate hover/focus and purple visited states. A dark blue is the main accent. The title bar, form errors and official flag use distinct reds. GC Design System adds explicitly named semantic and base tokens.
Source: design.canada.ca/styles/colours.htmldesign.canada.ca/styles/typography.htmldesign.canada.ca/common-design-patterns/signature.htmldesign-system.canada.ca/en/foundations/colourcanada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/colour-design-standard-fip.html
Typography
Canada.ca
Readable size, limited line length and semantic hierarchy support scanning across devices and assistive technologies.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| Lato | SIL Open Font License 1.1 | ||
| Noto Sans | SIL Open Font License 1.1 | ||
| Noto Sans Mono | SIL Open Font License 1.1 |
- Use the published H1 to H6 scale and body sizes; pattern-specific navigation typography can differ. (Source: https://design.canada.ca/styles/typography.html)
- Keep text lines to 65 characters; full layouts may be wider. Underline links with descender-skipping decoration. (Source: https://design.canada.ca/styles/typography.html)
- Use one H1 for main content and progress through heading levels without skipping. Maintain heading semantics even when applying a smaller visual style. (Source: https://design-system.canada.ca/en/foundations/typography/)
- Use Noto Sans Mono for code examples, not general content. Limit competing weights and avoid excessive bold or italics. (Source: https://design-system.canada.ca/en/foundations/typography/)
- Include supported Indigenous characters; load additional Noto language families when required and use correct language tags. (Source: https://design.canada.ca/styles/typography.html)
- Don’t Use small text below the recommended 16px merely to fit more content. (Source: https://design.canada.ca/styles/typography.html)
- Don’t Use all capitals or decorative italics in general writing. (Source: https://design.canada.ca/style-guide/index.html)
- Don’t Rebuild the signature with Lato or Noto Sans. (Source: https://design.canada.ca/common-design-patterns/signature.html)
| Desktop headings | H1 41px; H2 39px; H3 29px; H4 27px; H5 24px; H6 22px; all Lato bold (Source: https://design.canada.ca/styles/typography.html) |
|---|---|
| Small-device headings | H1 37px; H2 35px; H3 26px; H4 22px; H5 20px; H6 18px (Source: https://design.canada.ca/styles/typography.html) |
| Body | Noto Sans 20px desktop; 18px small devices; plain/regular (Source: https://design.canada.ca/styles/typography.html) |
| Pattern small text | 16px Noto Sans, non-responsive (Source: https://design.canada.ca/styles/typography.html) |
| GC leading | H1 117%, H2 123%, H3 137%, H4 133%, H5 133%, H6 145%; body 160%, small-text token 155% (Source: https://design-system.canada.ca/en/foundations/typography/) |
Lato bold headings and Noto Sans regular text are mandatory real web faces. Content headings have published desktop and smaller-device scales. Navigation patterns intentionally use compact visual headings. FIP Helvetica is an identity-artwork face with its own product-specific weights.
Source: design.canada.ca/styles/typography.htmldesign-system.canada.ca/en/foundations/typographycanada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/typography-design-standard-fip.htmldesign.canada.ca/style-guide/index.html
Graphic elements
Do Left aligned; #A62A1E; 72px wide and 6px thick; positioned .2em (7.6px in the source) below the title..
Main-title red bar · Under the main page H1
Do Bilingual Government of Canada signature at header top left and Canada wordmark at footer bottom right; black lettering and FIP red flag on white..
Two separate official identifiers · Government of Canada sites
Do Descriptive links, familiar words and task priorities; compact navigation heading styling according to the pattern..
Task-led navigation · Navigation and landing content
Specimens use sample copy, not Canada.ca’s.
Repeated, constrained visual elements provide recognition while leaving the content task as the focus.
Full spec
- Place the short red rule beneath the main H1 according to its published dimensions. (Source: https://design.canada.ca/styles/typography.html)
- Choose a primary action or a stand-alone start action, with supporting secondary actions as needed. (Source: https://design-system.canada.ca/en/components/button/)
- Danger actions communicate destructive consequences and permanent changes require explicit confirmation. (Source: https://design-system.canada.ca/en/components/button/)
- Use component tokens for component properties, global tokens for shared semantics, and base tokens to fill unmet needs. (Source: https://design-system.canada.ca/en/foundations/design-tokens/)
- Don’t Invent decorative patterns from repeated Canada wordmarks. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/size-position-design-standard-fip.html)
- Don’t Compete with the main task through unnecessary non-priority content. (Source: https://design.canada.ca/specifications/design-content.html)
| Title rule | 72px by 6px; .2em below H1; left aligned; #A62A1E (Source: https://design.canada.ca/styles/typography.html) |
|---|---|
| Buttons | Primary, start, secondary and danger roles; exact geometry not published in supplied use-case page (Source: https://design-system.canada.ca/en/components/button/) |
The distinctive devices are functional: the short red title rule, stable official identifiers, recognizable navigation and semantic feedback icons. Buttons signal task actions rather than decorating the page.
Source: design.canada.ca/styles/typography.htmldesign-system.canada.ca/en/components/buttondesign-system.canada.ca/en/foundations/design-tokensdesign.canada.ca/specifications/design-content.html
Iconography
A familiar symbol can speed recognition and reduce cognitive load when matched to the actual action or status.
Full spec
- Choose the semantic icon corresponding to the actual state or action. (Source: https://design-system.canada.ca/en/components/icon/)
- Use info-circle for helpful information, warning-triangle for caution, exclamation-circle before critical action and checkmark-circle for completion. (Source: https://design-system.canada.ca/en/components/icon/)
- Use arrows for sort direction, chevrons for direction or disclosure, and the dedicated file/contact/search glyphs for those actions. (Source: https://design-system.canada.ca/en/components/icon/)
- Don’t Infer a stroke width or pixel grid from the use-case page. (Source: https://design-system.canada.ca/en/components/icon/)
| Font family | gcds-icons (Source: https://design-system.canada.ca/en/foundations/typography/) |
|---|---|
| Construction | Size, stroke, cap, join and grid specifications not published in the supplied icon page (Source: https://design-system.canada.ca/en/components/icon/) |
GC icons cover information, caution, critical warnings, completion, sorting, disclosure, search and common contact or file actions. The supplied page defines meaning rather than a drawing grid.
Source: design-system.canada.ca/en/components/icondesign-system.canada.ca/en/foundations/typography
Illustration
An explanatory visual earns its place by helping someone understand or complete a task.
Full spec
- Use functional visuals to explain a complex concept, data or a concrete object. (Source: https://design.canada.ca/style-guide/index.html)
- Provide a text equivalent. Use a long description where the function and information cannot fit in a short alternative text. (Source: https://design.canada.ca/style-guide/index.html)
- Make supporting tables or nearby equivalent explanations available for complex data graphics. (Source: https://design.canada.ca/style-guide/index.html)
- Don’t Use illustration or abstract art as the homepage banner. (Source: https://design.canada.ca/mandatory-templates/home-page.html)
- Don’t Put essential campaign or program titles into decorative imagery. (Source: https://design.canada.ca/style-guide/index.html)
| Functional alt | Around 140 characters including spaces; use long descriptions for complex images (Source: https://design.canada.ca/style-guide/index.html) |
|---|---|
| House illustration style | Stroke, perspective, character construction and dedicated palette not published (Source: https://design.canada.ca/style-guide/index.html) |
Functional illustrations, diagrams, image maps and infographics can explain information beyond text alone. The homepage banner explicitly excludes illustration and abstract imagery. No general illustration drawing style is prescribed by the supplied web sources.
Source: design.canada.ca/style-guide/index.htmldesign.canada.ca/mandatory-templates/home-page.html
Photography
Relevant imagery provides context while avoiding distraction from urgent service and navigation needs.
Full spec
- Choose photographic homepage-banner imagery with seasonally appropriate details. (Source: https://design.canada.ca/mandatory-templates/home-page.html)
- Avoid faces or people in the homepage banner because they distract attention. (Source: https://design.canada.ca/mandatory-templates/home-page.html)
- Use images and videos to clarify information and reflect the population, including seniors, youth, Indigenous Peoples and diverse ethnic origins. (Source: https://design.canada.ca/style-guide/index.html)
- Obtain written proof of publishing rights. Consider download and mobile data costs for video. (Source: https://design.canada.ca/style-guide/index.html)
- Decorative imagery is limited to specified navigational/campaign templates and promotional features; use empty alt text. Functional images need appropriate descriptions. (Source: https://design.canada.ca/style-guide/index.html)
- Don’t Use a photographic treatment without publishing rights. (Source: https://design.canada.ca/style-guide/index.html)
- Don’t Assign meaningful descriptions to purely decorative images or hide essential content inside them. (Source: https://design.canada.ca/style-guide/index.html)
| Homepage subject | Seasonal details; photographic; avoid people and faces (Source: https://design.canada.ca/mandatory-templates/home-page.html) |
|---|---|
| Treatment | Universal lighting, lens, crop ratio, grading and retouch values not published (Source: https://design.canada.ca/style-guide/index.html) |
The homepage banner uses a seasonal photograph without distracting people or faces. Across content, photography and video should help the task, clarify information and reflect the diversity of Canada. The homepage restriction is specific to its banner, not a general ban on people.
Source: design.canada.ca/mandatory-templates/home-page.htmldesign.canada.ca/style-guide/index.html
Interface & layout
The page, band by band
Navigation
Most requested
Website outages
Services and information
Your government
Features
Government footer
Corporate sub-footer
Buttons
Full spec
Canada.ca publishes a responsive default maximum content width and shared header/footer requirements. The homepage is a navigational template with prioritized tasks, theme links, audience entry points and limited promotional features. Content-page reading widths differ from overall layout widths.
Measured from design.canada.ca/specifications/mandatory-elements.html's Playwright computed styles and bounding boxes on https://www.canada.ca/en.html at 1440 and 390, 2026-10-30. RENDERING: set body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility } (computed on canada.ca); without it Lato and Noto Sans render visibly heavier than the reference.
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 150px | 15px |
| Hero text width | max 527px, centered | full width |
| Card gap | 20px | 20px |
| Navigation | 166px | 166px |
Type, at size
H1 core content heading
Lato · 41px (phone 37) · line 1.17 · weight 700
H2 core content heading
Lato · 39px (phone 35) · line 1.23 · weight 700
H3 core content heading
Lato · 29px (phone 26) · line 1.37 · weight 700
H4 core content heading
Lato · 27px (phone 22) · line 1.33 · weight 700
H5 core content heading
Lato · 24px (phone 20) · line 1.33 · weight 700
H6 core content heading
Lato · 22px (phone 18) · line 1.45 · weight 700
General body
Noto Sans · 20px (phone 18) · line 1.6 · weight 400
Small pattern text
Noto Sans · 16px · line 1.44 · weight 400
Homepage H1
Lato · 41px (phone 37) · line 1.17 · weight 500
Section H2
Lato · 29px (phone 26) · line 1.23 · weight 700
Warning H3
Lato · 29px (phone 26) · line 1.3699999999999999 · weight 700
Service title
Lato · 20px · line 1.3699999999999999 · weight 700
Feature title
Lato · 24px · line 1.37 · weight 700
Official byline/warning body
Noto Sans · 20px (phone 18) · line 1.6 · weight 400
Service description
Noto Sans · 18px · line 1.5 · weight 400
Feature description
Noto Sans · 17px · line 1.5 · weight 400
Most requested link
Lato · 17.5px · line 1.4857142857142858 · weight 700
Your government link
Noto Sans · 18px · line 2.3 · weight 700
Footer/date/language
Noto Sans · 16px · line 1.4375 · weight 400
Government footer heading
Lato · 26px · line 1.3699999999999999 · weight 700
MENU
Noto Sans · 20px · line 1.4375 · weight 400
Sign in
Lato · 16px · line 1.4375 · weight 400
All services
Lato · 19.8px · line 1.4374999999999998 · weight 700
Page anatomy
How Canada.ca’s own landing pages are built, observed on canada.ca/en.html, 2026-10-30. The full measurements are in spec.md.
- Navigation
- White header: signature left; language and search right; second tier MENU left and Sign in right. Phone stacks signature/language, search, then menu/sign-in in three rows.
- Hero
- Poppy photograph behind a translucent navy title panel, then a black spotlight link strip; phone has a full navy panel with no photograph visible.
- Most requested
- Eight priority task links.
- Website outages
- Orange 6px rail (#EE7100) on the left with an outlined orange warning triangle knocking out the rail beside the heading; heading and paragraph to the right.
- Services and information
- Nine service categories plus All services.
- Your government
- Eight institutional links beside a right-aligned Parliament photograph.
- Features
- Four photo/title/description cards;one random alternative selected per slot at initialization.
- Date modified
- Maintenance metadata before footer.
- Footer
- Navy government navigation above pale corporate/legal band;skyline lower right;Canada wordmark below.
Source: design.canada.ca/styles/layouts.htmldesign.canada.ca/styles/typography.htmldesign.canada.ca/common-design-patterns/global-header.htmldesign.canada.ca/common-design-patterns/site-footer.htmldesign.canada.ca/specifications/mandatory-elements.htmldesign.canada.ca/mandatory-templates/home-page.htmldesign-system.canada.ca/en/foundations/spacing
In use
Full spec
Formats describe published constraints rather than measured page anatomy. No numeric personality intensity is assigned because the guide does not publish one. (Source: https://design.canada.ca/specifications/design-content.html)
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | Common official identification, mandatory styles and task-first links; use the institutional landing template for an institutional home. | Select content and patterns appropriate to user tasks. | |
| Canada.ca home page | The single government-wide home template; official byline, seasonal photographic banner and research-based priority tasks. | Timely feature subjects within the template; avoid distracting faces in the banner. | |
| Standard content page | White header; signature, language toggle, search, divider and breadcrumb; mandatory main footer and sub-footer with wordmark. | Optional sign-in and contextual footer; menu removal only under documented analytics conditions. | |
| Transactional service | Signature, divider and required language support; sub-footer and wordmark remain required. | Search, navigation, breadcrumbs and main footer can be omitted according to transaction guidance. | |
| Campaign page | Signature, language toggle, search, divider and breadcrumb; mandatory sub-footer with wordmark. | Campaign layout, optional topic menu and optional main/contextual footer within documented rules. | |
| Partner acknowledgement | Approved government identifier and agreed acknowledgement; avoid implied private endorsement. | Choose the appropriate federal symbol and negotiate prominence according to contribution and agreement. | |
| Functional illustration or infographic | Clarifies the task and includes an equivalent text description. | Choose the visual form best suited to the information. | |
| Motion graphic | Apply official-symbol requirements when a government message or call to action is present. | Use the appropriate static-graphic or video identity requirements according to the product. |
Rules
Do
- Follow mandatory Canada.ca colours, typography, layouts and applicable templates. (Source: https://design.canada.ca/specifications/mandatory-elements.html)
- For out-of-scope WET reuse, differentiate menu labels and colour, footer links and footer background; do not replicate Canada.ca chrome. (Source: https://design.canada.ca/specifications/usage-canadaca-design.html)
- Keep the red official flag on white and the wordmark at the lower right. (Source: https://design.canada.ca/common-design-patterns/signature.html)
- Apply official-symbol reproduction authorization requirements. (Source: https://www.canada.ca/en/transparency/terms.html)
- Treat archived FIP manual sections as historical references; consult the replacement design standard and current technical specifications. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program/manual.html)
Don’t
- Assume open-source WET licensing grants permission to reproduce protected federal symbols. (Source: https://www.canada.ca/en/transparency/terms.html)
- Treat archived print or signage specifications as current Canada.ca web sizes. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program/manual.html)
- Invent dimensions or percentages absent from the guide. (Source: https://design.canada.ca/styles/layouts.html)
Source: design.canada.ca/specifications/mandatory-elements.htmldesign.canada.ca/specifications/usage-canadaca-design.htmlcanada.ca/en/transparency/terms.htmldesign.canada.ca/common-design-patterns/signature.htmlcanada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program/manual.htmlcanada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program/technical-specifications.html
Steal this kit
Your name and logo, Canada.ca’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What Canada.ca doesn’t publish
- Exact colour percentages: not published; Canada.ca requires a majority white background. (Source: https://design.canada.ca/styles/colours.html)
- Universal minimum digital or print size for every official lockup: not published in the supplied web pages or consulted current general FIP size-and-position page. Product-specific rules and official implementation masters govern. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/size-position-design-standard-fip.html)
- A universal web breakpoint, column gutter, page margin and section-padding recipe: not published in the supplied layouts page. The 1140px maximum is published. (Source: https://design.canada.ca/styles/layouts.html)
- Letter spacing and complete small-device line-height specifications: not published in the mandatory typography page. GC heading leading is retained with its separate source. (Source: https://design.canada.ca/styles/typography.html)
- Smallest 16px pattern-text line height: not published in the supplied mandatory typography page; the separate GC small-text token is 1.13rem/155%. (Source: https://design.canada.ca/styles/typography.html)
- Button corner radius, exact height, padding and complete interaction geometry: not published in the supplied button use-case page. (Source: https://design-system.canada.ca/en/components/button/)
- Icon dimensions, grid, stroke, caps and joins: not published in the supplied icon use-case page. (Source: https://design-system.canada.ca/en/components/icon/)
- A universal illustration construction style and photography crop, grading or lens recipe: not published in the supplied sources. (Source: https://design.canada.ca/style-guide/index.html)
- General web animation duration and easing values: not published in the supplied web foundations; official animated-wordmark product rules are separate. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/motion-graphics-design-standard-fip.html)
- Commercial tagline, competitive positioning and numerical personality levels: not published; this book uses the public-service mission and leaves numerical intensity unassigned. (Source: https://www.canada.ca/en/government/about-canada-ca.html)
- Authorization to reproduce protected official symbols is not supplied. Prior written authorization is required; this book only describes and links government-hosted artwork. (Source: https://www.canada.ca/en/transparency/terms.html)
- The FIP manual marks general design, advertising and published-material sections as archived and replaced. Historical specifications must not override the current design standard. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program/manual.html)
- Canada.ca default/selected/visited links differ from GC Design System link tokens. These are published differences; no undocumented harmonization is assumed. (Source: https://design-system.canada.ca/en/foundations/colour/)
- Noto Sans Mono local font files and additional language packages are not supplied. Real web heading/body faces are present; use the actual language coverage required. (Source: https://design-system.canada.ca/en/foundations/typography/)
- Hex values for FIP pewter grey and signage production colours: not published on the consulted current FIP colour page. Published Pantone, CMYK, RGB and vinyl specifications are retained without converting them into invented hex swatches. Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/colour-design-standard-fip.html
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-30. Not affiliated with Canada.ca.