Design System — Kalm Spa
스타일 가이드
레퍼런스 등록: 2026-07-09 · 디자인명
아이보리 리트리트 (Ivory Retreat) · 출처: Kalm
Moments(스파/웰니스 브랜드) 서비스·가격표 섹션에서 추출한 디자인
시스템
스파/웰니스 브랜드(Kalm Moments)의 서비스·가격표 섹션에서 추출한
디자인 시스템 문서입니다. 차분한 뉴트럴 톤, Cormorant Garamond 세리프,
손으로 그린 듯한 라인 일러스트가 핵심 아이덴티티입니다.
관찰 체크리스트
(레퍼런스 충실 프로토콜 1단계)
| # |
항목 |
레퍼런스는? (관찰) |
| 1 |
레이아웃 형태 (싱글페이지 스크롤 / 페이지 넘김 / 단
구성·본문 폭) |
max-w-6xl mx-auto 컨테이너, 서비스 카드 3열
그리드(grid-cols-1 md:grid-cols-3 gap-6),
py-16 md:py-24 섹션 패딩 — 섹션형 랜딩 블록 |
| 2 |
네비게이션 (상단/측면 고정 여부, 목차 점프,
따라다님) |
해당 없음 (서비스·가격표 섹션만 발췌한 문서, 네비게이션 범위
밖) |
| 3 |
현재 위치·진도 표시 (스크롤 진도바, "N/M", 현재 장
하이라이트) |
해당 없음 (정적 디자인 시스템 문서) |
| 4 |
인터랙션 (목차 접기·펼치기, 긴 표/섹션 토글,
부드러운 앵커 스크롤) |
헤더 진입 페이드+슬라이드(whileInView 1회), 카드
스태거(개별 delay 0.1 * index), 버튼 호버 색
반전(whileHover) + 탭 scale 0.98 |
| 5 |
색·타이포 (강조색, 폰트 위계, 박스 색 구분) |
웜 아이보리 배경(#F8F4EF)+소프트 차콜
텍스트(#3D3D3D)+웜 탠 일러스트 컬러(#C9A77C,
모드 무관 고정), 채도 극도로 억제. Cormorant Garamond 대문자 세리프
타이틀 + Inter 본문, 작은 크기·넓은 자간 |
| 6 |
도식·일러스트 (흐름도/다이어그램 스타일, 인라인 SVG
vs 이미지) |
인라인 SVG 라인아트 직접 제작(아이콘 라이브러리 미사용),
strokeWidth 1.5 단색 탠, 브러시·오일병·핫스톤 등 오브젝트
2–3개 조합 |
| 7 |
콜아웃 박스 (팁/주의/단계/인용 등 정보 유형별
박스) |
가격 태그(priceButtonBg 세이지 옐로 배경,
rounded-sm), 아웃라인 버튼(1px 보더, 호버 시 색 반전) |
| 8 |
반응형·모바일 (좁은 화면 동작) |
타이틀 text-2xl → md:text-3xl → lg:text-4xl, 그리드
grid-cols-1 → md:grid-cols-3 |
| 9 |
표지·간지 (키비주얼, 챕터 도입) |
해당 없음 (서비스·가격표 섹션만 발췌, 표지 개념 없음) |
1. 디자인 컨셉
- 무드: 고요함, 자연, 미니멀 럭셔리 (Calm · Natural ·
Understated Luxury)
- 시그니처: 탠(tan) 컬러의 1.5px 라인아트 일러스트 +
대문자 세리프 타이틀 양옆의 수평선 장식
- 원칙: 채도를 극도로 억제한 뉴트럴 팔레트, 작은 글자
크기와 넓은 자간(tracking)으로 여백의 미 강조
2. 컬러 토큰
2.1 Light Mode
| 토큰 |
HEX |
용도 |
background |
#F8F4EF |
페이지 배경 (웜 아이보리) |
cardBg |
#FFFFFF |
서비스 카드 배경 |
textPrimary |
#3D3D3D |
타이틀, 항목명 (소프트 차콜) |
textSecondary |
#6B6B6B |
헤더 설명문 |
textMuted |
#8A8A8A |
카드 설명, 소요시간 |
titleUnderline |
#3D3D3D |
타이틀 양옆 수평선 |
priceButtonBg |
#D4D4A9 |
가격 태그 배경 (세이지 옐로) |
priceButtonText |
#3D3D3D |
가격 태그 텍스트 |
learnMoreBorder / learnMoreText |
#3D3D3D |
아웃라인 버튼 |
illustrationColor |
#C9A77C |
라인 일러스트 (웜 탠) |
2.2 Dark Mode
| 토큰 |
HEX |
용도 |
background |
#1A1A1A |
페이지 배경 |
cardBg |
#2A2A2A |
카드 배경 |
textPrimary |
#F5F5F5 |
타이틀 |
textSecondary |
#C4C4C4 |
헤더 설명문 |
textMuted |
#9A9A9A |
보조 텍스트 |
titleUnderline |
#F5F5F5 |
수평선 |
priceButtonBg |
#4A4A3A |
가격 태그 (다크 올리브) |
priceButtonText |
#F5F5F5 |
가격 태그 텍스트 |
learnMoreBorder / learnMoreText |
#F5F5F5 |
아웃라인 버튼 |
illustrationColor |
#C9A77C |
일러스트 — 모드 무관 고정 |
다크 모드 규칙: 텍스트·보더는 그레이스케일 반전,
가격 태그는 채도 낮춘 다크 올리브로 전환. 일러스트의 탠
컬러(#C9A77C)는 브랜드 상수로 두 모드에서 동일 유지.
3. 타이포그래피
| 역할 |
폰트 |
스타일 |
크기 |
| 섹션 타이틀 |
Cormorant Garamond (serif) |
대문자, tracking-wider |
text-2xl → md:text-3xl →
lg:text-4xl |
| 카드 타이틀 |
Cormorant Garamond |
대문자, font-semibold, tracking-wider,
leading-tight |
text-xl → md:text-2xl |
| 헤더 설명 |
Inter (sans) |
regular, leading-relaxed |
text-sm → md:text-base |
| 카드 설명 |
Inter |
regular, leading-relaxed |
text-xs |
| 항목명 |
Inter |
font-medium, tracking-wide |
text-xs |
| 소요시간·가격 |
Inter |
regular |
text-[10px] |
| 버튼 |
Inter |
tracking-wider |
text-xs |
- 폰트 로딩: Google Fonts
@import (Cormorant Garamond
400–700 + italic, Inter 300–500)
- 세리프는 타이틀 전용, 나머지 UI는 전부 Inter. 타이틀은
\n 줄바꿈(whitespace-pre-line)으로 2행 구성
(예: "HAIR\nSPA")
- 전반적으로 작은 크기 + 넓은 자간이 브랜드 톤을
만드는 핵심
4. 레이아웃 & 스페이싱
- 컨테이너:
max-w-6xl mx-auto, 섹션 패딩
py-16 md:py-24 px-4
- 그리드: 서비스 카드 3열
grid-cols-1 md:grid-cols-3 gap-6
- 카드:
rounded-lg p-6 — 보더·섀도 없이
배경색 대비만으로 구분 (플랫)
- 헤더: 타이틀 양옆
h-px w-12 md:w-20
수평선 + gap-4, 설명은 max-w-2xl 중앙
정렬
- 카드 내부 리듬: 일러스트(
h-24 mb-4) →
타이틀(mb-4) → 설명(mb-6) → 가격
목록(space-y-4 mb-6) → 버튼
5. 컴포넌트 패턴
5.1 서비스 카드
일러스트 → 2행 대문자 세리프 타이틀 → 설명 → 가격 리스트 → 아웃라인
버튼의 고정 수직 구조. 그림자 없이 배경 대비만 사용.
5.2 가격 행 (Price Row)
- 좌측: 항목명(
text-xs font-medium) +
소요시간(text-[10px] muted),
flex-1 min-w-0
- 우측: 가격 태그 —
priceButtonBg 배경,
px-3 py-1 rounded-sm,
whitespace-nowrap flex-shrink-0
- 범위 표기 지원: "60 minutes - 120 minutes", "750 THB - 1,500
THB"
5.3 버튼 (Learn More)
- 기본: 투명 배경 + 1px 보더(
learnMoreBorder),
px-6 py-2 rounded-sm
- 호버: 배경 ↔︎ 텍스트 색 반전 (
textPrimary 배경 +
cardBg 텍스트), motion whileHover
- 탭:
whileTap={{ scale: 0.98 }}
- 콜백:
onLearnMore?.(serviceIndex) 옵셔널 prop
5.4 타이틀 장식
── OUR SERVICES ── 형태 — 텍스트 양옆에 얇은 수평선을
두는 클래식 스파 브랜딩 장치.
6. 일러스트 시스템
이 디자인의 정체성. 아이콘 라이브러리 대신 인라인 SVG
라인아트를 직접 작성.
| 규칙 |
값 |
| viewBox |
0 0 200 100 (2:1 비율), w-full h-auto |
| 선 |
주 오브젝트 strokeWidth 1.5, 디테일/증기선
1, fill="none" |
| 컬러 |
단색 illustrationColor (#C9A77C) 하나만 사용 |
| 장식 |
작은 원형 도트 opacity 0.5, 채움 요소는
opacity 0.3 |
| 소재 |
브러시·오일병·핫스톤·타월·페이스롤러·꽃 등 주제와 직결된 오브젝트
2–3개 조합 |
| 구도 |
좌측 큰 오브젝트 → 중앙 병 → 우측 식물/꽃 장식 + 여백에 도트 |
새 일러스트 추가 시: { color }: { color: string } prop을
받는 함수 컴포넌트로 작성하고 illustrations 배열에 등록
(index % length 순환 매핑).
7. 모션 (motion/react)
| 패턴 |
값 |
| 헤더 진입 |
opacity 0→1, y 20→0, duration 0.5,
whileInView + once: true |
| 카드 스태거 |
y 30→0, duration 0.5,
delay 0.1 * (index + 1) — 컨테이너 variants 대신 개별 delay
방식 |
| 버튼 호버 |
색 반전 (whileHover) +
transition-colors duration-200 |
| 버튼 탭 |
scale 0.98 |
원칙: 진입 애니메이션은 스크롤 1회 페이드+슬라이드로
제한. 인터랙션은 버튼의 색 반전 하나에만 집중.
8. 컴포넌트 API 컨벤션
interface Props {
mode?: "light" | "dark"; // 테마 prop 주입
header?: { title: string; description: string };
services?: {
title: string; // "\n"으로 2행 타이틀
description: string;
items: { name: string; duration: string; price: string }[];
buttonText: string;
}[];
onLearnMore?: (serviceIndex: number) => void; // 액션 콜백
}
- 파일 상단
CUSTOMIZATION 블록에 COLORS와
DEFAULT_CONTENT를 모아 수정 지점 집중
- 컬러는
COLORS[mode] 조회 후 인라인 style
적용, Tailwind는 레이아웃·타이포 유틸 전용
- 가격은 통화 포함 문자열로 관리 (예: "1,290 THB") — 포맷팅 로직 없이
콘텐츠로 취급