Design System
Shared primitives for Code for Canada that help us consistently communicate who we are across the web.
Logo
Our logo and wordmark are geometric — node circles connected by clean lines — emphasizing “connecting the dots” and moving from point A to B. It’s the most recognizable expression of the brand, so treat it with care.
- Default to the full logo at its normal size. Reserve the mark (icon only) for exceptions — tight spaces like a compact nav, favicon, or avatar, or where the brand is already established on the page.
- Inverted. Use the white logo on dark backgrounds, brand-colour fills, or busy photography — never the red logo on a low-contrast surface.
- Don’t recolour, stretch, skew, rotate, or add effects.
Full logo
Mark only
Inverted (dark backgrounds)
Typography
Combining a clear typography hierarchy with plain language helps us communicate with our brand voice: approachable, straightforward, and empathetic.
Eyebrow
Use eyebrows sparingly — only alongside longer editorial headlines to improve scanning, not on every section. Limit to 1–4 words, place above a Heading or Title, optionally with a circle icon.
Default
With icon
Title
The single page or hero title — use once per page. Emphasize the key word(s) to trigger the animated brand gradient; its colour follows the surrounding colour scheme.
Title text
Subtitle
A supporting line that sits directly under a Title to expand on it in a sentence or two.
Secondary information. Emphasized content.
Heading
Section and sub-section headings. Choose the heading level for a correct document outline and the size for visual weight — they’re independent. The xl size can also headline the top of a page and use bold for emphasis; keep bold sparing so it stays meaningful. Colour follows the surrounding scheme.
Heading xl
Heading lg
Heading md
Heading sm
Body
Paragraph and supporting text. Use lead for an introductory paragraph, default for general content, and sm or xs for captions and fine print.
Lead body text emphasizes key point of a section with some emphasis.
Regular body text used for paragraphs and general content.
Small body text for captions and supporting content.
Colors
Use level 600+ for text and interactive elements, and below 600 for backgrounds. Alternatively, for the inverted theme use 200 or lighter for text and 700 or darker for background. WCAG 2.2 compliant when used as documented.
Red
100
#FFF6F5
200
#FBE9EE
400
#FFA2B7
600
#DE242B
800
#900958
900
#69124C
Purple
100
#FAF8FE
200
#D6CAEA
400
#D1B2FF
700
#6B3FB0
800
#4B2683
900
#39165B
Blue
100
#F5F7FF
200
#D6DEFF
400
#95A3F9
600
#5A55EC
800
#2B3482
900
#121C4E
Neutral
50
#FCFCFD
100
#F4F4F6
200
#DDDDE6
600
#494865
800
#2B2A41
900
#1B1A28
Color Schemes
Each scheme sets a complete colour context — background, text, headings, and links — for everything inside it. Wrap a container in a scheme and its content inherits the palette automatically, so you rarely set colours by hand. Pick the scheme that matches the tone of the content:
Research
Purple
Reflective, strategic, or insight-driven content.
Red
Strong brand presence or editorial highlights.
Purple Inverted
Dark mode for purple theme content.
Red Inverted
Dark mode for red theme content.
Buttons
Use buttons for calls to action and interactions on on the page. Lead with a single primary (default) button per view; use outline for secondary actions and ghost for low-emphasis or repeated ones. On dark or coloured backgrounds, switch to the white and white-outline variants.
Primary
Outline
Ghost
White (for dark backgrounds)
Link
Use the default animated underline inline in text, plain for a quieter underline, and inverse on dark backgrounds. External links open in a new tab automatically.
Icon Circle
A filled brand-colour circle that holds a single icon. Use it to add a colour accent to card headers, feature lists, or eyebrows — keep to simple line icons and match the colour to the surrounding scheme.
Cards
Cards group a single idea — a service, feature, or link — onto one surface. Compose a header (icon, heading, short description), optional content, and a footer for a single action or link. Use them in evenly sized grids and keep the copy short so they stay scannable.
Collaborative Development
Work with your existing team to co-develop digital services.
Inclusive User Research
Connect with diverse communities across Canada.
Options Analysis
Find the best option for modernizing digital products.
Form Fields
Pair a Label with an Input and connect them (the label’s htmlFor matches the input’s id) so the form stays accessible. Keep helper text short and place it directly under the field. For richer forms — descriptions, validation errors, or horizontal layouts — compose the Field primitives.
Contact Us
Get in touch with our team
Accordion
Accordions reveal secondary content on demand — ideal for FAQs and dense reference material. Use a single open panel for FAQs, keep each trigger to a short scannable question, and never hide essential information behind one.
Loading Indicator
The animated brand mark for blank screens and loading states. Pass a label to say what’s loading; it announces politely and falls back to a static logo when reduced motion is preferred.
Loading projects…
Prose
Rich Text Content
Wrap rich text — from a CMS, markdown, or an editor — in Prose to give it consistent brand typography: heading hierarchy, links, lists, and blockquotes, all styled to match.
- Use it for CMS or markdown content where you don’t control the markup.
- Scale it to the context, and let it inherit the surrounding colour scheme.
- For standalone headings or paragraphs in a layout, use the typography components instead.
One wrapper, consistent brand voice across all rich text throughout the app.
@code-for-canada/ui
Made with ❤️ and 🤖.