Text Color

Class	Properties
tc-l-red-6	color: #efb1b1;
tc-l-red-5	color: #eb9e9e;
tc-l-red-4	color: #e78b8b;
tc-l-red-3	color: #e37777;
tc-l-red-2	color: #df6464;
tc-l-red-1	color: #db5050;
tc-red	color: #d73d3d;
tc-d-red-1	color: #c23737;
tc-d-red-2	color: #ac3131;
tc-d-red-3	color: #972b2b;
tc-d-red-4	color: #812525;
tc-d-red-5	color: #6c1f1f;
tc-d-red-6	color: #561818;
tc-l-orange-6	color: #f3c3a1;
tc-l-orange-5	color: #f0b48a;
tc-l-orange-4	color: #eca472;
tc-l-orange-3	color: #e9955b;
tc-l-orange-2	color: #e68643;
tc-l-orange-1	color: #e3772c;
tc-orange	color: #e06814;
tc-d-orange-1	color: #ca5e12;
tc-d-orange-2	color: #b35310;
tc-d-orange-3	color: #9d490e;
tc-d-orange-4	color: #863e0c;
tc-d-orange-5	color: #70340a;
tc-d-orange-6	color: #5a2a08;
tc-l-yellow-6	color: #edd99c;
tc-l-yellow-5	color: #e9d083;
tc-l-yellow-4	color: #e5c76a;
tc-l-yellow-3	color: #e0bd51;
tc-l-yellow-2	color: #dcb439;
tc-l-yellow-1	color: #d7aa20;
tc-yellow	color: #d3a107;
tc-d-yellow-1	color: #be9106;
tc-d-yellow-2	color: #a98106;
tc-d-yellow-3	color: #947105;
tc-d-yellow-4	color: #7f6104;
tc-d-yellow-5	color: #6a5104;
tc-d-yellow-6	color: #544003;
tc-l-green-6	color: #a5e0bb;
tc-l-green-5	color: #8fd8aa;
tc-l-green-4	color: #79d099;
tc-l-green-3	color: #62c888;
tc-l-green-2	color: #4cc177;
tc-l-green-1	color: #35b966;
tc-green	color: #1fb155;
tc-d-green-1	color: #1c9f4d;
tc-d-green-2	color: #198e44;
tc-d-green-3	color: #167c3c;
tc-d-green-4	color: #136a33;
tc-d-green-5	color: #10592b;
tc-d-green-6	color: #0c4722;
tc-l-teal-6	color: #a0dbd5;
tc-l-teal-5	color: #89d3ca;
tc-l-teal-4	color: #71cabf;
tc-l-teal-3	color: #59c1b5;
tc-l-teal-2	color: #41b8aa;
tc-l-teal-1	color: #2aafa0;
tc-teal	color: #12a695;
tc-d-teal-1	color: #109586;
tc-d-teal-2	color: #0e8577;
tc-d-teal-3	color: #0d7468;
tc-d-teal-4	color: #0b6459;
tc-d-teal-5	color: #09534b;
tc-d-teal-6	color: #07423c;
tc-l-cyan-6	color: #9bdbe5;
tc-l-cyan-5	color: #82d2df;
tc-l-cyan-4	color: #69c8d9;
tc-l-cyan-3	color: #50bfd2;
tc-l-cyan-2	color: #37b6cc;
tc-l-cyan-1	color: #1eadc5;
tc-cyan	color: #05a4bf;
tc-d-cyan-1	color: #0594ac;
tc-d-cyan-2	color: #048399;
tc-d-cyan-3	color: #047386;
tc-d-cyan-4	color: #036273;
tc-d-cyan-5	color: #035260;
tc-d-cyan-6	color: #02424c;
tc-l-blue-6	color: #aec8f1;
tc-l-blue-5	color: #9abaee;
tc-l-blue-4	color: #86aceb;
tc-l-blue-3	color: #729ee7;
tc-l-blue-2	color: #5d91e4;
tc-l-blue-1	color: #4983e0;
tc-blue	color: #3575dd;
tc-d-blue-1	color: #3069c7;
tc-d-blue-2	color: #2a5eb1;
tc-d-blue-3	color: #25529b;
tc-d-blue-4	color: #204685;
tc-d-blue-5	color: #1b3b6f;
tc-d-blue-6	color: #152f58;
tc-l-indigo-6	color: #bdbef0;
tc-l-indigo-5	color: #acaeec;
tc-l-indigo-4	color: #9b9de8;
tc-l-indigo-3	color: #8b8de4;
tc-l-indigo-2	color: #7a7de1;
tc-l-indigo-1	color: #6a6cdd;
tc-indigo	color: #595cd9;
tc-d-indigo-1	color: #5053c3;
tc-d-indigo-2	color: #474aae;
tc-d-indigo-3	color: #3e4098;
tc-d-indigo-4	color: #353782;
tc-d-indigo-5	color: #2d2e6d;
tc-d-indigo-6	color: #242557;
tc-l-violet-6	color: #cbbaf1;
tc-l-violet-5	color: #bea9ee;
tc-l-violet-4	color: #b198eb;
tc-l-violet-3	color: #a487e7;
tc-l-violet-2	color: #9775e4;
tc-l-violet-1	color: #8a64e0;
tc-violet	color: #7d53dd;
tc-d-violet-1	color: #714bc7;
tc-d-violet-2	color: #6442b1;
tc-d-violet-3	color: #583a9b;
tc-d-violet-4	color: #4b3285;
tc-d-violet-5	color: #3f2a6f;
tc-d-violet-6	color: #322158;
tc-l-pink-6	color: #eeb3d0;
tc-l-pink-5	color: #eaa0c5;
tc-l-pink-4	color: #e58db9;
tc-l-pink-3	color: #e17aad;
tc-l-pink-2	color: #dd67a1;
tc-l-pink-1	color: #d85496;
tc-pink	color: #d4418a;
tc-d-pink-1	color: #bf3b7c;
tc-d-pink-2	color: #aa346e;
tc-d-pink-3	color: #942e61;
tc-d-pink-4	color: #7f2753;
tc-d-pink-5	color: #6a2145;
tc-d-pink-6	color: #551a37;
tc-l-gray-6	color: #bfc2c7;
tc-l-gray-5	color: #b0b3b9;
tc-l-gray-4	color: #a0a4ab;
tc-l-gray-3	color: #90959d;
tc-l-gray-2	color: #80858f;
tc-l-gray-1	color: #707681;
tc-gray	color: #606773;
tc-d-gray-1	color: #565d68;
tc-d-gray-2	color: #4d525c;
tc-d-gray-3	color: #434851;
tc-d-gray-4	color: #3a3e45;
tc-d-gray-5	color: #30343a;
tc-d-gray-6	color: #26292e;
tc-l-lead-6	color: #b2b2b8;
tc-l-lead-5	color: #9f9fa7;
tc-l-lead-4	color: #8c8c95;
tc-l-lead-3	color: #797983;
tc-l-lead-2	color: #656571;
tc-l-lead-1	color: #525260;
tc-lead	color: #3f3f4e;
tc-d-lead-1	color: #393946;
tc-d-lead-2	color: #32323e;
tc-d-lead-3	color: #2c2c37;
tc-d-lead-4	color: #26262f;
tc-d-lead-5	color: #202027;
tc-d-lead-6	color: #19191f;
tc-l-silver-6	color: #e5e7e9;
tc-l-silver-5	color: #dfe1e3;
tc-l-silver-4	color: #d9dadd;
tc-l-silver-3	color: #d2d4d8;
tc-l-silver-2	color: #ccced2;
tc-l-silver-1	color: #c5c8cd;
tc-silver	color: #bfc2c7;
tc-d-silver-1	color: #acafb3;
tc-d-silver-2	color: #999b9f;
tc-d-silver-3	color: #86888b;
tc-d-silver-4	color: #737477;
tc-d-silver-5	color: #606164;
tc-d-silver-6	color: #4c4e50;

This example showcases various text colors: light indigo 2, indigo, and dark indigo 2. The texts will have a moderate light indigo shade, a rich indigo shade, and a deeper indigo shade, respectively.

Try writing a sentence to see the caret color.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <div class="bg-white p-4 rad-1 s-y-4">
    <p class="ta-c tc-l-indigo-4">The quick brown fox jumps over the lazy dog.</p>
    <p class="ta-c tc-indigo">The quick brown fox jumps over the lazy dog.</p>
    <p class="ta-c tc-d-indigo-2">The quick brown fox jumps over the lazy dog.</p>
  </div>
</div>

---

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

Alternatively, you can apply :hover by using h:tc-* utility to override elements and change their values when hovering over them.

<div class="tc-lead h:tc ..."></div>