2.5Visual identityBasics
Colours
We picked these colours to sound like us: sharp, calm and athletic. Black and white do most of the work; StrideBlue is the signal people spot across a crowded start line. Used consistently they make digital and print feel like one brand.
Primary colours
#191817
Text, the wordmark on light grounds, and big serious surfaces.
#ffffff
The page. Text and the wordmark on dark grounds and photography.
#0980f6
The signal: the mark, a progress bar, one highlight. Never small text.
#f2f8fc
Quiet panels and specimen grounds on white pages.
Secondary colours
Support colours for layout, hierarchy and text — never a substitute for a primary colour, and never used for the logo.
#0058ad
StrideBlue's working shade: links, buttons and blue text. 7:1 on white, where StrideBlue manages 3.9:1.
#12263a
Chapter covers, the footer and dark specimen panels — a cooler step away from StrideBlack.
#59728d
Secondary text — captions, metadata, page numbers. 5:1 on white. Never body copy or headlines.
#d7e3f0
Dividers and hairline borders between sections. A tint of Stride Slate, not a standalone accent.
Accessible pairings
Ratios are worked out from the values above. Body text needs 4.5:1; headlines, icons and graphics need 3:1.
StrideBlack on StrideWhite
17.73:1 · Any text
StrideWhite on Stride Navy
15.40:1 · Any text
StrideBlue Deep on StrideWhite
7.00:1 · Any text
Stride Slate on StrideWhite
4.98:1 · Any text
StrideBlue on StrideWhite
3.87:1 · Large text and graphics only
StrideWhite on StrideBlue
3.87:1 · Large text and graphics only
Download
Palette sheet
All eight values with their names and hex codes, as a single sheet.
Design tokens
The palette and the type scale as machine-readable values, mirroring what this page declares.