features.athletic-training-zones · Training zones

A features pattern from Athletic Sport, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 3. Give the section root data-pattern="features.athletic-training-zones". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Display title in 1–8, a line in 9–12; then three to five full-width zone rows on the surface colour: a big italic number (step 5) in 1–2, a slanted stripe in 3, title 4–7, text 8–12.
Slots
title, body, features[3..5]
Grid areas
title 1-8 · line 9-12 · number 1-2 · stripe 3-3 · name 4-7 · text 8-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #FF3B00 · accent2 #00A1BA · Barlow Condensed / Barlow · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Display title at step 6 (≤16 ch) in 1–8, bottom-aligned with a line in 9–12. Then three to five zone rows on the surface colour, 8 px apart, each full width: a big italic number at step 5 in the link colour in 1–2, a slanted accent stripe in column 3, the italic caps h3 in 4–7 and a paragraph in 8–12.

What we do

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

01

Positioning

Find the one sentence your best customers already believe.

02

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

03

Websites

Fast, editable sites built on the CMS your team already knows.

04

Sales enablement

Decks, one-pagers and demos your reps actually use.