デザインシステムにおけるColor Structure

January 3, 2023

Last edited time

Jan 31, 2023 03:48 PM

問題

マイベストのDesign Tokensでは、


color - domain - key

の構造でデザインシステムをつくっていた。

text	black
text	gray
text	white
text	blue
text	primary
text	red

bg	black
bg	blackAlpha
bg	dark_gray
bg	gray
bg	white

ところが、ダークモードやっていこうという機運がやってきた。

やるなら今だと。

色情報をすべて変数化している前提でダークモードをやるときのアプローチは2つある。

色をコンポーネントが使用するときに制御する

モードに応じてtheme自体をそっくり差し替える

楽なのは後者である。前者でやろうとするとダークモードは一気に魔窟化する。

ぜひとも後者でやりたい。

設計案

Generic Pattern と Domain Pattern

まず、名前空間をあたえることにした。

Generic Pattern: 汎用性のある色

Ex: Text, Border, Strong

Class

Primary, Secondary, Tertiary

Intensity

※あくまで用法としてNormalなものをNormalとする。たとえば、黒がNormalである場合はそれ以上濃くなる場合があってもStrong, Intenseなどが表現できなくても問題ない。

Muted, Calm, Weak, (Normal), Strong, Intense, Extreme

Contrast

Reverseをつける

Opacity

Alphaをつける

Domain Pattern: 特定機能を象徴するための色

Ex: Favorite, Rate, Rank

整序性がある場合

Primary, Secondary, Tertiary

整序性がない場合

色名をつけるか、ドメイン的な意味合いをつけるか

ベンチマーク

Gestalt / Pinterest

Design tokens

Design tokens represent the values used within a design system to construct layouts and components, such as spacing and color. Because the tokens are an abstraction, the underlying value can change in different scenarios without affecting the designer or developer experience. Learn more about Design Tokens.

https://gestalt.pinterest.systems/foundations/design_tokens

Goldman Sachs

Color Tokens - Goldman Sachs Design

For every color ramp within our broader color system we have identified one value for each color to represent each emphasis - bold, subtle, or minimal. This allows for the system to maintain consistency per color while also offering some flexibility with color options based on emphasis.

https://design.gs.com/foundation/color-system/color-tokens

LINE

LINEのコンセプトは非常に体系的で柔軟に運用できる様になっている。

接頭辞の性格をフォーマット化するという意味でかなり有意義。

designsystem.line.me

https://designsystem.line.me/LDSM/foundation/color/line-semantic-colors-ex-ja

Author

Yasuhiro Yokota

1991-, Designer

大学卒業後、行政機関で情報政策部門で勤務。株式会社ワークスアプリケーションズを経た後、フリーランスでグラフィック・デジタル双方のデザイン及びディレクションを通し、様々なプロジェクトに携わる。株式会社TERASSに創業期からシリーズBまで参画した後、2022年9月にマイベスト入社。グロービス経営大学院卒業。

Web Twitter