Box Shadow


Principles

Purpose

DNA Design System memiliki Box Shadow yang memungkinkan user untuk menambahkan efek lebih dalam dari frame hampir disemua elemen. Box Shadow pada DNA Design System dapat berperan untuk memberikan bayangan pada objek serta akan membuat objek tersebut berada di atas permukaan. Box Shadow berfungsi sebagai pembuat bayangan suatu objek yang dapat bisa diatur ke arah datangnya cahaya.

Formatting

Shadow Light

Shadow light dapat digunakan pada background dan elemen yang cenderung berwarna terang dengan light 50% – 100% pada format warna Hue Saturation Light (HSL). DNA Design System menyediakan empat variant shadow yang dapat dipakai sesuai dengan kebutuhan. Dimulai dari shadow-light-1 dipakai untuk elemen yang jaraknya lebih dekat dengan background atau elemen yang ada dibawahnya, begitupun dengan shadow-light-4 yang jaraknya lebih jauh dengan background atau elemen yang ada dibawahnya.

Shadow Dark

Shadow dark dapat digunakan pada background dan elemen yang cenderung berwarna gelap dengan light 0% – 49% pada format warna Hue Saturation Light (HSL). DNA Design System menyediakan empat variant shadow yang dapat dipakai sesuai dengan kebutuhan. Dimulai dari shadow-dark-1 dipakai untuk elemen yang jaraknya lebih dekat dengan background atau elemen yang ada dibawahnya, begitupun dengan shadow-dark-4 yang jaraknya lebih jauh dengan background atau elemen yang ada dibawahnya.