デザイントークン確認

Color（12種）

アクセント色は「押せる」ことにのみ使う。状態の表示には使わない。

• --color-bg#FFFFFF
• --color-surface#FAFAFA
• --color-surface-2#F5F5F5
• --color-text#111111
• --color-text-body#333333
• --color-text-muted#6B6B6B
• --color-text-subtle#9A9A9A
• --color-border#E5E5E5
• --color-border-strong#D4D4D4
• --color-accent#2C4A6E
• --color-accent-weak#EDF1F6
• --color-marker#F5E6BC

Spacing（8種）

4の倍数ベース。

• --space-44px
• --space-88px
• --space-1212px
• --space-1616px
• --space-2424px
• --space-3232px
• --space-4040px
• --space-5656px

Radius（4種）

• --radius-4
• --radius-8
• --radius-12
• --radius-full

Typography（Noto Sans JP 400 / 500 / 700）

• 抜粋見出し — Noto Sans JP Bold / 30 / 155%

  本を閉じない読み方について

• 書名 — Noto Sans JP Bold / 16 / 160%

  思考の整理学

• サイト名 — Noto Sans JP Bold / 19 / 150%

  insight

• 抜粋本文 — Noto Sans JP Regular / 16 / 34px

  本文は簡単に閉じさせない。読み手に多少の忍耐を求めるのが、このサイトの狙いである。抜粋パネルには閉じる操作を置かない。

• 関連項目の書名 — Noto Sans JP Medium / 13 / 160%

  知的生産の技術

• パネル見出し — Noto Sans JP Bold / 11 / 150%

  関連する本

• 出版社・補助 — Noto Sans JP Regular / 12 / 150%

  筑摩書房

• 出版社・補助（小） — Noto Sans JP Regular / 11 / 150%

  筑摩書房

色の使い分け