TAG
#Design System
17 件の記事がこのタグでまとめられています。
コントラスト検証を「要素×状態×テーマ」で総当たりする — axe-core の穴を埋める
axe-core を CI に入れていても、hover やダークテーマに切り替えた瞬間のコントラスト事故は漏れます。要素×状態×テーマを総当たりするブラウザ JS 監査手法を、OKLCH トークン + light/dark 運用の視点で読み解きます。静的 CSS 差分・実効背景色の合成・WCAG 比の計算と、その限界までまとめます。
CSS マスク 3 種の使い分け — alpha / luminance / vector
CSS のマスクは alpha / luminance / vector の 3 種に分かれます。透明度・明度・形のどれで下のレイヤーを抜くかという違いと、向き不向き・実装の落とし穴を、Figma の 3 マスクとの対応もふまえて実務目線で整理します。
Tailwind ユーティリティクラスは実 CSS のどこに落ちるか — 命名から読む utility-first
Tailwind のユーティリティクラスは text-sm や px-4 のように CSS プロパティと値の 1:1 マッピングですが、デザインシステムの「役割」までは届きません。AetherEchoes の paper/ink/cat-* 4 階層と、Tailwind v4 の @theme で utility と token を合流させた実装の観点で整理します。
OKLCH 色空間でデザイナーが実務で詰まる 3 点
Tailwind v4 でデフォルト化された OKLCH カラー。グラデーションの色かぶり、中間色のくすみ、ブランド色の置き換えの 3 つで、私が実装側として詰まったポイントと運用を整理します。
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` のセマンティックトークンを反転させるだけでダーク対応する設計。
5 部門それぞれで異なるヒーローを設計する
同じ「記事ページ」でも、Engineering と Essay でヒーローの組み方を変える。読み始めの空気を部門で切り分ける設計。
和英混植のタイポグラフィを組む
Bricolage Grotesque + Zen Kaku Gothic New + Fraunces + Noto Serif JP。記事本文と見出しで使い分ける和英ペアリングの考え方。
5 部門のカテゴリ色を決めた基準
Engineering / Design / AI / Process / Essay にそれぞれ異なる色を割り当てた根拠。色相の距離、彩度、ダーク派生まで。