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
- StrideBlackText 17.7:1 · AA#191817
Text, the wordmark on light grounds, and big serious surfaces.
- StrideWhiteText 17.7:1 · AA#FFFFFF
The page. Text and the wordmark on dark grounds and photography.
- StrideBlueText 4.6:1 · AA#0980F6
The signal: the mark, a progress bar, one highlight. Never small text.
- StrideOff-WhiteText 16.6:1 · AA#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.
- StrideBlue DeepText 7.0:1 · AA#0058AD
StrideBlue's working shade: links, buttons and blue text. 7:1 on white, where StrideBlue manages 3.9:1.
- Stride NavyText 15.4:1 · AA#12263A
Chapter covers, the footer and dark specimen panels — a cooler step away from StrideBlack.
- Stride SlateText 5.0:1 · AA#59728D
Secondary text — captions, metadata, page numbers. 5:1 on white. Never body copy or headlines.
- Stride Pale BlueText 13.6:1 · AA#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 StrideWhite17.73:1 · Any text
- StrideWhite on Stride Navy15.40:1 · Any text
- StrideBlue Deep on StrideWhite7.00:1 · Any text
- Stride Slate on StrideWhite4.98:1 · Any text
- StrideBlue on StrideWhite3.87:1 · Large text and graphics only
- StrideWhite on StrideBlue3.87:1 · Large text and graphics only
Download
- Palette sheetAll eight values with their names and hex codes, as a single sheet.SVG · 3.3 KB
- Design tokensThe palette and the type scale as machine-readable values, mirroring what this page declares.JSON · 2.7 KB