Annual Report 2026 · Draft · Not for publishing

AR26 Style Guide

Colours and text styles for the 2026 Annual Report. Everything here uses ar26- classes and the Annual Report 2026 colour variables, so nothing on this page affects the rest of the site.

01 Colours

Core
Cambridge Blue
#8EE8D8
AR26 Cambridge Blue
Cambridge Light Blue
#D1F9F1
AR26 Cambridge Light Blue
Cambridge Warm Blue
#00BDB6
AR26 Cambridge Warm Blue
Cambridge Dark Blue
#133844
AR26 Cambridge Dark Blue
Greyscale
White
#FFFFFF
AR26 White
Slate 1
#ECEEF1
AR26 Slate 1
Slate 2
#B5BDC8
AR26 Slate 2
Slate 3
#546072
AR26 Slate 3
Slate 4
#232830
AR26 Slate 4
Secondary – Crest
Light Crest
#FFE2C8
AR26 Light Crest
Warm Crest
#FFC392
AR26 Warm Crest
Crest
#FD8153
AR26 Crest
Dark Crest
#DD3025
AR26 Dark Crest
Secondary – Cherry
Light Cherry
#F2CAD8
AR26 Light Cherry
Warm Cherry
#E18AAC
AR26 Warm Cherry
Cherry
#CD3572
AR26 Cherry
Dark Cherry
#911449
AR26 Dark Cherry
Secondary – Purple
Light Purple
#F2ECF8
AR26 Light Purple
Warm Purple
#D1B7EB
AR26 Warm Purple
Purple
#A368DF
AR26 Purple
Dark Purple
#681FB1
AR26 Dark Purple
Secondary – Indigo
Light Indigo
#EBEDFB
AR26 Light Indigo
Warm Indigo
#B0B9F1
AR26 Warm Indigo
Indigo
#5366E0
AR26 Indigo
Dark Indigo
#29347A
AR26 Dark Indigo
Secondary – Green
Light Green
#DFF2EA
AR26 Light Green
Warm Green
#AFDFCB
AR26 Warm Green
Green
#4DB78C
AR26 Green
Dark Green
#13553A
AR26 Dark Green

02 Typography

Headings
Big Text
Feijoa Medium 500 · 72px / 75px
Tablet: 52px / 105%
Mobile: 32px / 105%
Class: ar26-big-text
The quick brown fox jumps over the lazy dog.
H1
Feijoa Medium 500 · 56px / 110%
Tablet: 46px / 110%
Mobile: 36px / 110%
Class: ar26-h1
The quick brown fox jumps over the lazy dog.
H2
Feijoa Medium 500 · 40px / 50px
Tablet: 34px / 125%
Mobile: 28px / 125%
Class: ar26-h2

The quick brown fox jumps over the lazy dog.

H3
Feijoa Medium 500 · 38px / 49px
Tablet: 30px / 130%
Mobile: 24px / 130%
Class: ar26-h3

The quick brown fox jumps over the lazy dog.

H4
Feijoa Medium 500 · 32px / 40px
Tablet: 26px / 125%
Mobile: 22px / 125%
Class: ar26-h4

The quick brown fox jumps over the lazy dog.

H5
Feijoa Medium 500 · 26px / 28px
Tablet: 22px / 130%
Mobile: 18px / 27px
Class: ar26-h5
The quick brown fox jumps over the lazy dog.
H6
Feijoa Medium 500 · 19px / 21px
Tablet: 18px / 130%
Mobile: 16px / 24px
Class: ar26-h6
The quick brown fox jumps over the lazy dog.
Body
Paragraph
Open Sans Light 300 · 18px / 31px
Tablet: 16px / 155%
Mobile: 14px / 19px
Class: ar26-paragraph

The default body copy across the site is the Paragraph style. Use this as the standard body style.

Text Large
Open Sans Light 300 · 20px / 30px
Tablet: 18px / 150%
Mobile: 16px / 150%
Class: ar26-text-large

