---
version: alpha
name: "Care"
description: "화면마다 명확한 할 일 하나. 빨리 끝내고 싶은 환자를 위해. Care는 지쳤거나 걱정되거나 작은 화면으로 읽는 환자를 위해 쓰였습니다. 서늘하고 옅은 배경, 다음 단계를 알리는 차분한 세룰리안, 크고 평이한 라벨. 시간 선택이나 방문 확인 같은 하나의 작업을 마쳐야 다음으로 넘어갑니다."
colors:
  primary: "#0A6C8A"
  on-primary: "#FFFFFF"
  secondary: "#2EA37A"
  tertiary: "#E0A43A"
  neutral: "#4F6573"
  surface: "#F7FAFC"
  on-surface: "#0F2533"
typography:
  display-lg:
    fontFamily: "Source Sans 3"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Source Sans 3"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Source Sans 3"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2
  headline-sm:
    fontFamily: "Source Sans 3"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: "Source Sans 3"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "Source Sans 3"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 10px
  md: 12px
  lg: 14px
  xl: 18px
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

Care는 지쳤거나 걱정되거나 작은 화면으로 읽는 환자를 위해 쓰였습니다. 서늘하고 옅은 배경, 다음 단계를 알리는 차분한 세룰리안, 크고 평이한 라벨. 시간 선택이나 방문 확인 같은 하나의 작업을 마쳐야 다음으로 넘어갑니다.

## Colors

- **primary (#0A6C8A):** 차분한 세룰리안. 예약·확인 버튼, 선택한 시간대, 활성 탭에 씁니다.
- **on-primary (#FFFFFF)**
- **secondary (#2EA37A):** 제이드 그린. 확정된 진료, 정상 결과, 두 번째 차트 계열에 씁니다.
- **tertiary (#E0A43A):** 앰버. 알림, 대기 중인 결과, 세 번째 계열에 씁니다.
- **neutral (#4F6573):** 슬레이트 블루 그레이. 도움말, 주소, 시간에 씁니다.
- **surface (#F7FAFC):** 옅고 서늘한 흰색. 카드와 시간대가 돋보입니다.
- **on-surface (#0F2533)**

## Typography

전체를 Source Sans 3으로: 화면 제목(30px)과 섹션 제목은 Bold 700, 본문은 Regular 400 16px에 줄 높이 1.5. 예약 번호와 처방 코드는 Source Code Pro.

## Layout

화면은 좌우 패딩 20px을 유지하고, 그 아래 높이 64px의 4탭 하단 바. 화면당 작업 하나, 상단에 단계 표시기, 하단에 고정된 주요 버튼.

## Shapes

카드, 시간대, 시트는 14px 모서리, 알약 모양 주요 버튼. 탭할 수 있는 요소는 48px보다 작지 않게. 옅은 블루 그레이 1px 테두리와 카드의 부드럽고 낮은 그림자.

## Components

사진, 전문 분야, 평점, 가장 빠른 예약 시간이 있는 의사 카드, 시간대 칩이 있는 날짜 스트립, 길 안내와 화상 진료 버튼이 있는 예약 카드, 체크하며 쓰는 복약 알림, 정상 범위 막대가 있는 검사 결과.

## Do's and Don'ts

- 모든 예약은 요약 화면으로 확인하세요.
- 모든 상태 색상에는 아이콘과 단어를 함께 쓰세요.
- 한 화면에 주요 버튼을 두 개 두지 마세요.
- 쉬운 말이 있다면 의학 용어를 쓰지 마세요.