TAG

#Design System

17 件の記事がこのタグでまとめられています。

B+A Hybrid デザインシステム採択の記録
Design

B+A Hybrid デザインシステム採択の記録

AetherEchoes に採択した B+A Hybrid 案。Atlas をメイン軸に、Reader 記事に Ledger の編集ツールを差し込むハイブリッド。

2026年5月9日 20:03
Next.js 16 + Tailwind v4 を本番で動かして気付いた N 個のこと
Engineering

Next.js 16 + Tailwind v4 を本番で動かして気付いた N 個のこと

Pages Router + @theme + next/font 7 種で個人雑誌を組んだ実装メモ。CSS 変数の名前空間、フォントの preload 戦略、ISR の落とし穴。

2026年5月9日 19:36
Tailwind CSS v4 の @theme で色と余白を一本化する
Design

Tailwind CSS v4 の @theme で色と余白を一本化する

Tailwind v4 では設定ファイルが CSS ベースに切り替わりました。`@theme` で色・余白・タイポグラフィをひとつの場所で管理する方法を紹介します。

2026年4月22日 09:00
CSS Custom Properties で design tokens を運用する
Design

CSS Custom Properties で design tokens を運用する

Figma の Variables と CSS の `--` プロパティを 1:1 で同期させる運用ルール。デザインと実装が乖離しない仕組み。

2025年9月23日 17:00
カラーパレットを 7 色に絞る
Design

カラーパレットを 7 色に絞る

色は増やすほど統一感が消える。AetherEchoes が運用している 7 色固定の理由と、足りないと感じた瞬間の対処法。

2025年8月19日 13:00
アイコンの線幅を 1.5px で揃えるだけで世界が変わる
Design

アイコンの線幅を 1.5px で揃えるだけで世界が変わる

lucide / heroicons / 自作アイコンが混ざると、線の太さが揃わずに「ガチャガチャ感」が出る。stroke-width を統一する習慣。

2025年7月16日 14:00
ダークモード設計の判断軸 — 白を黒にするだけでは終わらない
Design

ダークモード設計の判断軸 — 白を黒にするだけでは終わらない

`background: black` ではダークモードにならない。コントラスト・色温度・オブジェクトの優先順位を、ライト時と別軸で考える。

2025年6月18日 22:00