Clinic：医療・ヘルスケアデザインシステム

Web · ライト · やわらか · ヘルスケア

Clinic

落ち着いたティール、明快な文字、平易な言葉。ヘルスケアのサイトのために。

Clinic は信頼のために作られています。淡いミントホワイトのページ、アクションには深いティール、とても読みやすいヒューマニストサンセリフ、そして明快でゆとりのあるフォーム。どのページも、何かを売り込む前に、どこで、いつ、いくらかといった患者さんの次の疑問に答えます。

プレビュー

下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。

2026 年の新機能計画も、リリースも、計測も、ひとつの場所で

小さなチームのための、落ち着いたワークスペース。必要な数字はすべて、不要なものは何もなく。

無料で始めるデモを予約

アクティブユーザー12,480

売上$48.2k

継続率86%

チームを招待仕事用メールアドレスyou@company.comロール編集者 ▾招待を送信

最近の注文顧客ステータス金額Ada Park支払い済み$1,240Lukas Weber保留中$380Mei Chen返金済み$96

プロジェクトで使う

これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。

このプロジェクトでは Clinic デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/clinic.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。

トークン

カラー

ライトテーマ

background#F8FBFBoklch(0.986 0.003 197.105)
foreground#10282Boklch(0.259 0.03 206.13)
card#FFFFFFoklch(1 0 0)
card-foreground#10282Boklch(0.259 0.03 206.13)
popover#FFFFFFoklch(1 0 0)
popover-foreground#10282Boklch(0.259 0.03 206.13)
primary#0B6E69oklch(0.487 0.082 189.198)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#E3F1EFoklch(0.947 0.015 186.688)
secondary-foreground#0B4C48oklch(0.378 0.061 188.501)
muted#EEF5F4oklch(0.965 0.008 186.892)
muted-foreground#4E6466oklch(0.486 0.027 203.19)
accent#E6F2F0oklch(0.952 0.013 185.091)
accent-foreground#10282Boklch(0.259 0.03 206.13)
destructive#B3261Eoklch(0.501 0.178 28.705)
border#D6E4E3oklch(0.908 0.015 191.74)
input#C6D8D6oklch(0.868 0.02 188.766)
ring#0B6E69oklch(0.487 0.082 189.198)
chart-1#0B6E69oklch(0.487 0.082 189.198)
chart-2#3B82C4oklch(0.592 0.124 249.268)
chart-3#E0A43Aoklch(0.758 0.137 77.684)
chart-4#7C6BC4oklch(0.584 0.133 290.433)
chart-5#D45D79oklch(0.634 0.152 7.8)

ダークテーマ

background#0D1A1Coklch(0.207 0.019 208.072)
foreground#E4EFEEoklch(0.944 0.012 190.437)
card#132326oklch(0.243 0.022 210.657)
card-foreground#E4EFEEoklch(0.944 0.012 190.437)
popover#132326oklch(0.243 0.022 210.657)
popover-foreground#E4EFEEoklch(0.944 0.012 190.437)
primary#5CC8BFoklch(0.767 0.1 187.944)
primary-foreground#0D1A1Coklch(0.207 0.019 208.072)
secondary#1B2E31oklch(0.286 0.025 208.362)
secondary-foreground#E4EFEEoklch(0.944 0.012 190.437)
muted#172A2Doklch(0.27 0.025 208.428)
muted-foreground#8FA7A9oklch(0.711 0.027 202.725)
accent#1F3438oklch(0.309 0.028 210.85)
accent-foreground#E4EFEEoklch(0.944 0.012 190.437)
destructive#F2827Aoklch(0.729 0.139 25.284)
border#24393Coklch(0.328 0.027 207.159)
input#2D4549oklch(0.372 0.03 208.959)
ring#5CC8BFoklch(0.767 0.1 187.944)
chart-1#5CC8BFoklch(0.767 0.1 187.944)
chart-2#7DB4E8oklch(0.752 0.095 247.822)
chart-3#F0C26Eoklch(0.838 0.115 81.184)
chart-4#A99BEAoklch(0.732 0.113 291.466)
chart-5#EE93A9oklch(0.763 0.112 4.425)

フォント

見出し: Source Sans 3 · 700
本文: Source Sans 3 · 400
等幅: Source Code Pro

タイプスケール

display · 60/1.05 · -0.025emデザインで、画面はもっと使いやすくなる
h1 · 40/1.1 · -0.02emデザインで、画面はもっと使いやすくなる
h2 · 28/1.2 · -0.01emデザインで、画面はもっと使いやすくなる
h3 · 20/1.3デザインで、画面はもっと使いやすくなる
body · 16/1.55デザインで、画面はもっと使いやすくなる
small · 13/1.45デザインで、画面はもっと使いやすくなる

角の半径、余白、影

角の半径sm 6pxmd 8pxlg 10pxxl 14px

余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px

影低く広がるやわらかな影。カードとシートにだけ使います。

レイアウト

最大幅: 1200px
本文の幅: 70ch
カラム: 12
ガター: 24px

向いている用途

クリニックと診療所
オンライン診療とデジタルヘルス
医療保険と患者ポータル
薬局とウェルネスサービス

やること・やらないこと

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