Website style guide · October 2026
Warm, dignified, easy to read
The colours, type, links, buttons and cards used across the St. Patrick’s Home website. Many visitors are older adults with reduced vision, so every pairing here meets WCAG 2.1 AA.
Colour
Three brand colours carry the site. Gold is a background colour only. Tints are for section backgrounds, tiles and callouts. Backgrounds are always solid: no gradients, textures or patterns.
Core palette
#00764B
--sp-green
Primary. Headings, primary buttons, footer, focus ring.
#66375B
--sp-aubergine
Secondary. Donate, stats and CTA bands, step numbers.
#A82A5E
--sp-raspberry
Accent. Links, eyebrows, section numbers, story band.
#FFCE6C
--sp-gold
Background only. Notice banners, with ink text.
#2E2A26
--sp-ink
All body text.
#6B645C
--sp-ink-muted
Small metadata only.
Tints and borders
#E8F7F2
--sp-mint
#FFF4E3
--sp-cream
#E7FBFF
--sp-ice
#F4EAF2
--sp-lilac
#FFF0F6
--sp-pink
#FFEFE8
--sp-peach
#E2DED8
--sp-border
#E0DBD1
--sp-border-card
Pairings
- Gold text, icons, borders or focus rings on white.
- White text on gold.
- Green on gold, except at large heading sizes.
- Aubergine or raspberry text on mint. Use green or ink instead.
- Muted ink for body copy. It is for small metadata only.
Typography
Plus Jakarta Sans for headings, quotes, stats and step numbers. Figtree for everything else. Use only the sizes below; body text is never smaller than 16px.
Headings, quotes, stats. Weights 600 and 700.
Body, navigation, buttons, labels. Weights 400, 500, 600 and 700.
Display
Jakarta 56 / 1.1 · 700
H1
Jakarta 48 / 1.15 · 700
H2
Jakarta 40 / 1.2 · 700
H3
Jakarta 32 / 1.25 · 700
H4
Jakarta 22 / 1.3 · 600
Quote
Jakarta 24 / 34 · 500
Stat
Jakarta 48 / 1.1 · 700
Lead
Figtree 20 / 1.5 · 400
Body
Figtree 18 / 28 · 400
Families are welcome at lunch or supper. Speak to the Food Service Supervisor to arrange it.
Small
Figtree 16 / 1.5 · 400
Card descriptions, captions and secondary text.
Nav
Figtree 16 · 500
Eyebrow
Figtree 14 · 700 · 0.08em
Links
Raspberry, 18px, weight 600. No underline at rest. Underline on hover. Internal links end with →. External links and PDFs end with ↗.
Headings and buttons use sentence case. “On this page” links and numbered section headings use title case. UPPERCASE is for eyebrows, menu group labels and date chips only.
Buttons and links
Pill buttons, 50px tall. Hover swaps the colour, never the opacity. Internal links end with →, external links and PDFs with ↗.
Primary
Green. The main action on a page. Hover: aubergine.
Secondary
Aubergine. Reserved for Donate. Hover: raspberry.
Outline
2px green border. Second action beside a primary. Hover: green fill.
Text link
Explore long-term care → Raspberry, underlines on hover.
Focus: a 3px green outline with a 3px offset (white on dark bands). Never gold.
Cards
White, with a 1px warm-grey border and no shadow at rest. On hover a card lifts 4px, gains a soft shadow and a 2px raspberry outline. Card photos are rectangular, full-bleed to the top.
Long-term Care
Round-the-clock care in a home with 288 residents across nine Resident Home Areas.
Info box
A titled fact or short explanation. Used in grids of two, three or four. 14px corners, 24px padding.
Person-directed care
Residents choose how they spend their day.
Faith at home
Mass six days per week in the chapel.
Since 1865
Over 160 years of care in Ottawa.
Feature tiles: borderless tints, rotated across a row. Info boxes use 14px corners and 24px padding. Sub-page cards use 16px corners.
03
Layout and Spacing
1280px
Content width, centred on a 1440px canvas.
80px gutters
Desktop side margins. 20–24px on mobile (390px).
96–128px
Space between major sections. Numbered sections sit 96px apart.
260px sidebar
Sticky “On this page” menu on inner pages, 64px from the content.
Spacing scale
Corner radii
Pill · 999px
Buttons, chips, filter pills.
16px
Sub-page and news cards.
14px
Info boxes, callouts, FAQs, banners.
12px
Small cards and document rows.
8px
Form inputs.
Arch
Story and CTA band photos.
06
Content Components
Numbered section heading
02
How to Apply
Numbers mark content sections only, never design elements such as CTA bands or related-page cards.
Callout and notice
Lost and Found reporting
Mint callout: a short message with one action.
NOTICE · [DATE AND TIME POSTED]
Gold notice banner
Only shown when something urgent happens, on the Tours and Contact pages. Ink text only. Read the full notice (PDF) ↗
Frequently asked questions
How do I book a tour?
Can families join a resident for a meal?
Process steps
1
Visit
Book a guided tour, weekdays at 3:30pm.
2
Apply
Start with Ontario Health atHome (OHAH).
3
Move in
We help you settle in from the first day.
Documents
2025 Annual Report
PDF · Published 2025
Resident and Family Handbook
PDF · Updated 2026
Lists
- Baking Program
- News and Views
- Knit and Chat
- Meditation
10px green dots instead of default bullets. Semibold for short item lists, regular weight for sentences.
07
Forms
Labels sit above fields. Inputs are 44px tall with 8px corners; focus turns the border 2px green.
08
Imagery
The arched photo
Rounded top, square bottom, like a doorway. Used for story band and CTA band photos.
Warm, natural light. Everyday moments with residents, staff and families.
- Warm, natural light. Everyday moments with residents, staff and families.
- Set in recognisable rooms at St. Pat’s wherever possible.
- Each photo represents one page or service only.
- No clinical or stock-hospital imagery. Page-header subjects sit right of centre, clear of the text fade.
- Every image has descriptive alt text.