STRIDE
Log in
Menu
01Brand02Visual identity03Application04Asset library

2.7Visual identityBasics

Patterns

The six patterns

Every STRIDE pattern is drawn from the wordmark. The strokes lean at 15.7°, the angle of the stem of the T, and they’re cut flat top and bottom the way the letters are. That’s what makes a box liner or a race bib feel like STRIDE before anyone reads the name.

There are six, two for each job. Pick by how loud the surface should be, use one per surface, and keep type off anything busy.

The set

Loud

For campaigns and race day. They carry the energy, so type never sits on them.

Lean

Speed dashes on the wordmark’s lean, cut flat top and bottom like the stem of the T.

Use for Campaign grounds, social, motion end frames, the shoebox lid.

Tile · SVG · 2.5 KB

Lanes

Eight track lanes and a staggered start, the outer lane furthest ahead.

Use for Race day: bibs, start-line banners, event pages, wayfinding.

Tile · SVG · 855 B

Working

For product and data. They can sit behind big numbers, tone on tone.

Splits

A stopwatch scale with every fifth tick long. The long ticks line up on the lean.

Use for App and data surfaces, training plans, product spec panels.

Tile · SVG · 1.4 KB

Contour

Topography, with a heavier index line every fifth contour, as on a trail map.

Use for Trail and outdoor ranges, maps, editorial pages, box liners.

Tile · SVG · 43.9 KB

Quiet

For things people hold and wear. Behind text only as a pale tint.

Vent

Laser-cut ventilation: short slots on the lean, set in a brick bond.

Use for Apparel prints, product page grounds, insoles and labels.

Tile · SVG · 808 B

Monogram

The wordmark in a brick bond, half a step over on every row.

Use for Tissue paper, packing tape, garment bags and box liners. Nothing else.

Tile · SVG · 3.7 KB

Colourways

Two colours, both from the palette: one for the drawing, one for the ground. These six pairs are the whole list. The contrast between the two sets how loud the pattern is, and only the two quietest pairs can have type over them.

  • StrideBlue on StrideWhite

    Campaign · 3.87:1

  • StrideWhite on StrideBlue

    Race day and social · 3.87:1

  • StrideWhite on Stride Navy

    Night and premium · 15.40:1

  • Stride Navy on StrideOff-White

    Editorial and packaging · 14.37:1

  • StrideBlue on StrideBlue Deep

    Tone on tone, behind big numbers · 1.81:1

  • Stride Pale Blue on StrideWhite

    Tint, the only one behind text · 1.30:1

In use

Pattern in use: shoebox tissue
Shoebox tissue. Monogram in Stride Navy on StrideOff-White, closed with the blue seal.
Pattern in use: race bib
Race bib. Lanes in a band of StrideBlue, kept clear of the number.
Pattern in use: app summary
App summary. Splits tone on tone behind the big number, fading out before the small type.
Pattern in use: social post
Social post, 4:5. Lean all round, the headline on a solid Stride Navy panel.

Scale and contrast

Pattern at 100%
100% As drawn. The default everywhere.
Pattern at 50%
50% The smallest. Lines are still a pixel or more.
Don’t
Pattern at 25%
25% Too small. The strokes blur into a grey tint.
  • Size it from the tile, not the surface. Scale a pattern up as far as you like; never take it below 50%.
  • Keep type off loud patterns. Put headlines on a solid panel and let the pattern run around it.
  • Tint before text. Behind body copy, use only Stride Pale Blue on StrideWhite. StrideBlack text still measures 13.6:1 where it crosses a stroke.
  • One per surface, and never inside the logo’s clear space.

Do and don’t

Do
Pattern do: headline on a solid panel
Run the pattern around a solid panel and set the headline on the panel.
Don’t
Pattern don't: headline on a loud pattern
Don’t set a headline straight on a loud pattern. Neither can be read.
Don’t
Pattern don't: rotated
Don’t rotate a pattern. The lean always matches the wordmark.
Don’t
Pattern don't: two patterns layered
Don’t layer two patterns on one surface.

Download

  • All six patterns

    Every tile as SVG in StrideBlack on transparent, with a note on tiling them in Figma and on the web.

    ZIP · 13.7 KB

  • Lean tile

    448 × 400 px, repeats seamlessly. Loud.

    SVG · 2.5 KB

  • Lanes tile

    320 × 320 px, repeats seamlessly. Loud.

    SVG · 855 B

  • Splits tile

    70 × 500 px, repeats seamlessly. Working.

    SVG · 1.4 KB

  • Contour tile

    640 × 400 px, repeats seamlessly. Working.

    SVG · 43.9 KB

  • Vent tile

    36 × 48 px, repeats seamlessly. Quiet.

    SVG · 808 B

  • Monogram tile

    144 × 88 px, repeats seamlessly. Quiet.

    SVG · 3.7 KB