Strava

오렌지 액티비티 맵 트레이스와 세그먼트 리더보드의 운동 소셜 톤

서양모빌리티소셜따뜻한modern-minimal고딕comfortablesharpflat라이트다크한글 지원출시 2009개정 2024

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: Strava
한 줄 정체성: 러닝·라이딩 GPS 액티비티를 시각화·공유·경쟁하는 글로벌 운동 소셜 네트워크
공식 디자인 철학: "If it's not on Strava, it didn't happen." — 모든 액티비티는 기록되어 비교 가능해진다
시그니처 요소 1개: 스트라바 오렌지(#FC5200) GPS 트레이스와, 거리·페이스·고도를 한눈에 읽는 액티비티 데이터 카드

Tone & Mood

톤 & 무드

핵심 키워드 3개: 역동, 성취, 경쟁
무드 설명: 밝은 액티비티 피드와 차콜 지도 위를 스트라바 오렌지 트레이스가 가른다. 거리·페이스·고도 숫자는 굵게, 라벨은 작고 차분하게 두어 운동의 결과와 소셜 반응을 함께 읽게 한다.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable — 데이터 카드가 빽빽하지만 카드 간 여백은 분명
모서리 성향: Sharp (0~4px) — 운동 데이터의 정확성 강조
평면성: Flat — 그림자 없음, 색 대비로만 위계

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Strava Orange */
  --color-primary-50:  #FFF1E5;
  --color-primary-100: #FFD9B8;
  --color-primary-200: #FFB880;
  --color-primary-300: #FF9347;
  --color-primary-400: #FE7321;
  --color-primary-500: #FC5200;   /* Strava Orange */
  --color-primary-600: #E04800;
  --color-primary-700: #B83C00;
  --color-primary-800: #8F2E00;
  --color-primary-900: #5C1E00;

  /* Secondary - KOM Yellow (리더보드 1위 배지) */
  --color-secondary-500: #FFE600;

  /* Neutral - 사진 위 다크맵 */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7F7FA;
  --color-neutral-100:  #EFEFEF;     /* 라이트 카드 bg */
  --color-neutral-200:  #DFDFDF;
  --color-neutral-300:  #C2C2C2;
  --color-neutral-500:  #6D6D78;     /* 라벨 */
  --color-neutral-700:  #3A3A3A;
  --color-neutral-800:  #242428;
  --color-neutral-900:  #101010;     /* 다크 캔버스 */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E4F4E4;
  --color-success-fg: #2E8B2E;
  --color-warning-bg: #FFF4D6;
  --color-warning-fg: #B07A00;
  --color-error-bg:   #FCE2E2;
  --color-error-fg:   #C8302C;
  --color-info-bg:    #E5EFFA;
  --color-info-fg:    #2A6DBF;

  /* Surface */
  --bg-base:     #FFFFFF;
  --bg-subtle:   #F7F7FA;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(16,16,16,0.65);

  /* Text */
  --text-primary:    #101010;
  --text-secondary:  #3A3A3A;
  --text-tertiary:   #6D6D78;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #C2C2C2;

  /* Border */
  --border-default: #DFDFDF;
  --border-subtle:  #EFEFEF;
  --border-strong:  #C2C2C2;
  --border-focus:   #FC5200;
}

[data-theme="dark"] {
  --bg-base:     #101010;
  --bg-subtle:   #1A1A1A;
  --bg-elevated: #242428;
  --text-primary: #FFFFFF;
  --text-secondary: #C2C2C2;
  --text-tertiary: #8A8A8A;
  --border-default: #2A2A2A;
  --border-subtle:  #1F1F1F;
}

Typography

타이포그래피

폰트 페어링:
- 영문: Maison Neue (Milieu Grotesque) / Inter 폴백
- 한글: Pretendard / Noto Sans KR
- 숫자(데이터): Maison Neue Tabular (tabular-nums)
위계:
- Display: 56px / 700 / 1.05 / -0.02em
- H1: 36px / 700 / 1.1 / -0.015em
- H2: 26px / 700 / 1.2 / -0.01em
- H3: 20px / 600 / 1.3 / 0
- Body Large: 17px / 400 / 1.5 / 0
- Body: 15px / 400 / 1.5 / 0
- Body Small: 13px / 400 / 1.45 / 0
- Data Stat: 28px / 700 / 1 / -0.01em tabular
- Caption: 11px / 600 / 1.3 / 0.08em uppercase

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 72px; ``
Container: max-width 1080px, 좌우 패딩 16px (모바일 우선)

