Paws & Paths — 따뜻 + 신뢰
반려견 산책 서비스 — 오렌지로 즐거움, 블루로 전문성
두 번째 예시예요. 반려견 산책 서비스용 디자인 시스템. 전략은 "즐거운 색 + 전문적 색"을 한 화면에서 역할로 나눠 쓰기.
핵심 색 대비 — 역할이 달라요
#855300. 에너지·주요 액션·강조용. "산책 신청하기" 버튼 같은 곳.
#0058be. 신뢰·일정·내비게이션용. "스케줄 보기" 같은 관리 액션.
따뜻한 행동과 차가운 관리 행동을 색으로 물리적으로 분리했어요. 사용자가 "지금 결제하는 버튼"과 "일정 확인 버튼"을 색만 보고도 구분할 수 있어요. 단순 시각 변주가 아니라 심리적 맥락 분리예요.
폰트 — Plus Jakarta Sans
Inter보다 모서리가 살짝 둥근 폰트예요(rounded terminal). 친근감을 주면서 가독성은 유지. 브랜드 톤("다가가기 쉬우면서 프리미엄")과 폰트 선택이 일치해요.
모서리 — 컴포넌트 역할별로 다르게
card-profile(강아지 프로필 카드):rounded.xl = 1.5rem— 포근한 느낌input-field(입력창):rounded.DEFAULT = 0.5rem— 공식적 느낌
모든 모서리를 크게 둥글게 하면 유치해지고, 전부 각지게 하면 차가워져요. 컴포넌트가 맡은 역할에 따라 radius를 다르게 주는 게 균형의 기술이에요.
그림자 톤 — 프로즈가 책임지는 영역
"blur 20-40px, 투명도 4-8%, 주조색 오렌지를 1-2% 섞어요".
왜 오렌지를 섞나? 순수 회색 그림자는 "더러운 느낌"을 만들어요. 주조색을 소량 섞으면 톤이 브랜드와 통일돼요. 이런 미세한 지시는 검사 도구로 잡을 수 없는 영역이라 본문에 적어 둬요.
참조 활용도가 높아요
9개 컴포넌트 모두 {colors.primary}·{spacing.md}·{rounded.lg} 같은 토큰 참조로 돼 있어요. hex를 컴포넌트에 직접 박지 않음. 그래서 color 토큰을 하나 바꾸면 모든 버튼·카드·배지가 자동으로 따라와요. 검사 도구의 orphaned-tokens(쓰이지 않는 색) 경고도 거의 안 떠요 — 토큰 재사용률이 높다는 뜻이에요.
이 예시는 "색을 의미로 나누기"의 교과서예요. primary·secondary가 단순 시각 변주가 아니라 "뜨거운 행동 vs 차분한 관리"처럼 역할 축으로 쪼개 있어요. 본문에 "오렌지는 행동, 블루는 신뢰"를 직접 적어 두니 AI가 어느 상황에 어느 색을 쓸지 판단할 수 있어요.
체크리스트
- primary와 secondary가 단순 색 구분이 아닌 이유를 설명할 수 있다
- 컴포넌트 역할별로 모서리 radius를 다르게 주는 관행을 이해한다
- 그림자 색에 주조색을 살짝 섞는 이유를 안다
- 토큰 참조 활용도와 검사 도구 경고의 관계를 이해한다