SmartHR Design System

影のトークンでは、要素の周りに落とす影(シャドウ)の大きさを定義します。CSSではbox-shadowやdrop-shadowを指します。

値の考え方

影の大きさや柔らかさ、拡散量によって要素間の高低差を表現できます。 例えば値の小さい影を持つ要素は、その背後にある要素と近いことを表しています。より大きく柔らかい影は、要素間の距離が離れていることを表します。 それぞれの要素に高低差の視覚効果を与えることで、インターフェース全体に以下のメリットが生まれます。 ユーザーが要素間の優先度を読み取りやすく、どの要素がインタラクティブなのかを理解しやすくします。 要素のレイヤー順序を明確に定義することで、要素同士の意図しない干渉や重なりを回避します。

1
2
4
8

プリミティブトークン

トークン名値(box-shadow)
10 1px 2px 0 rgba(0,0,0,0.24)
20 2px 4px 1px rgba(0,0,0,0.24)
40 4px 8px 2px rgba(0,0,0,0.24)
80 8px 16px 4px rgba(0,0,0,0.24)

セマンティクストークン

トークン名値(box-shadow)利用コンポーネント
S0 1px 2px 0 rgba(0,0,0,0.24)
M0 2px 4px 1px rgba(0,0,0,0.24)
L0 4px 8px 2px rgba(0,0,0,0.24)
XL0 8px 16px 4px rgba(0,0,0,0.24)

高低差とレイヤー順序は原則連動します。ここでは連動した値も提供します。

トークン名値(box-shadow)利用コンポーネント
BASE0 1px 2px 0 rgba(0,0,0,0.24)Base
FIXED_MENU0 2px 4px 1px rgba(0,0,0,0.24)BottomFixedArea, RightFixedNote
OVERLAP0 4px 8px 2px rgba(0,0,0,0.24)DialogBase
FLASH_MESSAGE0 8px 16px 4px rgba(0,0,0,0.24)
© 2021, SmartHR, Inc.