Routine Bear · Design System Gallery

매일 10분,
엘리트 선수의 THINKING 일지

청소년 축구 선수용 음성 기반 훈련 일지 앱의 UI 드래프트. 세 개 프로토타입(메인·비훈련·드릴 에디터)의 총 25개 화면을 원본 그대로(byte-identical) 단일 파일로 통합했습니다. 각 화면은 격리된 iframe 안에서 소스와 동일하게 렌더됩니다.

The Verge 에디토리얼 진지함 — 선수를 "데이터 점"이 아닌 "쓰는 사람"으로
Spotify 다크 컴팩트 + 매일 습관 카드 — 매일 열어도 안 질리는 패턴
Linear AI 정밀함 — surface ladder·음수 트래킹·도구적 신뢰감
Nike Anton ALL CAPS 디스플레이 + 짧은 명령형 — 선수 정체성
Strava 시간순 카드 피드 + 리더보드 — 사회적 동기

A. 디자인 시스템 · 토큰 레전드

DESIGN.md 전수 — 값과 의도(왜)까지
Surface ladder (3-step)
--surface-canvas#131313페이지 베이스·가장 깊은 레이어
--surface-elevated#1a1a1a카드·인풋·필드
--surface-dialog#252525모달·메뉴·드롭다운
Primary accent — Vital Green
--accent-vital#22D67A단일 액센트(HSV 149°84%84%) · CTA/포커스/active 한정
--accent-vital-hover#2DE085호버 상태
--accent-vital-glowrgba(34,214,122,.16)포커스 링(3px alpha 0.16)
Text hierarchy
--text-primary#f5f5f5본문·헤드라인
--text-secondary#999999라벨·메타·비활성
--text-tertiary#666666미세 라벨·placeholder
--text-on-accent#000000Vital Green 위 텍스트
--text-disabled#444444비활성화 상태
Hairline borders
--line-default#2a2a2a카드·인풋 보더(실구현 inset box-shadow)
--line-strong#3a3a3a포커스 전 활성 보더
Semantic colors
--semantic-success#22D67A= Vital Green(성공·완료·전진 통일)
--semantic-warning#FFB627Athletic Amber
--semantic-error#FF4D4DVibrant red
info = --action-move#5B72B8별도 info 토큰 없이 Cool blue 재사용
Sport-action colors (drill editor)
--action-pass#FF6B47패스(전달) · 다크 대비 5.8:1
--action-move#5B72B8이동 · 4.7:1
--action-dribble#22D67A드리블=전진·성장 통일 · 8.1:1
--action-shoot#E89A3F슛 · 7.2:1
Company brand (footer/logo only)
--brand-galloping#6B00FF모브랜드 — 푸터 "by Galloping"·로고만(액센트 절대 금지)
Spacing — 4px grid
--space-14px
--space-28px
--space-312px
--space-416px
--space-520px
--space-624px
--space-832px
(raw)48 / 64px
Border-radius scale (never 8/12/16)
--radius-xs2px
--radius-sm4px
--radius-md20px
--radius-lg24px
--radius-xl40px
--radius-full9999px
--radius-circle50%
Typography
ROUTINE
Anton · display (en)
일지를 쓴다
Wanted Sans Variable 900 · display (ko)
RPE 07 · 12:48
JetBrains Mono · label
RoleFontSizeWtLHTrack
Display HeroAnton / Wanted Sans 90060–107px9000.950
Display Large동일40–56px9001.00-0.015em
Display Medium동일28–36px9001.05-0.01em
Headline동일22–26px700–9001.10-0.005em
SubheadWanted Sans Variable18–20px6001.300
Body LargeWanted Sans Variable16px4001.550
BodyWanted Sans Variable14px400–5001.500
CaptionWanted Sans Variable12–13px400–5001.400
Label MonoJetBrains Mono UPPERCASE10–12px5001.20+1px
Meta / MicroWanted Sans Variable8px500–600=12px0
Elevation (4 mechanisms)
1 · Surface ladderCanvas→Elevated→Dialog 밝기 단계로 깊이(그림자 아님)
2 · 1px hairlinebox-shadow: inset 0 0 0 1px — 보더가 박스 크기에 미포함(4px 그리드 유지, §4.7)
3 · Heavy shadow모달·드롭다운·floating 한정 0 8px 24px rgba(0,0,0,.4)
4 · Vital glow포커스 링만 0 0 0 3px rgba(34,214,122,.16)
Motion
pulse-once3초 사이클 중 0.4초만 보이는 단일 펄스 — 흩어진 마이크로인터랙션 회피
staggered reveal리워드 등 "한 번 잘 조율된 모먼트"(100→700ms) · transform/opacity 한정
금지카운트업·sparkle·ripple·가변폰트 스크롤 애니메이션
Icons
Phosphor Iconsduotone 기본 / fill active · 1em 정사각 강제 · 이모지 아이콘 금지(감정 5단계 이모지는 콘텐츠 예외)
17 NEVER rules (AI slop guard)

B. 화면 인덱스 (25)

★ 필수 = 습관 루프 핵심 경로(홈→녹음→일지→리워드) · 총 11개
① 메인 앱 (v12 · 15)
  1. ① 홈 · 매일 10분★ 필수
  2. 탭 일지 · 캘린더+리스트★ 필수
  3. ① 모드 선택 · 훈련·경기 탭★ 필수
  4. ①-2 모드 선택 · 비훈련 탭
  5. ② 녹음 · 음성 일지 시작★ 필수
  6. ③ 훈련 세부 · 드릴+필드
  7. ④ 감정 + 회고★ 필수
  8. ⑤ 컨디션 · RPE+Hooper★ 필수
  9. ⑥ 기억 장면 · 필드 markup
  10. ⑦ 부상 · 앞면
  11. ⑧ 부상 · 뒷면
  12. ⑨ 리워드 · 완료★ 필수
  13. 탭 약점 · 진행+목표
  14. 탭 분석 · 히트맵+차트★ 필수
  15. 탭 나 · 프로필+설정
② 비훈련 모드 (non-training · 6)
  1. ① 모드 선택 · 비훈련 탭★ 필수
  2. ② 영상 분석 · 입력
  3. ③ 휴식·회복 · 입력
  4. ④ 학업 · 입력
  5. ⑤ 일상 · 입력
  6. ⑥ 리워드 · 비훈련★ 필수
③ 드릴 에디터 · 가로 (v13 · 4)
  1. 풀필드 · 2대2 개인전술★ 필수
  2. 하프 필드 · 침투 후 헤더
  3. 정방형 · 콘 드리블
  4. 4:3 · 사다리 풋워크

C. 메인 앱 — 훈련·경기 플로우 (v12)

15 화면 · 세로 폰 갤러리 · 원본 그대로

D. 비훈련 모드 (non-training)

6 화면 · 세로 폰 갤러리 · 원본 그대로

E. 드릴 에디터 — 가로 4 캔버스 (v13)

4 화면 · 가로 폰 갤러리 · 원본 그대로