デザインの基本
余白・形状
余白は決まった段階だけを使います。角丸・線の太さ・レイアウトの寸法もここにある値だけを使います。
元ファイルfoundations/tokens.cssfoundations/spacing-shape.md
余白の段階
| トークン | 値 | 見本 |
|---|---|---|
| 4px | ||
| 8px | ||
| 16px | ||
| 24px | ||
| 32px | ||
| 40px | ||
| 48px | ||
| 64px |
角丸・線
| トークン | 値 | 見本 |
|---|---|---|
| 12px | ||
| 8px | ||
| 8px | ||
| 999px | ||
| 2px |
その他の寸法
上の分類と、色・文字に入らないトークンをすべて並べています。用途は spacing-shape.md の表にあるものだけ表示します。
| トークン | 値 | 見本 | 用途（spacing-shape.md） |
|---|---|---|---|
| 1920px | — | — | |
| 1080px | — | — | |
| 96px | — | ||
| 96px | — | ||
| 80px | — | ||
| 40px | — | ||
| 40px | — | ||
| 16px | — | ||
| 24px | — | ||
| 1200px | — | — | |
| 240px | — | ||
| 768px | — | — | |
| 56px | — | ||
| 72px | 課題→取り組みの矢印の列幅 | ||
| 360px | — | 表の1列目（段階・項目名）の幅 | |
| 180px | 会社概要の項目名の列幅 | ||
| 3px | — | ||
| 8px | — |
ルール本文
foundations/spacing-shape.md をそのまま表示しています。
余白・形状
スライドの大きさ
- 16:9、1920×1080px（--slide-w / --slide-h）
余白
- 外周：上 96 / 左右 96 / 下 80px
- フッター：下から 40px（--footer-bottom）、左右は外周と同じ 96px
- 見出し → サブメッセージ 24px、サブメッセージ（ない場合は見出し） → 本文 48px
- 要素間 24〜40px。2列・3列グリッドの gap は 40px
- 兄弟要素の間隔は flex/grid の gap で取る
余白の段階（これ以外の値は使わない）
| トークン | px |
|---|---|
| --space-2xs | 4 |
| --space-xs | 8 |
| --space-s | 16 |
| --space-m | 24 |
| --space-l | 32 |
| --space-xl | 40 |
| --space-2xl | 48 |
| --space-3xl | 64 |
形状
- 角丸：カード 12px、バー・ボタン 8px、バッジ 999px
- 線の太さ：2px（--border）
- カード：白＋2px rock-200 枠、または rock-100 ベタ
- 影は原則なし（使う場合も黒8%・ぼかし6px）
- 番号バッジ：直径56〜72pxの円（基準 56px、--badge-num）、idea-100 地に idea-800 の数字。複数桁（例「1・2」）は横長のピルにして折り返さない
部品の寸法
| トークン | px | 用途 |
|---|---|---|
| --arrow-col | 72 | 課題→取り組みの矢印の列幅 |
| --table-label-col | 360 | 表の1列目（段階・項目名）の幅 |
| --profile-label-col | 180 | 会社概要の項目名の列幅 |
アプリ画面
- 横の余白：スマホ 16px（--app-pad-x）、768px 以上 24px（--app-pad-x-wide）。本文の最大幅 1200px（--app-max-w）。
- サイドバー幅 240px（--app-sidebar）。768px 未満（--app-mobile）では下タブに切り替える。
- カードの角丸 8px（--radius-app-card）、内側の余白 16〜24px。カード間 16px。
- 要素間の間隔はスライドと同じ段階（--space-*）だけを使う。