深さには明るさ

カードなどを使う場合に背景の色を暗くしますが、この方法はすでに有名なデザイン言語に私たちは従うことにします。
現実世界の太陽や照明などの光源は上にあるものとして、上にあるものほど明るくなり、背景は暗くすることで情報の重ね順を表現します。

カードの使い方を間違えると下図左のようになり、これでは地面が凹んで見えて、地面の上にカードが重なっているように見せるには下図右のシャドウの付け方が正しいと言えます。 背景色とカードの色

このようにカードのほうが明るく、背景が比較的暗くなると自然に見えます。 背景色とカードの色

ライトモードの場合、10レベルあるグレーのうち、原則1番目もしくは2番目に明るいグレーを背景色として使うことにします。
背景色とカードの色

ダークモードの場合も基本的な考え方は同じで上にあるものが明るくなります。
しかし背景となる色が完全な黒であればカードのシャドウが見えなくなるので、10レベルあるグレーのうち一番暗い色を選び階層を感じられやすい配色にしています。 背景色とカードの色