PuppySpot Design System v3.1

01 · Primitive Tokens — Color Palette

Green (Primary Brand)

--green-1

#F2F7F4

--green-2

#E0EDE6

--green-3

#C2DBCB

--green-4

#9DC4AC

--green-5

#74A88A

--green-6 ★Primary

#4A7C59

--green-7

#3A6347

--green-8

#2C4E37

--green-9

#1F3927

--green-10

#132419

Terra (Paw Brand)

--terra-1

#FBF3EE

--terra-2

#F5E2D2

--terra-3

#EABFA0

--terra-4

#D9976D

--terra-5 ★Paw

#C07A4F

--terra-6

#A0613A

--terra-7

#7D4929

Neutral

--neutral-0

#FFFFFF

--neutral-1

#F9F9F8

--neutral-2

#F1F0EE

--neutral-3

#E5E3DF

--neutral-4

#D1CEC9

--neutral-5

#A9A5A0

--neutral-6

#7A7672

--neutral-7

#4E4B47

--neutral-8

#2D2B28

--neutral-9

#1A1917

Status

--color-error

--color-error-lt

--color-warning

--color-warning-lt

--color-success

--color-info

02 · Semantic Tokens

Color Roles

역할	토큰
Primary	--color-primary → green-6
Primary Light	--color-primary-lt → green-1
Paw	--color-paw → terra-5
Paw Light	--color-paw-lt → terra-1
Text Primary	--text-primary → neutral-9
Text Secondary	--text-secondary → neutral-6
Text Disabled	--text-disabled → neutral-5
Surface Base	--surface-base → #F7F5F0
Surface Card	--surface-card → #FFFFFF
Border Default	--border-default → neutral-3

Spacing (8pt Grid)

토큰	값
--space-1	4px
--space-2	8px
--space-3	12px
--space-4	16px
--space-5	20px
--space-6	24px
--space-8	32px
--space-10	40px
--space-12	48px
--space-16	64px

Height Tokens

토큰	값	용도
--h-btn-lg	48px	버튼 대형
--h-btn-md	40px	버튼 중형
--h-input	48px	인풋
--h-chip	32px	필터 칩
--h-tabbar	56px	탭바
--h-appbar	52px	앱바
--h-fab	48px	FAB 버튼

Typography

토큰	값	용도
--text-xs	11px	캡션, 뱃지
--text-sm	13px	보조 텍스트
--text-base	15px	본문 기본
--text-md	17px	섹션 제목
--text-lg	20px	페이지 헤더
--text-xl	24px	완료 타이틀
--text-2xl	28px	DS 헤더

Border Radius

--radius-sm (6px)

--radius-md (12px)

--radius-lg (20px)

--radius-full

03 · Typography Scale — 실제 렌더링 프리뷰

Pretendard · base 15px · ratio 1.2 · 아래로 갈수록 크기가 줄어드는 타입 스케일

애견카페 탐색 앱

--text-2xl 28px / Bold 700 / lh 1.2 / ls -0.02em 히어로 타이틀, 온보딩 메인 카피

등록이 완료됐어요!

--text-xl 24px / Bold 700 / lh 1.3 / ls -0.02em 완료 화면 타이틀, 섹션 강조

퍼피파크 강남점

--text-lg 20px / SemiBold 600 / lh 1.3 페이지 헤더, 카페 상세 타이틀

입장조건

--text-md 17px / SemiBold 600 / lh 1.4 카드 제목, 섹션 헤더, Bottom Sheet 타이틀

카페 이름 또는 지역 검색

--text-base 15px / Regular 400 / lh 1.5 본문 기본, 인풋 플레이스홀더, 버튼 레이블

서울 강남구 · 1.1km

--text-sm 13px / Regular 400 / lh 1.5 / color:text-secondary 보조 텍스트, 위치/거리, 카드 메타 정보

캡션 / 뱃지 최소 크기

--text-xs 11px / Regular 400 / lh 1.4 / ls +0.02em 캡션, 토큰명, DS 레이블 — 이하 크기 금지

Font Weight 사용 원칙

Bold 700 화면 타이틀, 완료 헤더 — 28px / 24px 전용

SemiBold 600 카드 제목, 섹션 헤더 — 17px / 20px

Medium 500 칩, 뱃지, 버튼 — 12px~13px 레이블

Regular 400 본문, 보조 텍스트 — 15px / 13px / 11px

04 · Components — 63개 클래스 완전 동기화

BTN — Button Hierarchy 4단계

같은 위계의 버튼은 서비스 전체에서 동일한 모양 유지. 한 화면에 Primary는 반드시 1개만.

1 Primary

bg: #4A7C59 (color-primary)
color: white / h: 48px
radius: md (12px) / fw: 700

