Travel & Lifestyle

Strava

strava.com10 colors6 componentsBoathouseMulti-page · 12 screens

Strava connects millions of runners, cyclists, hikers, walkers and other active people through the sports they love – all on our mobile app and website.

Remix Visit

Remix

Visit

12 screenshots captured· strava.com

1 / 12 · Strava | Running, Cycling & Hiking App - Train, Track & Share · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from strava.com

Primary

#FC5200

Primary CTA, brand accent, active state

#0060D0

Secondary accent / hero band

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#21211F

Card / panel background

#000000

Alternating section band; Headings / primary text

#43423F

Body copy

#525252

Captions, secondary text

#64635E

Tertiary / placeholder text

#B2AFC0

1px borders and dividers

#E0E0DE

Neutral

Typography · Boathouse

body16px · 400 · 16px

body20px · 400 · 29px

list-item14px · 400 · 18px

caption12px · 400 · 18px

list-item17px · 400 · 29px

body22px · 400 · 28px

heading34px · 400 · 41px

heading28px · 600 · 34px

body22px · 600 · 28px

body13px · 400 · 16px

body24px · 400 · 34px

body13px · 700 · 16px

display48px · 700 · 52.8px

h132px · 600 · 32px

body14px · 400 · 14px

link15px · 400 · 20px

button16px · 600

nav-link16px · 400 · 20.8px

button14px · 600

body16px · 600 · 16px

body12px · 400 · 16px

link13px · 400 · 30px

table-header17px · 700 · 28px

body22px · 600 · 24.2px

heading13px · 700 · 16px

body17px · 700 · 21px

link13px · 700 · 30px

body20px · 700 · 29px

body17px · 600 · 22px

link14px · 400 · 18px

body14px · 500 · 18px

link24px · 500 · 31.2px

table-header16px · 700 · 18px

display60px · 500 · 88px

heading22px · 500 · 28.6px

body20px · 500 · 26px

heading24px · 700 · 28px

body24px · 700 · 31.2px

body24px · 500 · 18px

body22px · 500 · 18px

caption12px · 600 · 18px

body16px · 500 · 20.8px

h152px · 500 · 57.2px

h322px · 400 · 30.8px

body13px · 500 · 15.99px

button14px · 400 · 19px

body16px · 400 · 24px

body18px · 400 · 28.8px

heading13px · 600 · 15.99px

button13px · 500 · 15.99px

button13px · 400 · 15.99px

body14px · 400 · 19px

Typography · BoathouseExtended

h172px · 600 · 72px

h260px · 600 · 72px

display48px · 600 · 56px

h248px · 700 · 62.4px

h324px · 700 · 31.2px

display64px · 700 · 70.4px

Typography · Arial

button13px · 400

button13px · 700

Spacing

16px

20px

24px

32px

4px

8px

96px

144px

Elevation

rgba(0, 0, 0, 0.1) 0px 0px 10px 5px

rgba(0, 0, 0, 0.09) 0px 13px 26px 0px

rgba(0, 0, 0, 0.03) 0px 1px 2px 0px

rgba(13, 13, 18, 0.04) 0px 8px 24px 0px

Components · 6

Remixes of Strava

Latest remixes

No public remixes yet. Be the first to make one.

Remix it