---
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):** 明快なブルー。情報のコールアウトと 2 番目のチャート系列用。
- **tertiary (#E0A43A):** 温かみのあるアンバー。リマインダー、保留中の状態、3 番目の系列用。
- **neutral (#4E6466):** わずかにティールがかったスレートグレー。補足テキストとフォームのヒント用。
- **surface (#F8FBFB):** ごく淡いミントホワイト。白いカードがやわらかな影で浮き上がります。
- **on-surface (#10282B)**

## Typography

全体を Source Sans 3 で統一。見出しはボールドの 700 で 60px のディスプレイから 20px まで、本文はレギュラー 400、16px、行の高さ 1.55。受付番号やコードは Source Code Pro。1 行は 70 文字前後に収めます。

## Layout

ページは最大 1200px の 12 カラムグリッド、ガター 24px、余白の単位 4px。サービスのページは短い概要から始め、続いて診療時間と所在地、デスクトップでは予約カードを常に表示しておきます。

## Shapes

カード、入力欄、ボタンは 10px の角丸。淡いグレーがかったティールの 1px の枠線。カードと予約パネルは、やわらかく低い影で浮かせます。

## Components

日付と時間枠を選ぶ予約カード、写真と専門分野を載せた医師のプロフィールカード、ラベルとヒントを常に表示するフォーム欄、FAQ のアコーディオン。

## Do's and Don'ts

- ボタンは、患者さんが使う平易な動詞で書く。
- フォームのラベルは、すべて入力欄の上に表示したままにする。
- 赤はエラーと緊急の警告以外には使わない。
- 状態を色だけで示さない。