Design Tokens

「#3b82f6」とは書かない。「Primary Color」と呼ぶ。値に意味を持たせる。

Design Tokens
色、スペース、フォントサイズなどの「値」に名前を付けたもの。エンジニアとデザイナーの共通言語。

Semantic Naming

design-tokens.css
/* design-tokens.css */
:root {
  /* Primitive Tokens (Raw Values) */
  --blue-500: #3b82f6;
  --space-4: 1rem;


  /* Semantic Tokens (How to use) */
  --color-primary: var(--blue-500);
  --space-card-padding: var(--space-4);
}


.card {
  background: var(--color-surface);
  padding: var(--space-card-padding); /* Changing this changes ALL cards */
}
  • Primitive Token: --blue-500: #3b82f6 (Raw Value)
  • Semantic Token: --color-primary: var(--blue-500) (Meaning)
  • Component Token: --button-bg: var(--color-primary) (Usage)