デザインシステム
このキット。
トークン・タイポ・コンポーネント・モーションを、サイト本体と同じCSSで描画。
01 — カラー
面 6・線 3・テキスト 5・アクセント 1。
サーフェス
--surface-canvas #FFFFFF
--surface-raised #FAFAFA
--surface-sunken #F5F5F5
--surface-muted #EFEFEF
--surface-subtle #E8E8E8
--surface-strong #DEDEDE
ボーダー
--border-subtle #E8E8E8
--border-default #D6D6D6
--border-strong #A3A3A3
テキスト
--text-primary #171717
--text-secondary #353535
--text-tertiary #525252
--text-muted #666666
--text-faint #707070
アクセント
--accent --text-primary
--accent-hover --text-tertiary
--accent-surface --surface-sunken
--accent-border --border-default
02 — タイポ
書体を揃え、情報の階層をつくる。
いろはにほへと
ちりぬるをわか
よたれそつねならむ
いろはにほへと ちりぬるを わかよたれそ。
うゐのおくやま けふこえて あさきゆめみし。
0123 4567 — &@#%
03 — コンポーネント
実物のアトム。
Buttons
.btn-primary · .btn-ghost
Chips
.project-tag · .tool-chip
LegalTech / AI SaaS Design System Next.js TypeScript Figma
Nav item
.nav-item · .active
Contact row
.contact-link-item
04 — モーション
操作にだけ反応する、控えめな動き。
Spring --ease-spring
cubic-bezier(0.16, 1, 0.3, 1) Out --ease-out
cubic-bezier(0.0, 0.0, 0.2, 1) Icons
SVG · currentColor · 1.5px