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.

globals.css
@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" />

On this page