Border Radius

--radius-none: 0;       /* 액티비티 맵 카드 */
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-full: 9999px;  /* 아바타, KOM 배지 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 2px 6px rgba(0,0,0,0.10);     /* 액티비티 카드 hover */
--shadow-lg: 0 8px 20px rgba(0,0,0,0.16);    /* 모달 */
--shadow-orange: 0 4px 14px rgba(252,82,0,0.30);  /* CTA 강조 */

Iconography

스타일: Outline 강세 (러닝맨/자전거 픽토그램은 Filled)
Stroke 굵기: 2px
모서리 처리: Round
추천 라이브러리: Lucide / Tabler — 액티비티 픽토그램은 자체 셋

Component Guide

컴포넌트 가이드

Button

.btn { font: 700 14px/1 'Maison Neue', Inter, 'Pretendard', sans-serif;
       letter-spacing: 0.04em; text-transform: uppercase;
       border-radius: var(--radius-md); padding: 12px 22px; border: 0;
       display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
       transition: background 120ms ease, transform 120ms ease; }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: var(--color-neutral-200); color: var(--text-disabled); }
.btn-secondary { background: transparent; color: var(--text-primary); border: 1.5px solid var(--text-primary); }
.btn-secondary:hover { background: var(--text-primary); color: var(--bg-base); }
.btn-ghost { background: transparent; color: var(--color-primary-500); padding: 12px 8px; }
.btn-danger { background: var(--color-error-fg); color: #fff; }

Input

.input { background: var(--bg-base); border: 1px solid var(--border-default);
         border-radius: var(--radius-md); padding: 10px 12px; height: 40px;
         font: 400 15px/1.4 inherit; color: var(--text-primary); transition: border-color 120ms ease; }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(252,82,0,0.20); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }

Card (Activity)

.activity-card { background: var(--bg-base); border: 1px solid var(--border-default);
                 border-radius: var(--radius-md); overflow: hidden; }
.activity-card .map { aspect-ratio: 16/9; background: var(--color-neutral-900); position: relative; }
.activity-card .map svg path { stroke: var(--color-primary-500); stroke-width: 3; fill: none; }
.activity-card .meta { padding: 14px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.activity-card .stat-num { font: 700 22px/1 tabular-nums; color: var(--text-primary); }
.activity-card .stat-label { font: 600 11px/1.3 inherit; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); }

Badge (KOM/QOM)

.badge { font: 700 11px/1 inherit; letter-spacing: 0.06em; text-transform: uppercase;
         padding: 4px 8px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 4px; }
.badge-kom    { background: var(--color-secondary-500); color: var(--text-primary); }
.badge-solid  { background: var(--color-primary-500); color: var(--text-on-primary); }
.badge-subtle { background: var(--color-primary-50); color: var(--color-primary-700); }
.badge-outline { background: transparent; border: 1px solid var(--text-primary); color: var(--text-primary); }

Navigation (Top + Tab)

.topnav { height: 56px; background: var(--text-primary); color: #fff; display: flex; align-items: center; padding: 0 16px; gap: 24px; }
.topnav .logo { font: 900 18px/1 inherit; letter-spacing: 0.04em; }
.topnav .logo .s { color: var(--color-primary-500); }
.topnav a { color: #fff; font: 600 14px/1 inherit; text-decoration: none; opacity: 0.85; }
.topnav a.active { opacity: 1; border-bottom: 3px solid var(--color-primary-500); padding-bottom: 18px; }

Motion

--duration-fast: 120ms;
--duration-base: 240ms;
--duration-slow: 480ms;
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

Anti-patterns

1. 오렌지 외 컬러 강조 추가 금지 — Strava는 단일 형광 오렌지로 모든 액션·트레이스 통일 2. 액티비티 맵 배경에 패턴/그라데이션 추가 금지 — 검정 다크맵 + 오렌지 트레이스만 3. 데이터 숫자에 proportional 폰트 사용 금지 — tabular-nums 필수 4. 카드 모서리 16px 이상 라운드 금지 — Strava는 Sharp(2~4px) 5. 본문 폰트에 italic 사용 금지 — 운동 데이터의 정밀도 흐림

Strava

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처