Stride: Fitness-App-Designsystem
App · Dunkel · Kräftig · FitnessStride
Große kondensierte Zahlen und ein energiegeladenes Orange für Bewegungs-Apps.
Stride stellt Live-Zahlen an die erste Stelle: Tempo, Distanz und Zeit in einer großen kondensierten Schrift, ein energiegeladenes Orange für die Aktion und ein dunkler Hintergrund, der draußen und nachts gut lesbar ist.
Vorschau
Live aus den Tokens unten gerendert, in den Schriften des Systems.
9:41
Guten MorgenHeuteWochenziel4 von 5 TagenAls NächstesMorgenroutine15 Min.Team-Check-in30 Min.Abendrückblick10 Min.
StartStatistikPlanIch9:41
Diese WocheGesamt7,842+12 % ggü. VorwocheSession starten
StartStatistikPlanIch9:41
EinstellungenMitteilungenTägliche ErinnerungenEinheitenMetrisch
StartStatistikPlanIchIn deinem Projekt verwenden
Füge das in Codex oder Claude Code ein. Der Agent speichert die Spezifikation als DESIGN.md und hält sich ab dann daran.
Dieses Projekt verwendet das Designsystem Stride. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/stride.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.
Tokens
Farben
Helles Theme
- background#F6F6F4oklch(0.973 0.003 106.448)
- foreground#111214oklch(0.182 0.004 264.459)
- card#FFFFFFoklch(1 0 0)
- card-foreground#111214oklch(0.182 0.004 264.459)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#111214oklch(0.182 0.004 264.459)
- primary#C83A08oklch(0.556 0.186 36.138)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#ECECEAoklch(0.943 0.003 106.45)
- secondary-foreground#111214oklch(0.182 0.004 264.459)
- muted#EFEFEDoklch(0.952 0.003 106.45)
- muted-foreground#5B6068oklch(0.487 0.014 259.822)
- accent#E7E7E4oklch(0.927 0.004 106.477)
- accent-foreground#111214oklch(0.182 0.004 264.459)
- destructive#C0182Foklch(0.519 0.197 22.16)
- border#DEDEDBoklch(0.9 0.004 106.48)
- input#D0D0CCoklch(0.856 0.005 106.514)
- ring#C83A08oklch(0.556 0.186 36.138)
- chart-1#C83A08oklch(0.556 0.186 36.138)
- chart-2#0F9C8Coklch(0.623 0.109 182.094)
- chart-3#C99400oklch(0.699 0.144 82.914)
- chart-4#4B5BD6oklch(0.53 0.188 272.633)
- chart-5#C2457Foklch(0.579 0.169 354.99)
Dunkles Theme
- background#0D0E10oklch(0.164 0.005 264.443)
- foreground#F4F4F2oklch(0.967 0.003 106.449)
- card#17191Coklch(0.213 0.007 258.366)
- card-foreground#F4F4F2oklch(0.967 0.003 106.449)
- popover#17191Coklch(0.213 0.007 258.366)
- popover-foreground#F4F4F2oklch(0.967 0.003 106.449)
- primary#FF5B1Foklch(0.683 0.21 37.964)
- primary-foreground#0D0E10oklch(0.164 0.005 264.443)
- secondary#22252Aoklch(0.264 0.01 260.699)
- secondary-foreground#F4F4F2oklch(0.967 0.003 106.449)
- muted#1C1F23oklch(0.238 0.009 255.597)
- muted-foreground#9097A0oklch(0.674 0.016 254.645)
- accent#262A30oklch(0.284 0.012 258.372)
- accent-foreground#F4F4F2oklch(0.967 0.003 106.449)
- destructive#FF4D6Aoklch(0.678 0.213 15.77)
- border#2A2E34oklch(0.3 0.012 258.371)
- input#33383Foklch(0.339 0.014 256.774)
- ring#FF5B1Foklch(0.683 0.21 37.964)
- chart-1#FF5B1Foklch(0.683 0.21 37.964)
- chart-2#3DD6C4oklch(0.794 0.127 183.43)
- chart-3#FFC53Doklch(0.854 0.157 84.13)
- chart-4#7C8CFFoklch(0.681 0.169 275.032)
- chart-5#FF7AB6oklch(0.75 0.173 353.77)
Schriften
- Überschriften
- Barlow Condensed · 700
- Fließtext
- Barlow · 500
- Monospace
- Barlow Condensed
Schriftgrößen
- display · 72/0.95 · -0.01emZwölf Boxkämpfer jagen Viktor
- h1 · 34/1.05Zwölf Boxkämpfer jagen Viktor
- h2 · 24/1.15Zwölf Boxkämpfer jagen Viktor
- h3 · 19/1.25Zwölf Boxkämpfer jagen Viktor
- body · 16/1.45Zwölf Boxkämpfer jagen Viktor
- small · 13/1.35 · 0.02emZwölf Boxkämpfer jagen Viktor
Radius, Abstände und Schatten
Eckenradiussm 12pxmd 14pxlg 16pxxl 20px
Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px
SchattenKeiner: Tiefe entsteht durch Rahmen und Farbe.
Layout
- Touch-Ziele
- 48px
- Tab-Leiste
- 64px, 4 Einträge, icons with labels
- Bildschirmrand
- 20px
- Navigation
- bottom tab bar; large title headers
- Ziffern
- tabular, condensed for live metrics
Ideal für
- Lauf- und Rad-Apps
- Workout- und Gym-Tracker
- Gewohnheits- und Ziele-Apps
- Sport-Dashboards
Dos and Don’ts
- Mach die wichtigste Zahl zum größten Element auf dem Screen.
- Platziere Primär-Buttons in der unteren Bildschirmhälfte.
- Setze keinen kleinen Text auf Orange.
- Verwende nicht mehr als zwei Akzentfarben pro Screen.
Weitere Designsysteme für Apps
- PantryAppWarm, freundlich und appetitlich, für Essens- und Bestell-Apps.Überschriften in Bricolage Grotesque
- CalmAppSanftes Salbeigrün, eine milde Serife und Raum zum Atmen.Überschriften in Newsreader
- WalletAppKlare Kontostände, ruhiges Grün und Zahlen, denen du vertrauen kannst.Überschriften in Manrope