Color Palette

• Primary--color-primary
• Primary Dark--color-primary-dark
• Primary Light--color-primary-light
• Danger--color-danger
• Warning--color-warning
• Success--color-success
• Text--color-text
• Text Secondary--color-text-secondary
• Text Disabled--color-text-disabled
• Border--color-border
• Surface--color-surface
• Background--color-background

Typography

Heading 1 - 32px

Heading 2 - 24px

Heading 3 / Body - 20px

本文は20px・行間1.6を基準とします。日本語とEnglishの混植では text-autospace: normal によって和欧間に1/4emのスペースが自動挿入されます。たとえば「Claude Opus 4.8を2026年に使う」のような文でも、約物アキは text-spacing-trim で調整されます。

強調には 太字（bold）を、より強い意味にはstrongを使います。 リンクはこの通り下線色で表現します。 キーはCtrl+K、 注釈はこのようにsmallで添えます。 ハイライトはmarkで表現します。

Lists

順序なしリスト

• 静謐・クリーン・可読性最優先
• フラット設計
  • ネストした項目もリズムを維持
  • インデントは --space-inline-large（40px）
• 活字メディア・読み物向けレイアウト

順序付きリスト

1. ルートfont-sizeを最低20pxに固定
2. 余白をrlh（32px）のリズムに揃える

定義リスト

rlh

root line-height = 1.6 × 20px = 32px。block方向の全余白の基準単位。

ic

全角1文字の送り幅

Code

インラインコードは --space-block-small のような形で本文に溶け込みます。ブロックは横スクロールします:

:root {
  --color-primary: oklch(54% 0.247 293);      /* ブランドカラー差し替え */
  --color-primary-dark: oklch(40% 0.247 293); /* ホバー時 */
  --radius: 0;                                /* 角張らせる */
  --line-length: 50;                          /* 本文幅を 50ric に広げる */
}

Table

テーブルはフラット、影・角丸なし。セル背景は --color-surface、行区切りは 1px solid var(--color-border)。

Semantic Colors

Buttons

角は控えめな角丸（border-radius: var(--radius)）。 高さはタッチターゲットの最小サイズ基準に適合。

Primary Secondary Disabled

Forms