---
version: alpha
name: "Stride"
description: "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."
colors:
  primary: "#C83A08"
  on-primary: "#FFFFFF"
  secondary: "#0F9C8C"
  tertiary: "#C99400"
  neutral: "#5B6068"
  surface: "#F6F6F4"
  on-surface: "#111214"
typography:
  display-lg:
    fontFamily: "Barlow Condensed"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: "Barlow Condensed"
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.05
  headline-md:
    fontFamily: "Barlow Condensed"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.15
  headline-sm:
    fontFamily: "Barlow Condensed"
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.25
  body-md:
    fontFamily: "Barlow"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.45
  body-sm:
    fontFamily: "Barlow"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.02em
rounded:
  sm: 12px
  md: 14px
  lg: 16px
  xl: 20px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

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.

## Colors

- **primary (#C83A08):** Orange für Start- und Aufnahme-Buttons, Fortschritt und den aktiven Tab.
- **on-primary (#FFFFFF)**
- **secondary (#0F9C8C):** Petrol für Herzfrequenz und eine zweite Messgröße.
- **tertiary (#C99400):** Gelb für persönliche Bestleistungen und Erfolge.
- **neutral (#5B6068):** Kühles Grau für Labels und Einheiten.
- **surface (#F6F6F4):** Fast Schwarz; Karten eine Stufe heller.
- **on-surface (#111214)**

## Typography

Barlow Condensed Bold für Messwerte und Titel (Messwerte bis 72px mit Tabellenziffern); Barlow in 16px für Fließtext und Labels.

## Layout

Smartphone-Screens mit 20px Seitenrand, einer Tab-Leiste mit 4 Einträgen und 64px Höhe unten und Headern mit großen Titeln. Eine Hauptaktion pro Screen, in Daumenreichweite platziert.

## Shapes

16px-Ecken an Karten; pillenförmige Primär-Buttons; mindestens 48px große Touch-Ziele.

## Components

Große Messwert-Karten, ein ganzbreiter Start-Button, Fortschrittsringe und -balken in Orange und eine untere Tab-Leiste mit Icons und Labels.

## Do's 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.