このサンプルで見ること
- Input
- LPで使った色、ボタン、カード、セクション構成を再利用できるキットとして整理する。
- Design Focus
- 一回限りの見た目ではなく、次の画面にも使える判断材料を切り出すサンプルです。トークンとコンポーネントの境界を見える化します。
- Handoff
- Tokens, components, usage notes
Open Design sample 04
画面の意図を、色、余白、部品に残す。
一回限りの見た目ではなく、次の画面にも使える判断材料を切り出すサンプルです。トークンとコンポーネントの境界を見える化します。
OKLCHコンポーネント再利用
system.sample.html
systematic / warm / reusable
Design System
デザインシステム展開
生成から確認まで
Tokens
色と余白の役割を名前で管理
Parts
使い回す単位と使い捨てる単位を分ける
Rules
次の画面で迷わない制約を残す