---
version: alpha
name: "Stride"
description: "움직이는 앱을 위한 큼직한 콘덴스드 숫자와 에너지 넘치는 주황. Stride는 실시간 숫자를 가장 앞에 둡니다. 페이스, 거리, 시간을 큼직한 콘덴스드 서체로, 행동에는 에너지 넘치는 주황, 야외와 밤에도 잘 읽히는 어두운 배경."
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는 실시간 숫자를 가장 앞에 둡니다. 페이스, 거리, 시간을 큼직한 콘덴스드 서체로, 행동에는 에너지 넘치는 주황, 야외와 밤에도 잘 읽히는 어두운 배경.

## Colors

- **primary (#C83A08):** 주황. 시작·기록 버튼, 진행 상황, 활성 탭에 씁니다.
- **on-primary (#FFFFFF)**
- **secondary (#0F9C8C):** 틸. 심박수와 두 번째 지표에 씁니다.
- **tertiary (#C99400):** 노랑. 개인 최고 기록과 업적에 씁니다.
- **neutral (#5B6068):** 서늘한 회색. 라벨과 단위에 씁니다.
- **surface (#F6F6F4):** 거의 검은색. 카드는 한 단계 밝게.
- **on-surface (#111214)**

## Typography

지표와 제목은 Barlow Condensed Bold(지표는 고정폭 숫자로 최대 72px), 본문과 라벨은 Barlow 16px.

## Layout

좌우 패딩 20px의 휴대폰 화면, 높이 64px의 4개 항목 하단 탭 바, 큰 제목 헤더. 화면당 주요 행동 하나를 엄지가 닿는 곳에 둡니다.

## Shapes

카드는 16px 모서리, 알약 모양 주요 버튼, 최소 터치 영역 48px.

## Components

큰 지표 카드, 전체 폭 시작 버튼, 주황색 진행 링과 막대, 아이콘과 라벨이 있는 하단 탭 바.

## Do's and Don'ts

- 핵심 숫자를 화면에서 가장 큰 요소로 만드세요.
- 주요 버튼은 화면 아래쪽 절반에 두세요.
- 주황 위에 작은 글씨를 올리지 마세요.
- 한 화면에 포인트 색을 두 가지보다 많이 쓰지 마세요.