확인, 완료, 다음 — 화면당 1개만

2 Secondary

bg: color-primary-lt (green-1)
color: color-primary / h: 48px
radius: md (12px) / fw: 700

취소, 이전, 거부 — Primary와 세트

3 Destructive

bg: #EF4444 (color-error)
color: white / h: 48px
radius: md (12px) / fw: 700

앱 종료, 계정 삭제, 데이터 초기화

4 Text / Ghost

bg: none / border: none
color: color-primary / fw: 600
font-size: text-sm (13px)

다음에 할게요, 건너뛰기, 상세보기

FAB (발바닥 찍기)

h:48px / radius:full / shadow:md
icon: Lucide paw-print 18px
Primary 변형 — 플로팅 전용

CHIP — Chips & Tabs

CHIP-Location

h:32px / bg:surface-card / border:default

CHIP-Filter

bg:primary-lt / border:primary / color:primary

ANCHOR-CHIP

입장조건

운영

가격

h:30px / inline-flex / radius:full
active: primary-lt + primary border

TAB-Segment

리스트

지도

bg:neutral-2 / active: surface-card + shadow-xs

FILTER-Tab

입장조건

공간시설

active: color-primary + border-bottom 2px

CARD — Cafe Card

퍼피파크 강남점

강남구 · 1.1km

견종분리야외운동장

제한 없음

256

CARD-Cafe 스펙

.card-cafe: bg:surface-card / radius:md / shadow:sm / overflow:hidden
.card-thumb: w:100% / aspect-ratio:4/3 / 디폴트 bg:color-primary-lt + 뽀삐 이미지
.heart-btn: absolute top-right / 32×32px / bg:rgba(white,0.9) / radius:full
.card-body: p: space-3 space-4 space-2
.card-cafe-name: text-md / fw:700
.card-cafe-loc: text-sm / color:text-secondary / flex align-center
.infra-pill: bg:primary-lt / color:primary / radius:full / p:2px 8px
.card-footer: flex space-between / border-top:border-default
.tag-info: bg:green-1 / color:green-7 / radius:sm
.paw-count: flex align-center / gap:4px / color:text-secondary

TABBAR — Bottom Navigation (3탭)

홈

발바닥

사장님 등록

.tabbar: h:56px / bg:surface-card / border-top:border-default / flex space-around / pb:space-2
.tab-item: flex-col / align-center / gap:3px / pt:space-2
default state: svg+label color:text-disabled
active state: svg+label color:color-primary
.tab-label: font-size:10px / fw:600
아이콘: 홈(집) / 발바닥(Lucide paw-print) / 사장님등록(사각형+플러스)

INPUT — Search Bar

INPUT-Search

2

.search-bar: h:48px / bg:surface-card / border:1.5px border-default / radius:md
.filter-btn: 36×36px / bg:surface-card / radius:sm
.filter-badge: 16px circle / bg:color-error / absolute top-right

TAG — 정보 태그류

TAG-Info

10kg 이하

bg:green-1 / color:green-7
radius:sm / p:3px 8px / text-xs

TAG-Info-SM

예방접종 필수

동일 스펙

OPEN-Badge

영업중

bg:#D1FAE5 / color:#065F46
radius:full / fw:700

INFRA-Pill

실내 수영장

bg:primary-lt / color:primary
radius:full / p:2px 8px / font-size:11px

WEIGHT-CHIP — 체중 선택 그리드

5kg 이하

10kg 이하

20kg 이하

30kg 이하

50kg 이하

제한 없음

grid 3열 / h:40px / radius:full
active: primary-lt bg + primary border + primary color

OVERLAY — Bottom Sheet + Handle

필터

.overlay-dim: bg:surface-overlay(rgba 0.48) / inset:0 / align-flex-end
.bottom-sheet: bg:surface-card / radius-lg top only
.handle-drag: w:36px h:4px / bg:neutral-4 / margin:auto
.header-sheet: flex space-between / border-bottom:border-default
.sheet-title: text-md / fw:700
.icon-btn-plain: bg:none border:none / p:space-1

OPS-Table / REGION-Cols

운영시간 테이블

월	10:00 – 20:00
화 오늘	10:00 – 20:00
수	10:00 – 20:00

today: bg:green-1 / color:color-primary
table-layout:fixed / white-space:nowrap

서울

경기

인천

강남구

마포구

송파구

APPBAR — Transparent (카페 상세 헤더)

.appbar-transparent: position:absolute / top:0 / h:52px / flex space-between / p:0 space-4
.appbar-icon-btn: 36×36px / bg:rgba(white,0.85) / radius:full / shadow:xs
.appbar-right-group: flex / gap:space-2

04-B · Disabled States

