CSS TOKEN SYSTEM

Semantic Color Token Builder

段階色を、UIで使う役割へ。Light／Darkのsemantic tokensを同時に設計します。

CSS light-dark()対応
02

LIVE COMPARISON

同じUI、違うカラーモード

SAME ROLES
LIGHT MODE◐
Workspace•••
NEW TOKENS

Design with roles,
not color numbers.

surface・text・borderを、意味のある名前で管理します。

Semantic colors7 roles
DARK MODE◑
Workspace•••
NEW TOKENS

Design with roles,
not color numbers.

surface・text・borderを、意味のある名前で管理します。

Semantic colors7 roles
03

SEMANTIC TOKENS

役割とコントラストを確認

FIGMA · COLLECTION / SEMANTIC
04

OUTPUT

Light／Darkをコードへ