CATEGORIES · 02 / 05
Design
タイポグラフィ、グリッド、色、余白。誌面という装置をつくる手仕事。（28 本）
border-shape で UI の輪郭をデザインする
Chrome 147 で実装が始まった CSS の border-shape プロパティ。border-radius と何が違い、clip-path と何が違うのか。design token としての扱い方と、誌面で使う / 使わないの判断を実装記録と一緒に書きます。
<dialog> / Popover / <details name> をデザイナーの目で使い分ける
ネイティブ HTML の overlay 3 兄弟、<dialog> と Popover API と <details name> を AetherEchoes の管理画面と記事ページで実装してみた。「閉じ方」のデザインを先に決めれば、3 つの使い分けはほぼ自動で決まります。
トークン反転だけでダークモードを実装する
個別 CSS で `.dark` を上書きせず、`@theme` のセマンティックトークンを反転させるだけでダーク対応する設計。
Drop Cap とローマ数字の使いどころ
Essay 部門にだけ Drop Cap を、Engineering 部門にだけセクション番号を使う。装飾の使い分けで部門を区別する設計。
5 部門それぞれで異なるヒーローを設計する
同じ「記事ページ」でも、Engineering と Essay でヒーローの組み方を変える。読み始めの空気を部門で切り分ける設計。
和英混植のタイポグラフィを組む
Bricolage Grotesque + Zen Kaku Gothic New + Fraunces + Noto Serif JP。記事本文と見出しで使い分ける和英ペアリングの考え方。
5 部門のカテゴリ色を決めた基準
Engineering / Design / AI / Process / Essay にそれぞれ異なる色を割り当てた根拠。色相の距離、彩度、ダーク派生まで。
B+A Hybrid デザインシステム採択の記録
AetherEchoes に採択した B+A Hybrid 案。Atlas をメイン軸に、Reader 記事に Ledger の編集ツールを差し込むハイブリッド。
Tailwind CSS v4 の @theme で色と余白を一本化する
Tailwind v4 では設定ファイルが CSS ベースに切り替わりました。`@theme` で色・余白・タイポグラフィをひとつの場所で管理する方法を紹介します。
CSS Custom Properties で design tokens を運用する
Figma の Variables と CSS の `--` プロパティを 1:1 で同期させる運用ルール。デザインと実装が乖離しない仕組み。