시작하기
원칙
값을 고를 때 기준이 되는 여섯 가지입니다. 토큰 표보다 먼저 읽어 주세요.
01
그린은 누르는 곳에만
피치 그린은 상호작용 전용입니다. 장식이나 넓은 배경에 쓰면 어디를 눌러야 할지 흐려집니다.
02
면은 그레이로 나눈다
카드와 면의 분리는 채도 없는 그레이 단계로만 합니다. 색으로 칸을 나누지 않습니다.
03
그림자는 한 겹
단일 레이어·저채도 그림자만 씁니다. 다크 모드에서는 그림자 대신 면의 톤 차이로 띄웁니다.
04
본문은 Medium
한국어 가독성을 위해 본문 기본 굵기를 500 으로 둡니다. 숫자 히어로만 Black Han Sans 로 크게.
05
8의 배수
간격은 8px 그리드 위에서 고릅니다. 화면 좌우 여백은 20 이 표준입니다.
06
하나로 통일
같은 역할의 컨트롤은 화면마다 다르게 만들지 않습니다. 탭은 SegmentTabs, 정보 줄은 InfoStrip 하나.
Chapter 01
Foundation
모든 화면이 공유하는 바탕 — 색, 글자, 간격, 모서리, 그림자, 움직임, 화면 폭.
Foundation
컬러
잔디에서 가져온 피치 그린이 중심입니다. 원시 스케일(green·gray) 위에 테마마다 바뀌는 시맨틱 토큰(bg·label·line)을 얹는 2층 구조라, 화면 코드는 테마를 몰라도 됩니다.
Pitch Green
500 이 메인 CTA. 그린은 상호작용 전용이라 장식이나 넓은 면적 배경에는 쓰지 않습니다.
Gray
면 분리는 채도 없는 중성 그레이 10단계로만 합니다. 색으로 칸을 나누지 않습니다.
Semantic
성공·오류·경고 등 상태를 뜻하는 색. 보조 강조로 앰버를 씁니다(부주장·MOP).
라이트 · 다크 시맨틱
화면 코드는 원시값이 아니라 이 토큰을 씁니다. 라벨·라인은 알파값이라 어떤 면 위에서도 자연스럽습니다.
Light
Dark
축구 도메인 색
포지션·경기 유형·티어처럼 축구 앱에만 있는 의미를 가진 색입니다. 화면마다 따로 정하지 않고 여기 값을 씁니다.
포지션
경기 유형
티어 그룹
bronze
#A56A3D
silver
#B9C2CC
gold
#F2C24A
platinum
#7DDFD0
정본 src/constants/colors.ts · theme.ts · ratings.ts
Foundation
타이포그래피
단일 패밀리 Pretendard. 한국어 가독성을 위해 본문 기본 굵기를 Medium(500)으로 씁니다. 큰 글자는 자간을 좁히고 작은 글자는 넓힙니다. 스코어·포인트 같은 히어로 숫자에만 Black Han Sans를 씁니다.
title1
페이지 타이틀
우리 팀 축구, 핏치로
32/44 · 700 · -0.8
title2
페이지 타이틀
우리 팀 축구, 핏치로
28/38 · 700 · -0.67
title3
페이지 타이틀
우리 팀 축구, 핏치로
24/32 · 700 · -0.55
headingLg
섹션 헤더
우리 팀 축구, 핏치로
24/32 · 700 · -0.55
headingMd
섹션 헤더
우리 팀 축구, 핏치로
22/30 · 700 · -0.42
headingSm
섹션 헤더
우리 팀 축구, 핏치로
20/28 · 700 · -0.24
headline1
카드 타이틀
우리 팀 축구, 핏치로
18/26 · 600 · -0.04
headline2
카드 타이틀
우리 팀 축구, 핏치로
17/24 · 600 · 0
body1
본문
우리 팀 축구, 핏치로
16/24 · 500 · 0.1
body2
본문
우리 팀 축구, 핏치로
15/22 · 500 · 0.15
label1
UI 라벨
우리 팀 축구, 핏치로
14/20 · 500 · 0.2
label2
UI 라벨
우리 팀 축구, 핏치로
13/18 · 500 · 0.25
caption1
보조 정보
우리 팀 축구, 핏치로
12/16 · 500 · 0.3
caption2
보조 정보
우리 팀 축구, 핏치로
11/14 · 500 · 0.34
Display · 히어로 숫자
Black Han Sans 는 숫자를 크게 보여줄 때만 씁니다. 문장에는 쓰지 않습니다.
3 : 1
displayHero · 32/42
3 : 1
displayLg · 28/38
3 : 1
displayMd · 24/32
3 : 1
displaySm · 20/28
12,500P
NumericTypography.hero · 40/48
12,500P
NumericTypography.large · 30/38
12,500P
NumericTypography.medium · 24/30
호환 alias
예전 이름을 유지하는 토큰입니다. 새 코드는 위 스케일 이름을 씁니다.
정본 src/constants/typography.ts
Foundation
간격
8px 그리드. 화면 좌우 패딩은 xl 20px 이 표준입니다.
정본 src/constants/spacing.ts — Spacing
Foundation
라운드 · 스쿼클
모서리는 쓰임에 따라 단계가 정해져 있습니다. 아바타·팀 로고는 모서리만 둥근 사각형이 아니라, 곡률이 끊김 없이 이어지는 스쿼클을 씁니다.
xs
4px
sm
6px
md
8px
lg
12px
xl
16px
2xl
20px
3xl
24px
4xl
32px
full
full
스쿼클 (MARU 곡선)
같은 크기의 사각형 위에 겹쳐 보면 차이가 보입니다. 네 귀퉁이에서 borderRadius 는 곡선이 갑자기 꺾이고, 스쿼클은 부드럽게 이어집니다.
앱에서는 Squircle 로 사진을 자르고, 테두리·가림막은 같은 곡선의 SquircleRing·SquircleFill 을 씁니다. 사진은 스쿼클인데 테두리가 borderRadius 면 귀퉁이에서 둘 사이가 벌어집니다.
정본 src/constants/spacing.ts — BorderRadius · src/lib/squircle.ts
Foundation
그림자
단일 레이어, 저채도. 색칠한 그림자나 여러 겹 그림자는 쓰지 않습니다(그린 그림자는 메인 CTA 강조에만). 다크 모드에서는 그림자 대신 면의 톤 차이로 분리합니다.
sm
y1 · r3 · 0.06
md
y2 · r8 · 0.08
lg
y4 · r12 · 0.12
xl
y8 · r24 · 0.16
green
y4 · r12 · 0.25
emphasize
y1 · r4 · 0.08
strong
y6 · r24 · 0.07
heavy
y12 · r32 · 0.1
웹 미리보기는 근사입니다(iOS shadowRadius → CSS blur ×2). 안드로이드는 elevation 값을 씁니다.
정본 src/constants/spacing.ts — Shadows
Foundation
모션
트랜지션 길이와 이징을 앱 전체에서 통일합니다. 기본은 부드럽게 감속하는 pitch 이징이고, 스프링은 골·승리처럼 환호하는 순간에만 절제해서 씁니다. 이 페이지의 모든 움직임도 이 값으로 움직입니다.
0ms
instant
150ms
fast
250ms
standard
400ms
slow
350ms
page
enter
cubic-bezier(0, 0, 0.2, 1)
exit
cubic-bezier(0.4, 0, 1, 1)
standard
cubic-bezier(0.4, 0, 0.2, 1)
spring
cubic-bezier(0.34, 1.56, 0.64, 1)
pitch기본
cubic-bezier(0.2, 0.8, 0.2, 1)
정본 src/constants/spacing.ts — Motion
Foundation
레이아웃
구조는 브레이크포인트로, 밀도와 폭은 연속 함수로 정합니다. 화면 코드에서 임의 숫자로 폭을 비교하지 않고 useResponsiveLayout 만 씁니다.
tablet
700
사이드 레일·폭 캡 시작. Z Fold 펼침(690)은 의도적으로 폰입니다.
wide
900
마스터-디테일 분할 시작.
pane 최소 폭
380
칸 수 × 이 값이 실폭에 들어갈 때만 분할합니다. 칸이 폰보다 좁아지면 라벨이 두 줄로 깨집니다.
콘텐츠 최대 폭
폭이 캡보다 좁은 기기(모든 폰)에서는 아무 효과가 없습니다.
터치 타깃
눌리는 모든 것은 최소 크기를 지킵니다.
buttonMin
36
button
48
buttonLg
56
rowMin
52
keypad
60
정본 src/constants/spacing.ts — Breakpoints · ContentMaxWidth · TouchTarget
Chapter 02
Components
바탕을 조합해 만든 공용 부품. 새 화면은 여기서 고르고, 없으면 여기에 먼저 더합니다.
Components
배지 · 상태
짧은 상태·분류 표시. 경기 유형 배지는 모든 화면에서 같은 색입니다 — 리그=그린 · 컵=앰버 · 친선=블루.
LiveBadge 는 경기가 시작되면(ongoing) D-day 칩 자리를 대신합니다. 포지션은 PositionBadge, 티어는 TierBadge 를 씁니다.
정본 src/components/common/Badge.tsx · LiveBadge.tsx · PositionBadge.tsx · TierBadge.tsx
Components
카드
기본 라운드 12, 안쪽 여백 16. 다크 모드 기본은 그림자 없는 flat 입니다.
flat
FC 도미누스 vs 번개FC
10월 4일 (토) 오전 8:00
elevated
FC 도미누스 vs 번개FC
10월 4일 (토) 오전 8:00
outlined
FC 도미누스 vs 번개FC
10월 4일 (토) 오전 8:00
highlighted
FC 도미누스 vs 번개FC
10월 4일 (토) 오전 8:00
lined
FC 도미누스 vs 번개FC
10월 4일 (토) 오전 8:00
정본 src/components/common/Card.tsx
Components
세그먼트 탭
화면마다 다섯 가지였던 탭 모양을 이 컴포넌트 하나로 통일했습니다. 흰 알약이 스프링으로 미끄러집니다. 눌러 보세요.
md — 화면 단위 전환(전폭)
sm — 카드·섹션 안 전환
예외는 두 곳뿐입니다 — 피드의 밑줄 탭, 라인업 쿼터/자체전 A·B(SystemSegmented).
정본 src/components/common/SegmentTabs.tsx
Components
정보 한 줄
날씨·구장 정보는 배경 없는 한 줄에 두고, 넘치면 좌우로 넘깁니다. 주의·위험은 글자색으로만 표시합니다.
InfoItem = 20 아이콘 칸 + 13pt 글자. 배경 칩(알약)으로 되돌리지 않습니다.
정본 src/components/common/InfoStrip.tsx
Components
빈 상태
보여줄 게 없을 때도 다음 행동을 안내합니다. 친근한 톤의 제목 + 한 줄 설명 + 초록 CTA 하나.
아직 잡힌 경기가 없어요
경기를 만들면 팀원들에게 투표가 바로 열려요
경기 만들기정본 src/components/common/EmptyState.tsx
Chapter 03
Guide
같은 실수를 두 번 하지 않도록 — 실제로 화면이 갈라지거나 사고가 났던 것들.
가이드
하지 말 것
실제로 사고가 났거나 화면마다 갈라졌던 것들입니다. 새 화면을 만들기 전에 확인하세요.
src/lib/appDialog 를 씁니다.Squircle · SquircleRing · SquircleFill — 같은 곡선으로 그립니다.SegmentTabs md·sm 두 크기만. 예외는 피드 밑줄 탭과 라인업 쿼터 두 곳.InfoStrip 한 줄. 주의·위험은 글자색으로만.useResponsiveLayout 만 씁니다. 폴드 펼침은 폰으로 동작해야 합니다.앱의 토큰이 바뀌면 node --no-warnings tools/design-tokens/export.mjs 로 이 페이지를 갱신합니다.