토큰과 컴포넌트

색

브랜드는 핑크·라임 둘뿐입니다. 셋째 색이 필요하다고 느끼면 대개 위계가 잘못된 것입니다.

브랜드

• --brand-pink #f3a3c6 · 강조 · 설렘
• --brand-pink-strong #8b345c · 핑크 위 글자
• --brand-pink-tint 20% · 핑크 옅은 면
• --brand-lime #e0f26a · 활력 · 이번 주
• --brand-lime-strong #59640b · 라임 위 글자
• --brand-lime-tint 24% · 라임 옅은 면

중립

• --gray-0 카드 · 바탕
• --gray-50
• --gray-100
• --gray-200
• --gray-300
• --gray-400
• --gray-500
• --gray-600 보조 글자
• --gray-700
• --gray-800
• --gray-900 본문 · 잉크

경계선 — 잉크의 알파라 어느 바탕에서도 톤이 튀지 않습니다

• --border-subtle
• --border-default
• --border-strong
• --border-heavy

상태

• --success #007a5e · 완료 · 진행 중
• --warning #a86400 · 주의 · 확인 필요
• --danger #cc2b1d · 오류 · 되돌릴 수 없는 동작

분류 — 장소 카테고리와 일정 종류가 같은 팔레트를 씁니다

• --category-cafe #ff2e7e · 카페 · 지도 핀
• --category-walk #00a982 · 산책
• --category-night #3d6cff · 야경 · 행사
• --category-exhibit #8b5cf6 · 전시 · 팝업
• --category-food #ff4b3e · 맛집 · 축제

타이포

SUIT 하나만 씁니다. 로고 seolle in 만 Noto Serif italic(--font-serif). 배율은 약 1.25 이고, 한글이 라틴보다 작아 보여 본문은 --text-base(16px) 아래로 내리지 않습니다.

• 부산에서 마음이 움직이는 순간 --text-2xs 11px · 대문자 라벨 · 배지
• 부산에서 마음이 움직이는 순간 --text-xs 12px · 메타 정보
• 부산에서 마음이 움직이는 순간 --text-sm 13px · 보조 문장 · 작은 버튼
• 부산에서 마음이 움직이는 순간 --text-md 14px · 조밀한 목록의 본문
• 부산에서 마음이 움직이는 순간 --text-base 16px · 본문 기본
• 부산에서 마음이 움직이는 순간 --text-lg 18px · 리드 문장
• 부산에서 마음이 움직이는 순간 --text-xl 21px · 카드 제목
• 부산에서 마음이 움직이는 순간 --text-2xl 26px · 섹션 제목
• 부산에서 마음이 움직이는 순간 --text-3xl 32px
• 부산에서 마음이 움직이는 순간 --text-4xl 40px
• 부산에서 마음이 움직이는 순간 --text-5xl 52px
• 부산에서 마음이 움직이는 순간 --text-6xl 64px · 페이지 히어로

웨이트

• 설레인 매거진 --weight-regular 400 · 본문
• 설레인 매거진 --weight-strong 600 · 강조
• 설레인 매거진 --weight-label 700 · 라벨 · 배지
• 설레인 매거진 --weight-display 800 · 제목
• 설레인 매거진 --weight-display-strong 900 · 히어로

자간 · 행간

간격

4px 기반 12단계. 같은 묶음 안은 1~3, 요소 사이는 4~6, 섹션 사이는 7~9, 색면 블록 사이는 10~12 를 씁니다.

• --space-1
• --space-2
• --space-3
• --space-4
• --space-5
• --space-6
• --space-7
• --space-8
• --space-9
• --space-10
• --space-11
• --space-12

모서리 · 그림자

• --radius-0 0 · 에디토리얼 각진 면
• --radius-1 4px · 아주 작은 표시
• --radius-2 8px · 작은 컨트롤 · 썸네일
• --radius-3 12px · 인풋 · 중간 카드
• --radius-4 16px · 카드 · 패널 · 시트
• --radius-full 999px · 칩 · 알약 버튼

• --shadow-sm 얹힌 칩 · 세그먼트
• --shadow-md 떠 있는 컨트롤 · 버튼
• --shadow-lg 시트 · 모달 · 패널

모션

이징은 --ease-standard 하나입니다. 칸에 마우스를 올리면 각 길이가 어떻게 다른지 보입니다. prefers-reduced-motion 에서는 모두 꺼집니다.

• --duration-fast 200ms · 색 · 투명도
• --duration-base 320ms · 위치 · 크기
• --duration-slow 480ms · 펼침 · 시트
• --duration-slower 800ms · 배경처럼 느린 것

레이아웃 · 레이어

컨테이너

• --container-narrow 760px · 읽는 페이지 (사전 · 소개)
• --container-default 960px · 목록 · 그리드 (캘린더 · 체험)
• --container-wide 1200px · 매거진 · 장소 상세
• --page-gutter 좌우 여백. 페이지마다 다르게 주지 않습니다.

브레이크포인트 — CSS 변수는 @media 안에서 못 쓰니 숫자를 직접 적되, 아래 넷만 씁니다

• --bp-sm 480px · 아주 좁은 화면 — 폰트·간격만 조정
• --bp-md 700px · 모바일 — 하단 탭바 구간, 1열
• --bp-lg 900px · 태블릿 위 — 2열 이상
• --bp-xl 1200px · 와이드 — 컨테이너 최대폭

z-index 레이어 — 이 일곱 단계 밖의 숫자는 새로 만들지 않습니다

• --z-base 0 · 흐름 그대로
• --z-raised 10 · 카드 안에서 살짝 올라온 것 (드래그 핸들 · 드롭다운)
• --z-sticky 100 · 스크롤을 따라오는 컨트롤 (지도 필터 · 요약 바)
• --z-header 1000 · 사이트 헤더 · 하단 탭바
• --z-overlay 1100 · 가림막 · 지도 시트
• --z-modal 1200 · 모달 · 코스 추가 시트
• --z-toast 1300 · 토스트 — 무엇보다 위

지금 코드에 흩어진 z-index 가 어느 레이어로 갈지는 tokens.css 13번 주석의 매핑표에 있습니다.

버튼

지금 코드에는 높이 42·46·48·50·54px 짜리 버튼이 7종 섞여 있습니다. 아래 3종 × 3크기로 모읍니다. primary 는 화면당 하나입니다.

칩 · 태그 · 배지

카드

폼

섹션 헤더 · 페이지 헤더

아코디언

제목이 곧 여닫는 버튼입니다(WAI-ARIA 패턴). 줄 전체가 탭 영역이고, Esc 로 닫습니다. 실제 동작은 홈의 week_strip_controller 를 참고하세요.

시트 · 모달 · 토스트

실제로는 position: fixed 라 화면에 붙습니다. 여기서는 모양만 보이도록 제자리에 눕혀 두었습니다.

세그먼트 토글 · 테이블 · 빈 상태