{
 "title": "pixelstomotors.com で使っているデザインの値",
 "note": "サイトのコードが正。{tokens:color}・{tokens:font} の行は、ビルドのときに src/layouts/Base.astro の :root から読む（値をここに書き写さない）。それ以外の行は、コードを変えたらここも直す",
 "tokenNotes": {
  "ink": "本文・見出しの文字",
  "ink-2": "説明文・補足の文字",
  "ink-3": "目立たせない文字（日付・アイコン）",
  "line": "区切りの面・メニューを押したときの面",
  "bg": "ページの地",
  "panel": "中身を載せる白い枠",
  "dark": "ボタン・フッターの黒ベタ",
  "sans": "サイト全体の文字（英数字は Inter、日本語は Noto Sans JP）",
  "mono": "コード・ログ"
 },
 "tabs": [
  {
   "name": "色",
   "rows": [
    [
     "名前",
     "値",
     "使う場所"
    ],
    [
     "サイトの基本の色"
    ],
    [
     "{tokens:color}"
    ],
    [
     "表"
    ],
    [
     "表の線",
     "#d2d2d2",
     "表の線と外枠"
    ],
    [
     "表の見出しの行",
     "#e9e9e9",
     "表のいちばん上の行"
    ],
    [
     "札",
     "#f0f0f0",
     "シリーズ名の札の地（文字は #888）"
    ],
    [
     "バナー（トップの案内・記事の中のバナー）"
    ],
    [
     "バナーの地",
     "#121418",
     "濃いバナーの地と、押したときの枠"
    ],
    [
     "バナーの淡い地",
     "#eceef1",
     "淡いバナーの地"
    ],
    [
     "差し色",
     "#f2600c",
     "バナーの大きな数字と、押すところだけに使う"
    ]
   ]
  },
  {
   "name": "文字",
   "rows": [
    [
     "使う場所",
     "太さ・大きさ / 行の高さ",
     "メモ"
    ],
    [
     "書体"
    ],
    [
     "{tokens:font}"
    ],
    [
     "大きさ"
    ],
    [
     "セクションの見出し",
     "600 24px / 36px",
     "一覧ページの「記録 | Record」など（.sec-h）"
    ],
    [
     "記事の小見出し（h2）",
     "600 24px / 36px",
     ""
    ],
    [
     "記事の小見出し（h3）",
     "600 20px / 30px",
     "左に 2px の線"
    ],
    [
     "記事の本文",
     "400 18px / 36px",
     ""
    ],
    [
     "資料の見出し",
     "500 16px / 24px",
     "シリーズのページの資料の名前（.s-label）"
    ],
    [
     "表の中",
     "400 14px / 22px",
     "見出しの行は 600"
    ],
    [
     "ボタン・ヘッダーの案内",
     "500 14px / 21px",
     ""
    ],
    [
     "注記・フッター",
     "400 13px / 20px",
     ""
    ],
    [
     "札・日付",
     "400 11px / 16px",
     ""
    ]
   ]
  },
  {
   "name": "形",
   "rows": [
    [
     "種類",
     "値",
     "使う場所"
    ],
    [
     "角丸"
    ],
    [
     "小",
     "4px",
     "ボタン・札・ヘッダーの案内"
    ],
    [
     "中",
     "8px",
     "カード・メニュー"
    ],
    [
     "大",
     "16px",
     "中身を載せる白い枠（.panel）"
    ],
    [
     "線と影"
    ],
    [
     "表の線",
     "1px #d2d2d2",
     "表"
    ],
    [
     "ヘッダーの影",
     "0 4px 4px rgba(0,0,0,.1)",
     "上に固定したヘッダー（地は白10%＋ぼかし10px）"
    ],
    [
     "メニューの影",
     "0 8px 24px rgba(0,0,0,.12)",
     "シリーズのメニュー"
    ]
   ]
  },
  {
   "name": "部品",
   "rows": [
    [
     "部品",
     "形",
     "メモ"
    ],
    [
     "黒いボタン",
     "高さ 31px・横の余白 16px・黒ベタに白い文字・角丸 4px",
     "ヘッダーの「メッセージ」（.btn-dark）"
    ],
    [
     "もっと見るボタン",
     "282 × 48px・黒ベタ・文字 500 20px",
     "記録の一覧（Load more）"
    ],
    [
     "ヘッダーの案内",
     "高さ 31px・押すと薄い灰の面",
     "いまいるページは下に 2px の線"
    ],
    [
     "札",
     "地 #f0f0f0・文字 #888・11px・角丸 4px",
     "シリーズ名"
    ],
    [
     "表",
     "見出しの行 #e9e9e9・線 #d2d2d2・中は白",
     "はみ出す分は横にスクロール"
    ]
   ]
  },
  {
   "name": "並び",
   "rows": [
    [
     "項目",
     "値",
     "メモ"
    ],
    [
     "中身の幅",
     "最大 1280px",
     "ヘッダー・白い枠・フッターで共通"
    ],
    [
     "ヘッダーの高さ",
     "48px",
     "上に固定"
    ],
    [
     "白い枠の中の余白",
     "32px（599px 以下は 24px / 16px）",
     ""
    ],
    [
     "セクションの外の余白",
     "左右 80px → 1023px 以下 24px → 599px 以下 12px",
     ""
    ],
    [
     "カードの列",
     "3列 → 1199px 以下 2列 → 599px 以下 1列",
     "題名が3行に収まる幅（約270px）を保つ"
    ],
    [
     "スマホに切り替える幅",
     "767px 以下",
     "ヘッダーの案内を ≡ のメニューにまとめる"
    ]
   ]
  },
  {
   "name": "決まり",
   "rows": [
    [
     "決まり",
     "中身"
    ],
    [
     "色を増やさない",
     "差し色は1つ（#f2600c）。意味を決めた場所にだけ使う。青を既定にしない"
    ],
    [
     "細い線より面",
     "押すところ・目立たせるところは黒ベタの面にする"
    ],
    [
     "ボタンは1つ",
     "1つの画面で押させるものは1つにする"
    ],
    [
     "押せるものは押せる形に",
     "リンクだとわかる見た目にする"
    ],
    [
     "そろえる",
     "幅・揃え・角丸・ボタンは、ほかのページとそろえる"
    ],
    [
     "詰め込まない",
     "1つの画面・セクションで伝えることを1つに決め、要らない要素は入れない"
    ]
   ]
  }
 ]
}