DESIGN SYSTEM
Design System
このサイトを構成しているデザイントークンとUIプリミティブの一覧です。配色・タイポグラフィ・余白・コンポーネントを一箇所にまとめています。
Colors
ライト/ダークモードで切り替わるグレースケース基調のカラートークン。
surface
--color-surface
surface-alt
--color-surface-alt
ink
--color-ink
muted
--color-muted
line
--color-line
accent
--color-accent
Typography
clamp() による流体タイポグラフィで、画面幅に応じて滑らかにスケールします。
Aa やーはり
display — --text-display
Aa やーはり
heading — --text-heading
Aa やーはり
subheading — --text-subheading
Aa やーはり — Body text (text-ink)
text-muted — secondary / supporting text
Spacing
vh単位のセクション余白トークンで、画面の高さに対して一定のリズムを保ちます。
--space-sm
--space-md
--space-lg
Buttons
主要導線用のピル型と、操作系コンパクトの2系統。
Cards
ホバーで浮き上がる、不透明な背景のカード。
サンプルカード
ホバーすると浮き上がり、影が表示されます。
Form Fields
下線のみのミニマルな入力欄。フォーカス時に下線色が変化します。
これはエラーメッセージのサンプルです
Badges & Status
ステータス表示用の小さなバッジとインジケーター。
開発中Category
対応可能