Components AI — A new way to explore generative design systems

#8e564b5.863.58

#95614f5.124.10

#9c6d534.444.73

#a279573.885.41

#a7865c3.386.21

#ab93642.967.09

#af9f6c2.638.00

#b3ab742.338.99

#b8b77d2.0810.11

#b5c5961.8411.39

#b9d0ac1.6612.68

Accessible combinations

Color Scale

Canvas

First

Second

Scale Mode

Padding Left

Padding Right

Steps

Css Variables

root: {
--color-0: #8e564b;
--color-1: #95614f;
--color-2: #9c6d53;
--color-3: #a27957;
--color-4: #a7865c;
--color-5: #ab9364;
--color-6: #af9f6c;
--color-7: #b3ab74;
--color-8: #b8b77d;
--color-9: #b5c596;
--color-10: #b9d0ac;

}

Js

{
"colors": [
"#8e564b",
"#95614f",
"#9c6d53",
"#a27957",
"#a7865c",
"#ab9364",
"#af9f6c",
"#b3ab74",
"#b8b77d",
"#b5c596",
"#b9d0ac",

],
}

Accessible combinations

Color Scale

.css-80vkzx{font-size:.75rem;}Css Variables

Js

Css Variables