펫이어PetEar

PetEar Design System

V2 디자인 토큰 + 컴포넌트 라이브러리 미리보기

Color tokens

brand

#2DAC85

Primary

brand-dark

#196D56

CTA / 강조

brand-accent

#F0FBF8

Tinted bg

secondary

#1A1A2E

Navy / 신뢰

success

#2EBD85

건강

warning

#FFB627

주의

danger

#E63946

응급

info

#3A86FF

정보

Typography (Pretendard)

5xl / extrabold우리 아이 건강
4xl / extrabold제품 리뷰
3xl / bold커뮤니티
2xl / bold내 반려동물
xl / semibold게시글 제목
lg / semibold카드 헤더
base / medium본문 텍스트
sm / medium보조 설명
xs / semibold라벨 / 칩

Spacing (4-base modular)

14px
28px
312px
416px
624px
832px
1248px
1664px

Radius & Shadow

md · 12px
lg · 16px
pill
shadow-card
shadow-modal
shadow-hover

1. Button

2. Card

Flat

경계선만

Elevated

그림자 강조

Interactive

호버 가능

3. Badge

외이염관절분석 완료주의⚠️ 의심정보99+

4. Avatar

🐶
🐱
🐾
🐾
🐶
🐱
🐶
+2

5. Input

6. Toast

7. Bottom Sheet

8. Skeleton

9. Empty State

아직 등록된 반려동물이 없어요

반려동물을 등록하면 영수증과 리뷰가 더 정확해져요

10. Health Score Gauge

92
매우 좋음
68
양호
42
주의
20
관리 필요

11. Star Rating

인터랙티브 (현재 0 / 5)

12. Receipt Item Row

외이염 진찰료

진찰료

15,000원

지역 평균 14,000원

귀 세척 처치

ⓘ 평균 대비 차이

처치비

22,000원

지역 평균 12,000원

점이액

ⓘ 평균 대비 차이

약품비

28,000원

지역 평균 18,000원

항생제

ⓘ 평균 대비 차이

약품비

13,000원

지역 평균 9,000원