Chalk：親しみやすい教育デザインシステム

Web · ライト · 遊び心 · 大胆 · 教育

Chalk

明るく、丸みがあり、励ましてくれる。いい教室のように。

Chalk は、学ぶことを身近に感じさせます。温かみのあるクリーム色のページ、アクションには頼もしいブルー、進捗には明るいアンバーとグリーン、そして若い人にも疲れた目にも読みやすい大きさで組んだ丸みのある Nunito。レッスンは、はっきりラベルの付いた小さなステップに分けられています。

プレビュー

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

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

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

無料で始めるデモを予約

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

売上$48.2k

継続率86%

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

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

プロジェクトで使う

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

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

トークン

カラー

ライトテーマ

background#FFF8ECoklch(0.981 0.018 81.333)
foreground#1C2333oklch(0.257 0.032 265.974)
card#FFFFFFoklch(1 0 0)
card-foreground#1C2333oklch(0.257 0.032 265.974)
popover#FFFFFFoklch(1 0 0)
popover-foreground#1C2333oklch(0.257 0.032 265.974)
primary#1F5FD6oklch(0.52 0.194 261.461)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#FFE7B8oklch(0.936 0.066 84.017)
secondary-foreground#5A3B00oklch(0.379 0.08 75.782)
muted#F6EEDFoklch(0.951 0.022 83.264)
muted-foreground#5A6070oklch(0.49 0.027 269.134)
accent#FFEFD0oklch(0.957 0.044 83.913)
accent-foreground#1C2333oklch(0.257 0.032 265.974)
destructive#C22F2Foklch(0.538 0.184 25.962)
border#EADFCBoklch(0.907 0.029 82.593)
input#DDCFB6oklch(0.859 0.037 82.163)
ring#1F5FD6oklch(0.52 0.194 261.461)
chart-1#1F5FD6oklch(0.52 0.194 261.461)
chart-2#F59E0Boklch(0.769 0.165 70.08)
chart-3#16A34Aoklch(0.627 0.17 149.214)
chart-4#E0457Boklch(0.625 0.195 3.518)
chart-5#0EA5B7oklch(0.661 0.112 208.672)

ダークテーマ

background#141A26oklch(0.218 0.025 263.828)
foreground#F3EEE4oklch(0.95 0.014 84.584)
card#1B2232oklch(0.253 0.032 265.946)
card-foreground#F3EEE4oklch(0.95 0.014 84.584)
popover#1B2232oklch(0.253 0.032 265.946)
popover-foreground#F3EEE4oklch(0.95 0.014 84.584)
primary#7BA4FFoklch(0.728 0.14 264.763)
primary-foreground#141A26oklch(0.218 0.025 263.828)
secondary#2A2F3Boklch(0.305 0.023 267.284)
secondary-foreground#F3EEE4oklch(0.95 0.014 84.584)
muted#1F2635oklch(0.269 0.03 265.06)
muted-foreground#A2A9B8oklch(0.734 0.023 265.71)
accent#262E40oklch(0.302 0.035 265.827)
accent-foreground#F3EEE4oklch(0.95 0.014 84.584)
destructive#FF7A7Aoklch(0.735 0.163 21.864)
border#2C3446oklch(0.326 0.034 265.934)
input#364056oklch(0.372 0.04 265.526)
ring#7BA4FFoklch(0.728 0.14 264.763)
chart-1#7BA4FFoklch(0.728 0.14 264.763)
chart-2#FBBF4Aoklch(0.839 0.146 80.739)
chart-3#4ADE80oklch(0.8 0.182 151.711)
chart-4#F582A7oklch(0.744 0.145 0.747)
chart-5#4FD1E0oklch(0.796 0.114 205.941)

フォント

見出し: Nunito · 800
本文: Nunito · 500
等幅: JetBrains Mono

タイプスケール

display · 64/1.05 · -0.02emデザインで、画面はもっと使いやすくなる
h1 · 44/1.1 · -0.015emデザインで、画面はもっと使いやすくなる
h2 · 30/1.2 · -0.01emデザインで、画面はもっと使いやすくなる
h3 · 21/1.3デザインで、画面はもっと使いやすくなる
body · 18/1.6デザインで、画面はもっと使いやすくなる
small · 15/1.45デザインで、画面はもっと使いやすくなる

角の半径、余白、影

角の半径sm 12pxmd 14pxlg 16pxxl 20px

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

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

レイアウト

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

向いている用途

オンラインコースとブートキャンプ
学校、塾、子ども向けの学習
EdTech プロダクトのサイト
ワークショップと学習ガイド

やること・やらないこと

すべてのコースとレッスンに進捗を表示する。
情報量の多いレッスンでも、本文は 18px を保つ。
間違った答えを、短い説明なしに赤で示さない。
1 枚のカードで 3 色より多く使わない。