出発点
「個人雑誌のデザインシステム」という言い方は仰々しい。実態は 5 部門 × 2 モード（light/dark）× 7 フォントを破綻させない最小ルール のことだ。
Atlas（観測図）と Ledger（元帳）を交配させたハイブリッドにした。Atlas を主軸に、Ledger の編集ツール（Roman 章番号 / Drop Cap / フォリオライン）を Reader 記事側にだけ重ねる。Admin はノイズなしで Atlas のまま。
トークンの 4 階層
CSS 変数を 4 階層で組んだ。
1. base color (paper / ink / rule / accent)
2. category color (cat-engineering / cat-design / ...)
3. role token (hero, body, hairline, dropcap)
4. component class (.reader-prose, .ad-slot, .legal-prose)
階層 1 と 2 はサイト共通。階層 3 と 4 は Reader / Admin で別経路。これにより Reader を派手にしても Admin が落ち着いたままになる。
5 部門色は dot だけにしない
「Engineering 青 / Design 黄 / AI 緑 / Process 茶 / Essay 赤」を dot だけで使う とサイトが寂しくなる。私は 7 箇所に展開した:
- card-row 上端の hairline スライドイン
- 記事ヒーローの ID 番号 (#0012)
- blockquote の左罫線
- TOC の active 表示
- chip の border + text
- progress bar
- 関連記事カードの cat-color top bar
「dot にしか出ない部門色」は機能しない。面で塗らずに、線と数字に流し込むのが正解だった。
Reader と Admin で別の prose クラス
最初は .reader-prose ひとつで済まそうとして失敗した。法務ページの h2「1. 取得する情報」に Roman 章番号「I.」が二重表示されて見苦しいことに気づいた。
.reader-prose h2::before {
content: counter(section, upper-roman) ".";
}
これは記事には効くが、法務には害。.legal-prose を別途切って、counter / drop cap を抜いた版にした。「同じものに見せかけて違うもの」を作るより、別物として切る ほうが楽だった。
Drop Cap は最初の段落だけ
.reader-prose > p:first-of-type::first-letter {
font-family: var(--font-serif);
font-style: italic;
font-size: 3.6em;
...
}
first-of-type を使うのが大事。first-child だと、もし最初の要素が h1 だった時に効かない。
サイズは何度も振った末 3.6em に落ち着いた。5em は派手すぎて短い段落で崩れる。3em は控えめすぎて気付かれない。3.6 がちょうど「あ、Drop Cap だ」と認識される下限。
ダークモードはトークンの反転だけ
ダーク用に新しい変数を 0 個増やした。.dark { --color-paper: #0E0E0E; --color-ink: #F0F0EC; ... } で base 値を反転するだけ。
5 部門色も少しだけ明るめに振る:
.dark {
--color-cat-engineering: #5C82FF; /* 元 #2D5BFF より明るく */
--color-cat-design: #FFC54D;
--color-cat-ai: #33C28C;
--color-cat-process: #C99063;
--color-cat-essay: #FF6B73;
}
これで全コンポーネントが自動的にダークに切り替わる。dark: Tailwind 修飾子をほぼ使わずに済んだ。
まとめ
デザインシステムは「個別の場面で迷わない最小ルール」を目指す。色を増やすより、既存の色を 7 箇所に流し込む ほうが豊かに見える。dark mode は変数の反転だけで足りる。
装飾を増やすのではなく、装飾を共有する。それがシステム化の本質だと思う。