---
version: alpha
name: "Clinic"
description: "건강 웹사이트를 위한 차분한 틸, 또렷한 타이포그래피, 쉬운 말. Clinic은 신뢰를 위해 만들어졌습니다. 옅은 민트빛 흰 페이지, 행동에는 짙은 틸, 가독성이 높은 휴머니스트 산세리프, 명확하고 여유로운 폼. 모든 페이지는 무언가를 팔기 전에 환자의 다음 질문, 즉 어디서, 언제, 얼마인지에 먼저 답합니다."
colors:
  primary: "#0B6E69"
  on-primary: "#FFFFFF"
  secondary: "#3B82C4"
  tertiary: "#E0A43A"
  neutral: "#4E6466"
  surface: "#F8FBFB"
  on-surface: "#10282B"
typography:
  display-lg:
    fontFamily: "Source Sans 3"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: "Source Sans 3"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Source Sans 3"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Source Sans 3"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: "Source Sans 3"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: "Source Sans 3"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
rounded:
  sm: 6px
  md: 8px
  lg: 10px
  xl: 14px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Clinic은 신뢰를 위해 만들어졌습니다. 옅은 민트빛 흰 페이지, 행동에는 짙은 틸, 가독성이 높은 휴머니스트 산세리프, 명확하고 여유로운 폼. 모든 페이지는 무언가를 팔기 전에 환자의 다음 질문, 즉 어디서, 언제, 얼마인지에 먼저 답합니다.

## Colors

- **primary (#0B6E69):** 짙은 틸. 예약 버튼, 링크, 현재 단계에 씁니다.
- **on-primary (#FFFFFF)**
- **secondary (#3B82C4):** 선명한 파랑. 안내 콜아웃과 두 번째 차트 계열에 씁니다.
- **tertiary (#E0A43A):** 따뜻한 앰버. 알림, 대기 상태, 세 번째 계열에 씁니다.
- **neutral (#4E6466):** 틸 기운이 살짝 도는 슬레이트 그레이. 도움말과 폼 힌트에 씁니다.
- **surface (#F8FBFB):** 아주 옅은 민트빛 흰색. 흰 카드가 부드러운 그림자로 떠 보입니다.
- **on-surface (#10282B)**

## Typography

전체를 Source Sans 3으로: 제목은 Bold 700으로 60px 디스플레이에서 20px까지, 본문은 Regular 400 16px, 줄 높이 1.55. 참조 번호와 코드는 Source Code Pro. 한 줄은 70자 안팎으로 유지하세요.

## Layout

페이지는 12컬럼 그리드에서 최대 1200px, 거터 24px, 간격 단위 4px. 서비스 페이지는 짧은 요약으로 시작해 진료 시간과 위치를 보여 주고, 데스크톱에서는 예약 카드가 계속 보입니다.

## Shapes

카드, 입력창, 버튼은 10px 모서리. 옅은 회색빛 틸 1px 테두리, 부드럽고 낮은 그림자로 카드와 예약 패널을 띄웁니다.

## Components

날짜와 시간대가 있는 예약 카드, 사진과 전문 분야가 있는 의사 프로필 카드, 라벨과 힌트가 항상 보이는 폼 필드, FAQ 아코디언.

## Do's and Don'ts

- 버튼은 환자가 실제로 쓸 쉬운 동사로 쓰세요.
- 모든 폼 라벨을 입력창 위에 항상 보이게 두세요.
- 오류와 긴급 경고 외에는 빨간색을 쓰지 마세요.
- 상태를 색상만으로 표현하지 마세요.