Stride
Design system for the Apple Design Award-winning fitness tracking app. Built for everyone, not just athletes. Stride counts.
Overview
Stride is a design-forward fitness tracker and social network created by Luke Beard. The app delivers workout stats in beautiful, shareable formats — dynamic charts, animated 3D maps, AR experiences, and gorgeous cards with the signature oval photo mask.
Brand Identity
The oval is the signature brand element — originally a photo mask for workout cards, it now appears throughout the identity. Combined with SF Symbols, SF Pro Rounded typography, and vibrant gradients, it creates a distinctive visual language.
Key Visual Principles
Colors
A dark-first brushwork with vibrant, activity-coded accent colors. The brand gradient (Flare) runs from orange to red.
Brand
Backgrounds
Text
System Accents
Activity Colors
Typography
Built on Apple's SF Pro family. SF Pro Display for headings, SF Pro Text for body, SF Pro Rounded for playful stat displays. Heavy use of SF Symbols throughout.
Type Scale
Font Weights
Spacing
4px base unit with a consistent scale. Screen padding is 16px, card padding 16px, section gaps 24px.
Scale
Common Usage
| Token | Value | Usage |
|---|---|---|
screenPadding | 16px | Paystreamtal padding for all screens |
cardPadding | 16px | Internal card padding |
sectionGap | 24px | Vertical gap between sections |
listItemGap | 12px | Gap between list items |
inlineGap | 8px | Gap between inline elements |
Borders & Shadows
Subtle borders with low-opacity whites. Dark mode relies on elevation through background lightness rather than heavy shadows.
Border Radius
Border Colors
| Token | Value | Preview |
|---|---|---|
border-default | rgba(255,255,255,0.1) | |
border-subtle | rgba(255,255,255,0.05) | |
border-emphasis | rgba(255,255,255,0.2) |
Shadows
Cards
The workout card is the core visual identity — a shareable summary with the signature oval photo mask, route map, and beautiful stat typography.
Workout Card
Card Tokens
| Property | Value |
|---|---|
| Background | #1C1C1E |
| Border Radius | 16px |
| Padding | 20px |
| Border | 1px solid rgba(255,255,255,0.1) |
| Hover Transform | translateY(-2px) |
| Hover Shadow | 0 12px 40px rgba(0,0,0,0.6) |
| Stat Font | SF Pro Rounded / 48-64px / 800 |
| Oval Mask | border-radius: 50% |
App UI Patterns
Key UI patterns from the Stride app: activity feed, goal rings, achievement medals, and the Andi mascot.
Activity Feed
Goal Rings
Achievement Medals
App Screen Mockups
Layout
Mobile-first layout system. Activity feed uses single column; workout card gallery uses 2-column grid.
Breakpoints
| Name | Value | Usage |
|---|---|---|
phone | 375px | iPhone standard |
phoneLarge | 428px | iPhone Pro Max |
tablet | 768px | iPad portrait |
desktop | 1024px | iPad landscape / desktop |
wide | 1440px | Wide desktop |
Max Width
| Context | Value |
|---|---|
| Exposure page content | 960px |
| App content area | 100% (screen width) |
Z-Index Scale
| Layer | Value |
|---|---|
base | 0 |
card | 1 |
sticky | 10 |
overlay | 50 |
modal | 100 |
toast | 200 |
Motion
Spring-based animations for interactive elements. Longer durations for 3D medal rotations and route fly-throughs.
Duration
| Token | Value | Usage |
|---|---|---|
instant | 100ms | Micro-interactions, toggles |
fast | 200ms | Hover states, button presses |
normal | 300ms | Page transitions, standard |
slow | 500ms | Elaborate animations |
medal | 1200ms | 3D medal rotation on unlock |
route3d | 2000ms+ | 3D route fly-through animation |
Easing
| Token | Value | Usage |
|---|---|---|
default | cubic-bezier(0.25, 0.1, 0.25, 1) | Standard transitions |
spring | cubic-bezier(0.34, 1.56, 0.64, 1) | Bouncy interactions |
easeIn | cubic-bezier(0.42, 0, 1, 1) | Exit animations |
easeOut | cubic-bezier(0, 0, 0.58, 1) | Enter animations |
easeInOut | cubic-bezier(0.42, 0, 0.58, 1) | Symmetrical transitions |
Interactive Demo
Hover over each box to see the easing curve in action.
Key Animations
Tailwind Mapping
The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.
// tailwind.config.js
import designSystem from './design-system.json';
export default {
theme: {
extend: designSystem.tailwind.theme.extend,
},
};
// Also reuse designSystem.tailwind.componentRecipes for common surfaces.
| Scope | Primary | Body Font | Radius | Shadow | Breakpoint |
|---|---|---|---|---|---|
| Design System | — | SF Pro Display | 12px | 0 4px 12px rgba(0, 0, 0, 0.4) | 375px |
| Scope | Recipe | Class Pattern | Notes |
|---|---|---|---|
| Design System | buttonPrimary | inline-flex items-center justify-center gap-2 rounded-button bg-brand-primary text-text-inverse shadow-small px-4 py-2 text-body font-semibold transition-colors | Primary action button using exported brand, radius, and shadow tokens. |
| Design System | surfaceCard | rounded-card bg-surface-base text-text-primary border border-border-subtle shadow-medium p-6 | Default surface/card treatment for high-visibility content areas. |
| Design System | inputField | rounded-button border border-border-subtle bg-surface-base text-text-primary px-3 py-2 text-body focus:outline-none focus:ring-2 focus:ring-focus-ring | Base text input treatment aligned to the exported radius, border, and focus tokens. |