<div class="grid grid-cols-[repeat(auto-fit,minmax(8rem,1fr))] gap-x-2 gap-y-8 sm:grid-cols-1 p-4">
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">EP - brand</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#F3F9FC"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#F3F9FC</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#E5F3F9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#E5F3F9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#B8E1EE"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#B8E1EE</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#93D4E6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#93D4E6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#5ABDD6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#5ABDD6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#34A5C3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#34A5C3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#2486A5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#2486A5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1F6B85"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1F6B85</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1D5A6F"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1D5A6F</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1D4C5D"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1D4C5D</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#13313E"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#13313E</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">EP - neutral</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f8f8f8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">25</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f8f8f8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f4f4f4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f4f4f4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#dcdcdc"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#dcdcdc</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#c9c9c9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#c9c9c9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#b8b8b8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#b8b8b8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#aaaaaa"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#aaaaaa</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#9e9e9e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#9e9e9e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#6e6e6e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#6e6e6e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#5c5c5c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#5c5c5c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4d4d4d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4d4d4d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#424242"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#424242</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#292929"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#292929</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#141414"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">975</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#141414</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ffffff00"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">transparent</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ffffff00</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ffffff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">white</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ffffff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#000000"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">black</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#000000</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">EP - Pure Skincare</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#BFD7F2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">moisturizer</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#BFD7F2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#BFD7F2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">hydratant</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#BFD7F2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#64A8D8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">hydratant-pur</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#64A8D8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#CFE6EB"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">cleanser</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#CFE6EB</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">EP - Sign of aging</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#E4DAE7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">base</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#E4DAE7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#795E88"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">retinol</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#795E88</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#947EA0"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">retinol-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#947EA0</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#9986A2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">peptide4</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#9986A2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#AD9EB5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">peptide4-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#AD9EB5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#9B7F9F"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">acide-hyal</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#9B7F9F</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#AF99B2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">acide-hyal-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#AF99B2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#A79AC2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">bakuchiol</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#A79AC2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#B9AECE"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">bakuchiol-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#B9AECE</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#E4DAE7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">vitamine-c</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#E4DAE7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#E9E1EC"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">vitamine-c-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#E9E1EC</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#CFC6CA"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">resveratrol</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#CFC6CA</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#D9D1D5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">resveratrol-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#D9D1D5</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">EP - Hypersensivity & Urban Stress</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#B65B6F"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">base</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#B65B6F</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#B65B6F"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">enoxolone</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#B65B6F</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#C57C8C"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">enoxolone-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#C57C8C</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">EP - Loss of Radiance & Hyperpigmentation</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#EEC9AC"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">base</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#EEC9AC</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#EDC9C0"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">acide-glycolique</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#EDC9C0</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#F1D4CD"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">acide-glycolique-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#F1D4CD</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#F2B79F"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">niacinamide</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#F2B79F</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#F5C5B2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">niacinamide-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#F5C5B2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#EEC9AC"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">glabridine</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#EEC9AC</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#F1D4BD"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">glabridine-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#F1D4BD</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#E4A595"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">acide-citrique</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#E4A595</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#E9B7AA"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">acide-citrique-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#E9B7AA</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">EP - Dryness & Urban Stress</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#C1D4D8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">base</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#C1D4D8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4C849B"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">panthenol</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4C849B</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#709DAF"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">panthenol-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#709DAF</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#99D2DD"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">aloe-vera</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#99D2DD</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ADDBE4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">aloe-vera-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ADDBE4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#C1D4D8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">vitamine-e</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#C1D4D8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#CDDDE0"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">vitamine-e-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#CDDDE0</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">EP - Pimples & Blemishes</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#D6E3B6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">base</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#D6E3B6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#70A08A"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">acide-salicylique</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#70A08A</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#8DB3A1"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">acide-salicylique-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#8DB3A1</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#81B079"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">propolis</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#81B079</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#9AC094"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">propolis-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#9AC094</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#D6E3B6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">zinc-gluconate</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#D6E3B6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#DEE9C5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">zinc-gluconate-alt</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#DEE9C5</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">NAOS - feature</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ffcc00"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">default</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ffcc00</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">EP - success</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#E8FAEF"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">very-light</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#E8FAEF</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#6BF3A2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">light</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#6BF3A2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#23CE67"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">default</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#23CE67</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1D9F51"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">dark</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1D9F51</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#15502D"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">very-dark</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#15502D</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">EP - error</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#F8E8E8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">very-light</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#F8E8E8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#F5A8A8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">light</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#F5A8A8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#D52B2A"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">default</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#D52B2A</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#AA2222"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">dark</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#AA2222</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#801A19"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">very-dark</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#801A19</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">EP - warning</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FFF8ED"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">very-light</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FFF8ED</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FCCE7D"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">light</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FCCE7D</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#F9A000"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">default</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#F9A000</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#A36800"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">dark</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#A36800</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#61430D"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">very-dark</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#61430D</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">EP - info</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#E5F3F9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">very-light</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#E5F3F9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#93D4E6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">light</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#93D4E6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#B8E1EE"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">default</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#B8E1EE</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#34A5C3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">dark</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#34A5C3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#2486A5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">very-dark</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#2486A5</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">slate</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f8fafc"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f8fafc</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f1f5f9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f1f5f9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e2e8f0"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e2e8f0</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#cbd5e1"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#cbd5e1</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#94a3b8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#94a3b8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#64748b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#64748b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#475569"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#475569</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#334155"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#334155</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1e293b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1e293b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0f172a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0f172a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#020617"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#020617</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">gray</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f9fafb"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f9fafb</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f3f4f6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f3f4f6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e5e7eb"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e5e7eb</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d1d5db"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d1d5db</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#9ca3af"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#9ca3af</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#6b7280"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#6b7280</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4b5563"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4b5563</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#374151"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#374151</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1f2937"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1f2937</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#111827"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#111827</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#030712"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#030712</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">zinc</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fafafa"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fafafa</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f4f4f5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f4f4f5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e4e4e7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e4e4e7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d4d4d8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d4d4d8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a1a1aa"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a1a1aa</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#71717a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#71717a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#52525b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#52525b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#3f3f46"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#3f3f46</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#27272a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#27272a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#18181b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#18181b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#09090b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#09090b</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">stone</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fafaf9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fafaf9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f5f5f4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f5f5f4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e7e5e4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e7e5e4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d6d3d1"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d6d3d1</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a8a29e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a8a29e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#78716c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#78716c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#57534e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#57534e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#44403c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#44403c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#292524"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#292524</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1c1917"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1c1917</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0c0a09"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0c0a09</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">red</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fef2f2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fef2f2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fee2e2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fee2e2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fecaca"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fecaca</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fca5a5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fca5a5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f87171"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f87171</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ef4444"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ef4444</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#dc2626"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#dc2626</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#b91c1c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#b91c1c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#991b1b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#991b1b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#7f1d1d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#7f1d1d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#450a0a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#450a0a</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">orange</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fff7ed"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fff7ed</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ffedd5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ffedd5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fed7aa"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fed7aa</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fdba74"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fdba74</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fb923c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fb923c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f97316"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f97316</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ea580c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ea580c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#c2410c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#c2410c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#9a3412"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#9a3412</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#7c2d12"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#7c2d12</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#431407"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#431407</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">amber</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fffbeb"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fffbeb</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fef3c7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fef3c7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fde68a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fde68a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fcd34d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fcd34d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fbbf24"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fbbf24</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f59e0b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f59e0b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d97706"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d97706</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#b45309"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#b45309</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#92400e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#92400e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#78350f"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#78350f</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#451a03"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#451a03</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">yellow</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fefce8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fefce8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fef9c3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fef9c3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fef08a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fef08a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fde047"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fde047</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#facc15"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#facc15</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#eab308"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#eab308</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ca8a04"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ca8a04</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a16207"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a16207</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#854d0e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#854d0e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#713f12"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#713f12</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#422006"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#422006</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">lime</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f7fee7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f7fee7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ecfccb"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ecfccb</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d9f99d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d9f99d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#bef264"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#bef264</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a3e635"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a3e635</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#84cc16"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#84cc16</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#65a30d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#65a30d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4d7c0f"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4d7c0f</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#3f6212"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#3f6212</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#365314"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#365314</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1a2e05"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1a2e05</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">green</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f0fdf4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f0fdf4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#dcfce7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#dcfce7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#bbf7d0"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#bbf7d0</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#86efac"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#86efac</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4ade80"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4ade80</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#22c55e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#22c55e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#16a34a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#16a34a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#15803d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#15803d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#166534"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#166534</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#14532d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#14532d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#052e16"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#052e16</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">emerald</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ecfdf5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ecfdf5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d1fae5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d1fae5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a7f3d0"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a7f3d0</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#6ee7b7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#6ee7b7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#34d399"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#34d399</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#10b981"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#10b981</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#059669"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#059669</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#047857"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#047857</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#065f46"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#065f46</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#064e3b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#064e3b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#022c22"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#022c22</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">teal</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f0fdfa"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f0fdfa</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ccfbf1"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ccfbf1</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#99f6e4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#99f6e4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#5eead4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#5eead4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#2dd4bf"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#2dd4bf</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#14b8a6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#14b8a6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0d9488"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0d9488</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0f766e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0f766e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#115e59"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#115e59</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#134e4a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#134e4a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#042f2e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#042f2e</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">cyan</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ecfeff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ecfeff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#cffafe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#cffafe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a5f3fc"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a5f3fc</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#67e8f9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#67e8f9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#22d3ee"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#22d3ee</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#06b6d4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#06b6d4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0891b2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0891b2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0e7490"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0e7490</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#155e75"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#155e75</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#164e63"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#164e63</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#083344"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#083344</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">sky</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f0f9ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f0f9ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e0f2fe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e0f2fe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#bae6fd"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#bae6fd</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#7dd3fc"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#7dd3fc</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#38bdf8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#38bdf8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0ea5e9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0ea5e9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0284c7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0284c7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0369a1"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0369a1</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#075985"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#075985</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0c4a6e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0c4a6e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#082f49"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#082f49</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">blue</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#eff6ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#eff6ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#dbeafe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#dbeafe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#bfdbfe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#bfdbfe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#93c5fd"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#93c5fd</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#60a5fa"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#60a5fa</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#3b82f6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#3b82f6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#2563eb"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#2563eb</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1d4ed8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1d4ed8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1e40af"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1e40af</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1e3a8a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1e3a8a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#172554"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#172554</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">indigo</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#eef2ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#eef2ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e0e7ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e0e7ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#c7d2fe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#c7d2fe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a5b4fc"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a5b4fc</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#818cf8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#818cf8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#6366f1"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#6366f1</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4f46e5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4f46e5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4338ca"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4338ca</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#3730a3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#3730a3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#312e81"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#312e81</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1e1b4b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1e1b4b</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">violet</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f5f3ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f5f3ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ede9fe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ede9fe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ddd6fe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ddd6fe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#c4b5fd"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#c4b5fd</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a78bfa"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a78bfa</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#8b5cf6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#8b5cf6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#7c3aed"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#7c3aed</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#6d28d9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#6d28d9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#5b21b6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#5b21b6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4c1d95"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4c1d95</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#2e1065"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#2e1065</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">purple</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#faf5ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#faf5ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f3e8ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f3e8ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e9d5ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e9d5ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d8b4fe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d8b4fe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#c084fc"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#c084fc</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a855f7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a855f7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#9333ea"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#9333ea</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#7e22ce"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#7e22ce</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#6b21a8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#6b21a8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#581c87"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#581c87</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#3b0764"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#3b0764</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">fuchsia</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fdf4ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fdf4ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fae8ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fae8ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f5d0fe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f5d0fe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f0abfc"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f0abfc</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e879f9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e879f9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d946ef"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d946ef</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#c026d3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#c026d3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a21caf"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a21caf</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#86198f"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#86198f</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#701a75"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#701a75</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4a044e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4a044e</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">pink</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fdf2f8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fdf2f8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fce7f3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fce7f3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fbcfe8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fbcfe8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f9a8d4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f9a8d4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f472b6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f472b6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ec4899"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ec4899</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#db2777"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#db2777</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#be185d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#be185d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#9d174d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#9d174d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#831843"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#831843</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#500724"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#500724</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">rose</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fff1f2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fff1f2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ffe4e6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ffe4e6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fecdd3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fecdd3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fda4af"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fda4af</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fb7185"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fb7185</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f43f5e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f43f5e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e11d48"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e11d48</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#be123c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#be123c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#9f1239"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#9f1239</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#881337"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#881337</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4c0519"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4c0519</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">status</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#BFDBFE"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">focus</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#BFDBFE</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#A7F3D0"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">success</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#A7F3D0</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FDE68A"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">warning</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FDE68A</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FECACA"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">error</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FECACA</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-[repeat(auto-fit,minmax(8rem,1fr))] gap-x-2 gap-y-8 sm:grid-cols-1 p-4">
{% for colorName, color in colors %}
<div class="2xl:contents">
<div class="text-sm-plus font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">{{ colorName }}</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
{% for variant, hex in color %}
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:{{ hex }}"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">{{ variant }}</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">{{ hex }}</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{
"colors": {
"EP - brand": {
"50": "#F3F9FC",
"100": "#E5F3F9",
"200": "#B8E1EE",
"300": "#93D4E6",
"400": "#5ABDD6",
"500": "#34A5C3",
"600": "#2486A5",
"700": "#1F6B85",
"800": "#1D5A6F",
"900": "#1D4C5D",
"950": "#13313E"
},
"EP - neutral": {
"25": "#f8f8f8",
"50": "#f4f4f4",
"100": "#dcdcdc",
"200": "#c9c9c9",
"300": "#b8b8b8",
"400": "#aaaaaa",
"500": "#9e9e9e",
"600": "#6e6e6e",
"700": "#5c5c5c",
"800": "#4d4d4d",
"900": "#424242",
"950": "#292929",
"975": "#141414",
"transparent": "#ffffff00",
"white": "#ffffff",
"black": "#000000"
},
"EP - Pure Skincare": {
"moisturizer": "#BFD7F2",
"hydratant": "#BFD7F2",
"hydratant-pur": "#64A8D8",
"cleanser": "#CFE6EB"
},
"EP - Sign of aging": {
"base": "#E4DAE7",
"retinol": "#795E88",
"retinol-alt": "#947EA0",
"peptide4": "#9986A2",
"peptide4-alt": "#AD9EB5",
"acide-hyal": "#9B7F9F",
"acide-hyal-alt": "#AF99B2",
"bakuchiol": "#A79AC2",
"bakuchiol-alt": "#B9AECE",
"vitamine-c": "#E4DAE7",
"vitamine-c-alt": "#E9E1EC",
"resveratrol": "#CFC6CA",
"resveratrol-alt": "#D9D1D5"
},
"EP - Hypersensivity & Urban Stress": {
"base": "#B65B6F",
"enoxolone": "#B65B6F",
"enoxolone-alt": "#C57C8C"
},
"EP - Loss of Radiance & Hyperpigmentation": {
"base": "#EEC9AC",
"acide-glycolique": "#EDC9C0",
"acide-glycolique-alt": "#F1D4CD",
"niacinamide": "#F2B79F",
"niacinamide-alt": "#F5C5B2",
"glabridine": "#EEC9AC",
"glabridine-alt": "#F1D4BD",
"acide-citrique": "#E4A595",
"acide-citrique-alt": "#E9B7AA"
},
"EP - Dryness & Urban Stress": {
"base": "#C1D4D8",
"panthenol": "#4C849B",
"panthenol-alt": "#709DAF",
"aloe-vera": "#99D2DD",
"aloe-vera-alt": "#ADDBE4",
"vitamine-e": "#C1D4D8",
"vitamine-e-alt": "#CDDDE0"
},
"EP - Pimples & Blemishes": {
"base": "#D6E3B6",
"acide-salicylique": "#70A08A",
"acide-salicylique-alt": "#8DB3A1",
"propolis": "#81B079",
"propolis-alt": "#9AC094",
"zinc-gluconate": "#D6E3B6",
"zinc-gluconate-alt": "#DEE9C5"
},
"NAOS - feature": {
"default": "#ffcc00"
},
"EP - success": {
"very-light": "#E8FAEF",
"light": "#6BF3A2",
"default": "#23CE67",
"dark": "#1D9F51",
"very-dark": "#15502D"
},
"EP - error": {
"very-light": "#F8E8E8",
"light": "#F5A8A8",
"default": "#D52B2A",
"dark": "#AA2222",
"very-dark": "#801A19"
},
"EP - warning": {
"very-light": "#FFF8ED",
"light": "#FCCE7D",
"default": "#F9A000",
"dark": "#A36800",
"very-dark": "#61430D"
},
"EP - info": {
"very-light": "#E5F3F9",
"light": "#93D4E6",
"default": "#B8E1EE",
"dark": "#34A5C3",
"very-dark": "#2486A5"
},
"slate": {
"50": "#f8fafc",
"100": "#f1f5f9",
"200": "#e2e8f0",
"300": "#cbd5e1",
"400": "#94a3b8",
"500": "#64748b",
"600": "#475569",
"700": "#334155",
"800": "#1e293b",
"900": "#0f172a",
"950": "#020617"
},
"gray": {
"50": "#f9fafb",
"100": "#f3f4f6",
"200": "#e5e7eb",
"300": "#d1d5db",
"400": "#9ca3af",
"500": "#6b7280",
"600": "#4b5563",
"700": "#374151",
"800": "#1f2937",
"900": "#111827",
"950": "#030712"
},
"zinc": {
"50": "#fafafa",
"100": "#f4f4f5",
"200": "#e4e4e7",
"300": "#d4d4d8",
"400": "#a1a1aa",
"500": "#71717a",
"600": "#52525b",
"700": "#3f3f46",
"800": "#27272a",
"900": "#18181b",
"950": "#09090b"
},
"stone": {
"50": "#fafaf9",
"100": "#f5f5f4",
"200": "#e7e5e4",
"300": "#d6d3d1",
"400": "#a8a29e",
"500": "#78716c",
"600": "#57534e",
"700": "#44403c",
"800": "#292524",
"900": "#1c1917",
"950": "#0c0a09"
},
"red": {
"50": "#fef2f2",
"100": "#fee2e2",
"200": "#fecaca",
"300": "#fca5a5",
"400": "#f87171",
"500": "#ef4444",
"600": "#dc2626",
"700": "#b91c1c",
"800": "#991b1b",
"900": "#7f1d1d",
"950": "#450a0a"
},
"orange": {
"50": "#fff7ed",
"100": "#ffedd5",
"200": "#fed7aa",
"300": "#fdba74",
"400": "#fb923c",
"500": "#f97316",
"600": "#ea580c",
"700": "#c2410c",
"800": "#9a3412",
"900": "#7c2d12",
"950": "#431407"
},
"amber": {
"50": "#fffbeb",
"100": "#fef3c7",
"200": "#fde68a",
"300": "#fcd34d",
"400": "#fbbf24",
"500": "#f59e0b",
"600": "#d97706",
"700": "#b45309",
"800": "#92400e",
"900": "#78350f",
"950": "#451a03"
},
"yellow": {
"50": "#fefce8",
"100": "#fef9c3",
"200": "#fef08a",
"300": "#fde047",
"400": "#facc15",
"500": "#eab308",
"600": "#ca8a04",
"700": "#a16207",
"800": "#854d0e",
"900": "#713f12",
"950": "#422006"
},
"lime": {
"50": "#f7fee7",
"100": "#ecfccb",
"200": "#d9f99d",
"300": "#bef264",
"400": "#a3e635",
"500": "#84cc16",
"600": "#65a30d",
"700": "#4d7c0f",
"800": "#3f6212",
"900": "#365314",
"950": "#1a2e05"
},
"green": {
"50": "#f0fdf4",
"100": "#dcfce7",
"200": "#bbf7d0",
"300": "#86efac",
"400": "#4ade80",
"500": "#22c55e",
"600": "#16a34a",
"700": "#15803d",
"800": "#166534",
"900": "#14532d",
"950": "#052e16"
},
"emerald": {
"50": "#ecfdf5",
"100": "#d1fae5",
"200": "#a7f3d0",
"300": "#6ee7b7",
"400": "#34d399",
"500": "#10b981",
"600": "#059669",
"700": "#047857",
"800": "#065f46",
"900": "#064e3b",
"950": "#022c22"
},
"teal": {
"50": "#f0fdfa",
"100": "#ccfbf1",
"200": "#99f6e4",
"300": "#5eead4",
"400": "#2dd4bf",
"500": "#14b8a6",
"600": "#0d9488",
"700": "#0f766e",
"800": "#115e59",
"900": "#134e4a",
"950": "#042f2e"
},
"cyan": {
"50": "#ecfeff",
"100": "#cffafe",
"200": "#a5f3fc",
"300": "#67e8f9",
"400": "#22d3ee",
"500": "#06b6d4",
"600": "#0891b2",
"700": "#0e7490",
"800": "#155e75",
"900": "#164e63",
"950": "#083344"
},
"sky": {
"50": "#f0f9ff",
"100": "#e0f2fe",
"200": "#bae6fd",
"300": "#7dd3fc",
"400": "#38bdf8",
"500": "#0ea5e9",
"600": "#0284c7",
"700": "#0369a1",
"800": "#075985",
"900": "#0c4a6e",
"950": "#082f49"
},
"blue": {
"50": "#eff6ff",
"100": "#dbeafe",
"200": "#bfdbfe",
"300": "#93c5fd",
"400": "#60a5fa",
"500": "#3b82f6",
"600": "#2563eb",
"700": "#1d4ed8",
"800": "#1e40af",
"900": "#1e3a8a",
"950": "#172554"
},
"indigo": {
"50": "#eef2ff",
"100": "#e0e7ff",
"200": "#c7d2fe",
"300": "#a5b4fc",
"400": "#818cf8",
"500": "#6366f1",
"600": "#4f46e5",
"700": "#4338ca",
"800": "#3730a3",
"900": "#312e81",
"950": "#1e1b4b"
},
"violet": {
"50": "#f5f3ff",
"100": "#ede9fe",
"200": "#ddd6fe",
"300": "#c4b5fd",
"400": "#a78bfa",
"500": "#8b5cf6",
"600": "#7c3aed",
"700": "#6d28d9",
"800": "#5b21b6",
"900": "#4c1d95",
"950": "#2e1065"
},
"purple": {
"50": "#faf5ff",
"100": "#f3e8ff",
"200": "#e9d5ff",
"300": "#d8b4fe",
"400": "#c084fc",
"500": "#a855f7",
"600": "#9333ea",
"700": "#7e22ce",
"800": "#6b21a8",
"900": "#581c87",
"950": "#3b0764"
},
"fuchsia": {
"50": "#fdf4ff",
"100": "#fae8ff",
"200": "#f5d0fe",
"300": "#f0abfc",
"400": "#e879f9",
"500": "#d946ef",
"600": "#c026d3",
"700": "#a21caf",
"800": "#86198f",
"900": "#701a75",
"950": "#4a044e"
},
"pink": {
"50": "#fdf2f8",
"100": "#fce7f3",
"200": "#fbcfe8",
"300": "#f9a8d4",
"400": "#f472b6",
"500": "#ec4899",
"600": "#db2777",
"700": "#be185d",
"800": "#9d174d",
"900": "#831843",
"950": "#500724"
},
"rose": {
"50": "#fff1f2",
"100": "#ffe4e6",
"200": "#fecdd3",
"300": "#fda4af",
"400": "#fb7185",
"500": "#f43f5e",
"600": "#e11d48",
"700": "#be123c",
"800": "#9f1239",
"900": "#881337",
"950": "#4c0519"
},
"status": {
"focus": "#BFDBFE",
"success": "#A7F3D0",
"warning": "#FDE68A",
"error": "#FECACA"
}
}
}
No notes defined.