비활성화 상태. 배경·텍스트·테두리가 모두 neutral 토큰으로 통일되어 '사용 불가' 상태를 명확히 전달.

Button Disabled

Disabled 토큰: bg --neutral-3 / text --neutral-5 / cursor not-allowed

Input Disabled

활성 인풋

비활성 인풋

사용 시점: 폼 조건 미충족(필수 입력 전), 권한 없는 필드, 편집 불가 항목

05 · Modal / Popup — 3종

모든 팝업은 dim(rgba 0.48) + 중앙 모달 구조. radius-lg(20px) / 좌우 마진 32px. 닫기 X는 absolute 우상단.

POPUP-1 · 발바닥찍기 (SC-14)

이 카페가 마음에 드셨나요?

발바닥을 찍으면 내 발바닥 목록에 저장돼요

사용 규칙 — 카페 상세 스크롤 70% 이상 시 1회만 노출. 찍기 완료 후 재노출 안 함.

POPUP-2 · 앱 종료 확인 (SC-06-B)

앱을 종료할까요?

종료하면 현재 작업이 저장되지 않을 수 있어요

사용 규칙 — Destructive 버튼은 우측(행동 방향). Secondary 취소는 좌측. 비가역 작업에만 사용.

POPUP-3 · 위치 권한 요청 (SC-06)

위치 권한이 필요해요

내 주변 카페를 찾으려면
위치 권한이 필요해요

사용 규칙 — 앱 최초 실행 또는 위치 기능 진입 시 1회 노출. 거부 후 재요청은 설정 유도로 대체.

06 · Illustrations & Icons

뽀삐 캐릭터 (gpt-image-1 생성)

기본형 (Happy) — SC-21, 카드 썸네일 디폴트

illust_puppy_default.png

슬픔형 (Sad) — SC-05 Empty State

illust_puppy_sad.png

발바닥 아이콘 사용 규칙

FAB 아이콘 (18px, stroke white)

Lucide paw-print / 18px
bg:color-primary

팝업 아이콘 (44px, stroke color-paw)

Lucide paw-print / 44px
stroke:color-paw / bg:color-paw-lt

카운트 아이콘 (13px, stroke text-secondary)

256

ellipse 5개 방식 / 13px
카드 발바닥 수 표시용

탭바 아이콘 (22px, stroke currentColor)

발바닥

Lucide paw-print / 22px
탭바 발바닥 탭

07 · Toast Message — 4종

일시적인 피드백을 하단에 노출. 3초 후 자동 소멸. sc-frame 내부 기준 position:absolute, 탭바 위 bottom: calc(var(--h-tabbar) + var(--space-4)) 고정.

4종 실제 렌더링

Toast-Default

저장됐어요

bg: neutral-8 (#2D2B28) / color: neutral-0 (#FFFFFF)
아이콘 없음 또는 선택적 info 아이콘

Toast-Success

발바닥을 찍었어요!

bg: color-success (#10B981) / color: neutral-0
아이콘: Lucide check-circle / 18px stroke

Toast-Error

일시적인 오류가 발생했어요. 다시 시도해주세요

bg: color-error (#EF4444) / color: neutral-0
아이콘: Lucide x-circle / 18px stroke

Toast-Undo

발바닥이 해제됐어요 취소

bg: neutral-8 / color: neutral-0
"취소" 버튼: color green-4 (#9DC4AC) / fw:700 / margin-left:auto

사용 케이스 — screen_spec_v2 기준

화면	토스트 타입	문구	트리거
SC-02 지도탭	Toast-Default	이 지역에 등록된 카페가 없어요	지도 이 지역 검색 후 마커 0개
SC-08 카페상세	Toast-Success	발바닥을 찍었어요!	발바닥 찍기 버튼 탭 후 저장 완료
SC-15 발바닥목록	Toast-Undo	발바닥이 해제됐어요 · 취소	카드 좌측 스와이프 → 발바닥 해제 탭
전역 공통	Toast-Error	일시적인 오류가 발생했어요. 다시 시도해주세요	API 오류 / 네트워크 실패 공통 처리

위치 규칙 & 토큰

위치 규칙

position: absolute (sc-frame 내부 기준)
bottom: calc(var(--h-tabbar) + var(--space-4))
left: 50% / transform: translateX(-50%)
min-width: 200px / max-width: 320px
min-height: 44px (터치 타겟 기준)
z-index: 200 (탭바·FAB 위)

공통 스타일 토큰

padding: var(--space-3) var(--space-4) → 12px 16px
border-radius: var(--radius-md) → 12px
box-shadow: var(--shadow-md)
font-size: var(--text-sm) → 13px
font-weight: 600 / 아이콘: 18px stroke
지속 시간: 3초 후 자동 소멸