Skip to main content
preloader

Style Reference

Design tokens

Shared with the donor dashboard. Defined in _variables.scss as SCSS variables and --sa-* CSS custom properties.

Colours

Ink
#002d43 --sa-ink
Canvas
#f4f8fa --sa-canvas
Pale blue
#ecf7fe --sa-blue-pale
Accent cyan
#07c6d2 --sa-blue-mid
Link (light)
#0a7079 --sa-link
Aa
Link (dark)
#5ce1eb --sa-link-on-dark
Success
#00736c --sa-green
Pale amber
#fff6db --sa-amber-pale

Radii & shadows

Radii: 12 / 16 / 20 / 28px and pill (--sa-r-sm to --sa-r-pill). Shadows are soft and navy-tinted (--sa-sh-sm to --sa-sh-xl). Focus ring: 3px solid --sa-cyan-ink, offset 2px.

Consistency rules

Buttons by surface

  • Light surfaces (white, canvas, pale panels, cards): .btn-primary for the main CTA; .btn-outline-primary for secondary / card actions.
  • Dark surfaces (.bg-secondary, .bg-ink, footer): .btn-outline-light (preferred — homepage “Looking for something else?”). .btn-on-dark when a solid white CTA is needed.
  • Never put ink .btn-primary directly on a dark background. Nested white cards still use light-surface buttons.

Links

  • All anchors default to teal #0a7079 (not Bootstrap #007bff).
  • Prose and standalone text links use .link (or sit inside a p) so they underline.
  • On dark surfaces, use .link-on-dark or wrap copy in .text-light — bright cyan #5ce1eb.
  • Legacy .link-primary is remapped to teal; prefer .link in new markup.

Forms

  • Inputs use soft 12px corners ($sa-r-sm) — not pill radius. Pills are for buttons only.
  • Labels: 13px / weight 600 / ink-2. Fields: 14px, min-height 44px, border $sa-border.
  • Focus: cyan mid border + --sa-focus-ring. Errors: red border + --sa-focus-ring-error.

Typography

Figtree throughout. Headings max weight 700; lead sits one step above body.

Display — 40px

Gift Aid made easy

H1 — 36px

Page title

H2 / .section-title — 28px

Section heading

H3 — 22px

Subsection

H4 — 20px

Card title

Eyebrow label

Lead paragraph at 18px for intros and decks.

Body at 16px with a 1.6 line-height. Inline links like this one are teal and underlined.

Small / caption text at 14px.

FAQ section heading (22px / 600)

Links

Light surfaces

Inside a paragraph: inline prose link.

Standalone (use .link):

Also remapped: .link-primary,

Dark surfaces

Paragraph on dark: auto cyan link.

.link-on-dark utility

Outline light On-dark solid

Surfaces & panels

.sa-card

White surface, border, 20px radius, soft navy shadow.

.sa-panel

Pale feature panel. Pair with .bg-blue-pale, .bg-teal-pale, or .bg-amber-pale.

Primary

.sa-tile

Canvas-tinted metric tile.

.sa-chip

Dark panel pattern

Same treatment as “Looking for something else?” — outline-light CTA on ink.

Buttons

Pill-shaped, minimum 44px tall. Choose the variant for the surface behind the button.

Light surfaces
Dark surfaces
Sizes
States

Forms

Matched to the donor dashboard: 12px corners, 13px labels, 14px fields, cyan focus ring.

We’ll only use this to reply to you.

States

Please provide a valid email address

Rules: soft $sa-r-sm (12px) radius — not pills. Pills stay on buttons. Focus uses --sa-blue-mid + --sa-focus-ring; errors use --sa-red + --sa-focus-ring-error.

FAQ accordion tone

Frequently asked questions

Questions: 16px / weight 500 — not bold headings.

Accessibility

  • Skip link to #main-content on every page.
  • Keyboard focus: 3px teal-ink :focus-visible ring.
  • prefers-reduced-motion disables AOS and transitions.
  • Link colours meet WCAG AA; buttons meet the 44px touch target.

Focus ring demo — tab to this control:

Focusable sample