The quick brown fox jumps over the lazy dog.

Text Medium
Open Sans Regular 400 · 18px / 27px
Tablet: 17px / 150%
Mobile: 16px / 150%
Class: ar26-text-medium

The quick brown fox jumps over the lazy dog.

Text Regular
Open Sans Regular 400 · 16px / 24px
Tablet: same as desktop
Mobile: same as desktop
Class: ar26-text-regular

The quick brown fox jumps over the lazy dog.

Text Small
Open Sans Light 300 · 14px / 19px
Tablet: same as desktop
Mobile: 14px / 140%
Class: ar26-text-small

The quick brown fox jumps over the lazy dog.

Text Tiny
Open Sans Light 300 · 12px / 15px
Tablet: same as desktop
Mobile: 12px / 130%
Class: ar26-text-tiny

The quick brown fox jumps over the lazy dog.

Footnote
Open Sans Light 300 · 12px / 16px
Tablet: same as desktop
Mobile: same as desktop
Class: ar26-footnote

The quick brown fox jumps over the lazy dog.

Other
Quote
Feijoa Medium 500 · 28px / 35px
Tablet: 25px / 125%
Mobile: 22px / 125%
Class: ar26-quote
The quick brown fox jumps over the lazy dog.
Number H1
Open Sans Light 300 · 80px / 120px
Tablet: 60px / 130%
Mobile: 43px / 115%
Class: ar26-number-h1
+5.6%
Number H2
Open Sans Light 300 · 60px / 90px
Tablet: 45px / 130%
Mobile: 30px / 115%
Class: ar26-number-h2
+5.6%
Tag – Descriptions
Open Sans Regular 400 · 12px / 120% · uppercase
Tablet: same as desktop
Mobile: same as desktop
Class: ar26-tag
The quick brown fox jumps over the lazy dog.
Eyebrow – Label Large
Open Sans Medium 500 · 16px / 20px · uppercase
Tablet: 14px / 125%
Mobile: 12px / 14.7px
Class: ar26-eyebrow
The quick brown fox jumps over the lazy dog.
Eyebrow – Section
Open Sans Medium 500 · 12px / 14px · uppercase
Tablet: 11px / 130%
Mobile: 10px / 14.7px
Class: ar26-eyebrow-section
The quick brown fox jumps over the lazy dog.
CTA (Button Primary)
Open Sans SemiBold 600 · 12px / 12px · uppercase
Tablet: same as desktop
Mobile: same as desktop
Class: ar26-cta
Read the full report
Eyebrow – Stats
Open Sans Regular 400 · 12px / 14px · uppercase · letter-spacing 1.152px
Tablet: same as desktop
Mobile: same as desktop
Class: ar26-eyebrow-stats
The quick brown fox jumps over the lazy dog.
Nav
Feijoa Medium 500 · 14px / 115%
Tablet: same as desktop
Mobile: 13px / 115%
Class: ar26-nav
Strategy and Performance
Card title
Feijoa Medium 500 · 22px / 120% (used in Figma cards, not a saved Figma style)
Tablet: same as desktop
Mobile: same as desktop
Class: ar26-card-title
Cardiovascular disease in pregnancy

03 How to use

  • Use only ar26- classes on Annual Report 2026 pages. Don’t use them on other pages, and don’t use the older site classes (heading-1, text-size-…, paragraph) on AR26 pages.
  • Colours: use the variables in the “Annual Report 2026” collection (all named AR26 …). Don’t use the Base collection colours on AR26 pages.
  • Sizes: desktop above 991px, tablet 991px and below (in-between sizes), mobile 767px and below (Figma mobile styles).
  • Fonts: Feijoa Medium 500 for all headings and quotes; Open Sans 300 / 400 / 500 / 600 for everything else.
  • New AR26 classes follow the same pattern: ar26-[name] for text styles, ar26-[block]_[element] for layout, ar26-is-[variant] for variants.