Styles
Colors
Color palette with both beauty and accessibility.
1
3
5
10
20
30
40
50
60
70
80
90
95
97
99
Gray
BlueGray
Slate
ExaBlue
Red
Pink
Magenta
Purple
Violet
RoyalBlue
Blue
Cyan
Teal
Green
LightGreen
Lime
Yellow
Amber
Orange
Brown
DarkBrown
Semantic Color Tokens
Components use semantic tokens like bg-primary, text-destructive, border-border that adapt to light/dark mode.
These are set up automatically when you install the design system style.
See Theming for the full list of tokens.
Base Color Palette
By default, only semantic color tokens are included. To use the full base palette shown above, add the following color definitions to your CSS file.
Use @theme (not @theme inline) since these are direct values, not references to other variables. See Tailwind CSS documentation for details.
@theme {
--color-black: #000;
--color-white: #fff;
--color-gray-1: #fafafa;
--color-gray-3: #f0f0f0;
--color-gray-5: #e6e6e6;
--color-gray-10: #dbdbdb;
--color-gray-20: #c5c5c5;
--color-gray-30: #aeaeae;
--color-gray-40: #979797;
--color-gray-50: #808080;
--color-gray-60: #6e6e6e;
--color-gray-70: #5c5c5c;
--color-gray-80: #4a4a4a;
--color-gray-90: #383838;
--color-gray-95: #262626;
--color-gray-97: #141414;
--color-gray-99: #0a0a0a;
--color-blueGray-1: #f9fafa;
--color-blueGray-3: #eef0f1;
--color-blueGray-5: #e3e6e8;
--color-blueGray-10: #d8dbde;
--color-blueGray-20: #c0c5c9;
--color-blueGray-30: #a7aeb4;
--color-blueGray-40: #8e979f;
--color-blueGray-50: #75808a;
--color-blueGray-60: #656e77;
--color-blueGray-70: #545c63;
--color-blueGray-80: #444a50;
--color-blueGray-90: #33383d;
--color-blueGray-95: #232629;
--color-blueGray-97: #131416;
--color-blueGray-99: #090a0b;
--color-slate-1: #f9fafb;
--color-slate-3: #edeff2;
--color-slate-5: #e1e4e9;
--color-slate-10: #d4d9e0;
--color-slate-20: #b9c1cc;
--color-slate-30: #9ea9b9;
--color-slate-40: #8290a5;
--color-slate-50: #677891;
--color-slate-60: #59677d;
--color-slate-70: #4a5668;
--color-slate-80: #3c4654;
--color-slate-90: #2d3540;
--color-slate-95: #1f242c;
--color-slate-97: #101317;
--color-slate-99: #080a0c;
--color-exaBlue-1: #f6f5fd;
--color-exaBlue-3: #e3e0f8;
--color-exaBlue-5: #d0ccf4;
--color-exaBlue-10: #bdb8f0;
--color-exaBlue-20: #938ae6;
--color-exaBlue-30: #695cdc;
--color-exaBlue-40: #3e2ed2;
--color-exaBlue-50: #1400c8;
--color-exaBlue-60: #1100ac;
--color-exaBlue-70: #0e0090;
--color-exaBlue-80: #0c0074;
--color-exaBlue-90: #090058;
--color-exaBlue-95: #06003c;
--color-exaBlue-97: #030020;
--color-exaBlue-99: #020010;
--color-red-1: #fff6f5;
--color-red-3: #fee3e2;
--color-red-5: #fdd0ce;
--color-red-10: #fcbdba;
--color-red-20: #fa938e;
--color-red-30: #f96962;
--color-red-40: #f73e36;
--color-red-50: #f5140a;
--color-red-60: #d50f07;
--color-red-70: #b30b04;
--color-red-80: #930801;
--color-red-90: #700500;
--color-red-95: #4d0300;
--color-red-97: #290100;
--color-red-99: #150100;
--color-pink-1: #fff7fb;
--color-pink-3: #ffe7f2;
--color-pink-5: #ffd6ea;
--color-pink-10: #ffc6e2;
--color-pink-20: #ffa1cf;
--color-pink-30: #ff7cbc;
--color-pink-40: #ff58a9;
--color-pink-50: #ff3396;
--color-pink-60: #e42381;
--color-pink-70: #cb136b;
--color-pink-80: #ab0856;
--color-pink-90: #860042;
--color-pink-95: #5c002d;
--color-pink-97: #310018;
--color-pink-99: #18000c;
--color-magenta-1: #fef5fd;
--color-magenta-3: #fce1f9;
--color-magenta-5: #facdf5;
--color-magenta-10: #f8b9f2;
--color-magenta-20: #f48ce9;
--color-magenta-30: #ef5fe0;
--color-magenta-40: #eb32d8;
--color-magenta-50: #e605cf;
--color-magenta-60: #c703b3;
--color-magenta-70: #a80297;
--color-magenta-80: #87017a;
--color-magenta-90: #67005d;
--color-magenta-95: #470040;
--color-magenta-97: #260022;
--color-magenta-99: #120011;
--color-purple-1: #faf5fe;
--color-purple-3: #f0e1fc;
--color-purple-5: #e6cdfa;
--color-purple-10: #ddb9f8;
--color-purple-20: #c68cf4;
--color-purple-30: #b05ef0;
--color-purple-40: #9a31eb;
--color-purple-50: #8404e7;
--color-purple-60: #7202c8;
--color-purple-70: #5f01a7;
--color-purple-80: #4d0088;
--color-purple-90: #3a0068;
--color-purple-95: #280046;
--color-purple-97: #150026;
--color-purple-99: #0b0012;
--color-violet-1: #f8f5fe;
--color-violet-3: #ebe0fc;
--color-violet-5: #ddccfa;
--color-violet-10: #d0b8f9;
--color-violet-20: #b18af4;
--color-violet-30: #935cf0;
--color-violet-40: #742eec;
--color-violet-50: #5600e8;
--color-violet-60: #4a00c8;
--color-violet-70: #3e00a7;
--color-violet-80: #320087;
--color-violet-90: #260066;
--color-violet-95: #1a0046;
--color-violet-97: #0e0025;
--color-violet-99: #070013;
--color-royalBlue-1: #f6f7fe;
--color-royalBlue-3: #e4e7fc;
--color-royalBlue-5: #d2d7fa;
--color-royalBlue-10: #c0c7f8;
--color-royalBlue-20: #97a3f4;
--color-royalBlue-30: #6e80f0;
--color-royalBlue-40: #465ceb;
--color-royalBlue-50: #1d38e7;
--color-royalBlue-60: #132bcd;
--color-royalBlue-70: #0b20b1;
--color-royalBlue-80: #041793;
--color-royalBlue-90: #001073;
--color-royalBlue-95: #000a4e;
--color-royalBlue-97: #00052a;
--color-royalBlue-99: #000314;
--color-blue-1: #f6f9ff;
--color-blue-3: #e5ecfe;
--color-blue-5: #d3e0fd;
--color-blue-10: #c2d3fc;
--color-blue-20: #9bb7fa;
--color-blue-30: #739bf8;
--color-blue-40: #4c7ff6;
--color-blue-50: #2563f4;
--color-blue-60: #1852da;
--color-blue-70: #0d41be;
--color-blue-80: #05339e;
--color-blue-90: #00267b;
--color-blue-95: #001a54;
--color-blue-97: #000e2d;
--color-blue-99: #000717;
--color-cyan-1: #f5fcfe;
--color-cyan-3: #e0f6fd;
--color-cyan-5: #cceffc;
--color-cyan-10: #b8e9fb;
--color-cyan-20: #8adbf9;
--color-cyan-30: #5ccdf7;
--color-cyan-40: #2ebff4;
--color-cyan-50: #00b1f2;
--color-cyan-60: #0098d0;
--color-cyan-70: #007fae;
--color-cyan-80: #00678c;
--color-cyan-90: #004e6a;
--color-cyan-95: #003549;
--color-cyan-97: #001c27;
--color-cyan-99: #000e13;
--color-teal-1: #f5fdfd;
--color-teal-3: #e1faf8;
--color-teal-5: #cdf6f4;
--color-teal-10: #b9f2f0;
--color-teal-20: #8ceae6;
--color-teal-30: #5ee2dc;
--color-teal-40: #31dad2;
--color-teal-50: #04d2c8;
--color-teal-60: #02b6ad;
--color-teal-70: #019991;
--color-teal-80: #017c75;
--color-teal-90: #005e5a;
--color-teal-95: #00403d;
--color-teal-97: #002321;
--color-teal-99: #001110;
--color-green-1: #f5fbf5;
--color-green-3: #e2f3e2;
--color-green-5: #cfebcf;
--color-green-10: #bce3bc;
--color-green-20: #92d192;
--color-green-30: #67c067;
--color-green-40: #3cae3c;
--color-green-50: #119c11;
--color-green-60: #0b8a0b;
--color-green-70: #067606;
--color-green-80: #036203;
--color-green-90: #004c00;
--color-green-95: #003400;
--color-green-97: #001c00;
--color-green-99: #000d00;
--color-lightGreen-1: #fafdf5;
--color-lightGreen-3: #f0f8e0;
--color-lightGreen-5: #e6f3cc;
--color-lightGreen-10: #dceeb8;
--color-lightGreen-20: #c5e38a;
--color-lightGreen-30: #aed85c;
--color-lightGreen-40: #98cd2e;
--color-lightGreen-50: #81c200;
--color-lightGreen-60: #6fa700;
--color-lightGreen-70: #5d8c00;
--color-lightGreen-80: #4b7100;
--color-lightGreen-90: #395500;
--color-lightGreen-95: #273a00;
--color-lightGreen-97: #151f00;
--color-lightGreen-99: #0a1000;
--color-lime-1: #fefdf6;
--color-lime-3: #fbfae3;
--color-lime-5: #f8f6d0;
--color-lime-10: #f6f3bd;
--color-lime-20: #f0eb92;
--color-lime-30: #eae367;
--color-lime-40: #e4dc3d;
--color-lime-50: #ded412;
--color-lime-60: #c3b90b;
--color-lime-70: #a79f07;
--color-lime-80: #888203;
--color-lime-90: #6a6400;
--color-lime-95: #484500;
--color-lime-97: #272500;
--color-lime-99: #131200;
--color-yellow-1: #fffdf5;
--color-yellow-3: #fefae2;
--color-yellow-5: #fef6cf;
--color-yellow-10: #fdf3bb;
--color-yellow-20: #fceb90;
--color-yellow-30: #fbe364;
--color-yellow-40: #f9dc39;
--color-yellow-50: #f8d40d;
--color-yellow-60: #d8b808;
--color-yellow-70: #b79c04;
--color-yellow-80: #967f02;
--color-yellow-90: #736100;
--color-yellow-95: #4e4300;
--color-yellow-97: #2a2300;
--color-yellow-99: #151200;
--color-amber-1: #fffcf5;
--color-amber-3: #fef6e0;
--color-amber-5: #fef0cc;
--color-amber-10: #fdeab8;
--color-amber-20: #fcdd8a;
--color-amber-30: #fbd05c;
--color-amber-40: #fac22e;
--color-amber-50: #f9b500;
--color-amber-60: #d69c00;
--color-amber-70: #b38200;
--color-amber-80: #906900;
--color-amber-90: #6e5000;
--color-amber-95: #4b3600;
--color-amber-97: #281d00;
--color-amber-99: #140e00;
--color-orange-1: #fff9f5;
--color-orange-3: #feece0;
--color-orange-5: #fde0cc;
--color-orange-10: #fcd3b8;
--color-orange-20: #fab78a;
--color-orange-30: #f99b5c;
--color-orange-40: #f77e2e;
--color-orange-50: #f56200;
--color-orange-60: #d35400;
--color-orange-70: #b04700;
--color-orange-80: #8e3900;
--color-orange-90: #6c2b00;
--color-orange-95: #4a1d00;
--color-orange-97: #271000;
--color-orange-99: #140800;
--color-brown-1: #fbf8f5;
--color-brown-3: #f2eae2;
--color-brown-5: #eaddcf;
--color-brown-10: #e1cfbc;
--color-brown-20: #ceb091;
--color-brown-30: #bb9265;
--color-brown-40: #a8733a;
--color-brown-50: #95540f;
--color-brown-60: #83480a;
--color-brown-70: #713c05;
--color-brown-80: #5d3102;
--color-brown-90: #492500;
--color-brown-95: #321900;
--color-brown-97: #1a0d00;
--color-brown-99: #0d0700;
--color-darkBrown-1: #faf7f5;
--color-darkBrown-3: #efe7e2;
--color-darkBrown-5: #e4d7ce;
--color-darkBrown-10: #dac7bb;
--color-darkBrown-20: #c2a38f;
--color-darkBrown-30: #aa7f63;
--color-darkBrown-40: #925b37;
--color-darkBrown-50: #7a370b;
--color-darkBrown-60: #6b2f07;
--color-darkBrown-70: #5c2704;
--color-darkBrown-80: #4c1f02;
--color-darkBrown-90: #3b1700;
--color-darkBrown-95: #281000;
--color-darkBrown-97: #160900;
--color-darkBrown-99: #0b0400;
}
You can now use the colors as utility classes:
<div className="bg-exaBlue-50 text-white" />
<div className="border-slate-10" />