FrontEnd‐Colors

🎨 Colors

프로젝트 메인 색상

베이지 바탕에 빵과 초콜릿을 닮은 브라운을 조합하고, 포인트 색으로 브랜드 그린(primary)을 사용한다.

브라운은 바탕과 글자, 그린은 클릭할 수 있는 요소에만 쓴다. 화면에서 그린이 보이는 곳이 곧 행동할 곳이 되도록 하기 위해서다.

색상 팔레트 구조

브랜드 색(primary, secondary)과 같은 방식으로 모든 색을 50~900의 10단계 스케일로 관리한다.

모든 스케일은 같은 단계 = 같은 밝기가 되도록 맞췄다. 그래서 단계만 바꿔 여러 색을 섞어 써도 대비 규칙 하나로 가독성을 관리할 수 있다.

스케일	용도	비고
brown	바탕, 글자, 테두리	브랜드 primary와 단계별 밝기를 맞춰 새로 생성
primary	클릭 요소 (버튼, 링크, 배지)	브랜드 그린, 기본값 primary-600 #607e5f
secondary	케이크 카테고리 색	브랜드 핑크
honey	쿠키 카테고리 색	새로 생성
mauve	음료 카테고리 색	새로 생성

단계별 쓰임

페이지 배경이 brown-100이므로, 글자는 흰 배경 기준보다 한 단계 진한 700 이상을 쓴다.

단계	용도	brown-100 배경 위 대비
50	카드 (배경보다 살짝 밝게)	—
100	페이지 배경	—
200	구분 섹션 배경, 배지 배경	—
300	테두리, 구분선	—
400~500	장식, 아이콘, 비활성 요소 (글자 사용 금지)	3.0 이하
600	흰 글자를 올리는 버튼 배경 (크림 배경 위 글자 사용 금지)	4.05
700	캡션, 링크	5.5
800	본문	7.7
900	제목, 어두운 섹션 배경	10.6

시맨틱 토큰

화면은 스케일 값을 직접 쓰지 않고 시맨틱 토큰을 통해 쓴다. Figma Variables에 CSS 변수명(var(--bg-page) 등)을 함께 기록해 Tailwind 설정으로 그대로 옮긴다.

토큰	값	용도
bg/page · bg/card · bg/section	brown-100 · 50 · 200	페이지 · 카드 · 구분 섹션
bg/inverse	brown-900	푸터 등 어두운 섹션
text/heading · body · caption	brown-900 · 800 · 700	제목 · 본문 · 캡션
text/link	primary-700	링크, 강조 글자
action/primary · primary-hover	primary-600 · 700	주요 버튼
badge/bg · badge/text	primary-200 · 800	장바구니 개수, 주문 상태
border/default · border/strong	brown-300 · 900	테두리

카테고리 색

카테고리마다 대표 색을 두고, 데스크톱 카테고리 카드와 모바일 원형 탭 · 버블의 배경에 쓴다.

네 색은 모두 같은 밝기(상대 휘도 0.63) 로 맞췄다. 색상만 다르고 무게가 같아서, 나란히 놓이거나 모바일 하단 탭 바 위로 떠올라도 한 색만 튀지 않는다.

카테고리	토큰	값	스케일
전체 (모바일 All 탭)	category/all	#dce4db	primary-200
빵	category/bread	#DFCDB8	brown-300
케이크	category/cake	#E9CACC	secondary-400
쿠키	category/cookie	#E8CD9D	honey-300
음료	category/beverage	#DCCBDC	mauve-300

• 그린은 클릭 요소 전용이라 카테고리 색으로 쓰지 않는다. 예외로 모바일 All 탭은 브라운 계열의 Bread와 헷갈리지 않도록 연한 primary-200을 쓴다.
• 카테고리 카드 위의 요소는 카드 색이 제각각이므로 배경을 깔지 않는다. (예: 화살표 버튼은 원형 배경 없이 primary-700 화살표만 사용)

---

💻 Code

• 디자인 토큰 (색 스케일 · 시맨틱 토큰)
• Tailwind 색상 · 텍스트 스타일 설정 (@theme · @utility)

📎 Reference

• [Figma] Colors 보드
• 디자인 브리프 — 색