Aqua Basis
Aqua DS extends its core palette with additional shades, offering more flexibility to create depth, hierarchy, and variety in your designs.
<aside>
--color-lime-5
--color-lime-40
--color-lime-80
--color-lime-10
--color-lime-50
--color-lime-90
--color-lime-20
--color-lime-60
--color-lime-30
--color-lime-70
</aside>
<aside>
--color-green-5
--color-green-40
--color-green-80
</aside>
<aside>
</aside>
<aside>
</aside>
<aside>
</aside>
<aside>
</aside>
<aside>
</aside>
<aside>
</aside>
<aside>
</aside>
<aside>
</aside>
:root {
/* Lime */
--color-lime-5: #eefee7;
--color-lime-10: #d5f7c1;
--color-lime-20: #ace089;
--color-lime-30: #8dc75f;
--color-lime-40: #61a824;
--color-lime-50: #427d07;
--color-lime-60: #325c00;
--color-lime-70: #2a4a00;
--color-lime-80: #192b00;
--color-lime-90: #101900;
/* Green */
--color-green-5: #eefbf4;
--color-green-10: #c7f0d7;
--color-green-20: #96deb2;
--color-green-30: #67c98c;
--color-green-40: #24a852;
--color-green-50: #058531;
--color-green-60: #006120;
--color-green-70: #004a18;
--color-green-80: #002b0d;
--color-green-90: #001b07;
/* Teal */
--color-teal-5: #e8fbfc;
--color-teal-10: #bef0f4;
--color-teal-20: #87dee3;
--color-teal-30: #52c6cc;
--color-teal-40: #0ca6ab;
--color-teal-50: #00827d;
--color-teal-60: #005958;
--color-teal-70: #004543;
--color-teal-80: #002928;
--color-teal-90: #001a18;
/* Cyan */
--color-cyan-5: #ebf9ff;
--color-cyan-10: #c2e9ff;
--color-cyan-20: #8ad4ff;
--color-cyan-30: #5abefc;
--color-cyan-40: #119aeb;
--color-cyan-50: #0a77ba;
--color-cyan-60: #06527a;
--color-cyan-70: #063e59;
--color-cyan-80: #052533;
--color-cyan-90: #05161f;
/* Blue */
--color-blue-5: #f0f7ff;
--color-blue-10: #d1e3ff;
--color-blue-20: #9ec5ff;
--color-blue-30: #7ba9fe;
--color-blue-40: #467df7;
--color-blue-50: #0a5bfc;
--color-blue-60: #0442ab;
--color-blue-70: #023075;
--color-blue-80: #03204a;
--color-blue-90: #03152b;
/* Purple */
--color-purple-5: #fceefc;
--color-purple-10: #f7c6f7;
--color-purple-20: #e698f5;
--color-purple-30: #cb80f2;
--color-purple-40: #a751e0;
--color-purple-50: #892cd1;
--color-purple-60: #5c1899;
--color-purple-70: #400c73;
--color-purple-80: #29074f;
--color-purple-90: #16042a;
/* Rose */
--color-rose-5: #fceef7;
--color-rose-10: #ffcce4;
--color-rose-20: #ff93c6;
--color-rose-30: #fb74a7;
--color-rose-40: #db4884;
--color-rose-50: #bf2367;
--color-rose-60: #8e154f;
--color-rose-70: #630e39;
--color-rose-80: #420a28;
--color-rose-90: #220716;
/* Red */
--color-red-5: #fff0f1;
--color-red-10: #ffd1d1;
--color-red-20: #ffa3a5;
--color-red-30: #f87c7e;
--color-red-40: #e44e51;
--color-red-50: #c7242b;
--color-red-60: #94101b;
--color-red-70: #690713;
--color-red-80: #45040e;
--color-red-90: #260309;
/* Orange */
--color-orange-5: #fff8e6;
--color-orange-10: #ffe9c7;
--color-orange-20: #ffc88a;
--color-orange-30: #ffa352;
--color-orange-40: #ec7a22;
--color-orange-50: #bc550b;
--color-orange-60: #8a3900;
--color-orange-70: #612500;
--color-orange-80: #3e1600;
--color-orange-90: #240c00;
/* Yellow */
--color-yellow-5: #fffde6;
--color-yellow-10: #fff5c2;
--color-yellow-20: #ffe180;
--color-yellow-30: #f2c840;
--color-yellow-40: #dba70a;
--color-yellow-50: #a37600;
--color-yellow-60: #755100;
--color-yellow-70: #523800;
--color-yellow-80: #332200;
--color-yellow-90: #1f1300;
}