Buttons
Button / Primary
Padding: 15px 32px · Height: 48px, hugs content · Text: 1–3 words · Opens in: same tab · Hover: inverts to white fill, blue text and border
Button / Secondary
Padding: 15px 32px · Height: 48px, hugs content · Text: 1–3 words · Opens in: same tab · Hover: fills solid blue, border stays white
Button / Secondary — New tab
Padding: 15px 32px · Height: 48px, hugs content · Text: 1–3 words · Opens in: new tab · Use for: PDFs, external sites, third-party destinations
Button / Disabled
Padding: 15px 32px · Fill: Grey 40% · Text: match the enabled label exactly · Opens in: n/a, not clickable · No hover or tap state — signals an unavailable action
Button / Ghost
Padding: none, text hugs content · No fill or border · Text: 1–3 words · Opens in: same tab · Use for: tertiary or dismissive actions next to a primary CTA · Hover: text shifts to Blue
Button / Text Link
No padding, no fill · Available at 18px or 14px, in Blue or White · Text: 1–5 word phrase · Opens in: configurable per instance (same or new tab) · Hover: underline / color shift
Primary Button / Primary
Padding: 13px 16px · Fixed width: 190px, centred label · Text: short 2-word CTA · Opens in: same tab by default, configurable via link control · Hover: inverts to white fill, blue text and border
Primary Button / Secondary
Padding: 13px 16px · Fixed width: 190px, centred label · Text: short 2-word supporting CTA · Opens in: same tab by default, configurable via link control · Hover: fills solid blue, text stays white
