Border Color

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

This example showcases various border colors using the indigo color palette:

• The bc-l-indigo-4 utility applies a lighter indigo shade.
• The bc-indigo utility applies the base indigo shade.
• The bc-d-indigo-2 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 b-s bc-l-indigo-4 dim-16 rad-1"></div>
  <div class="b-2 b-s bc-indigo dim-16 rad-1"></div>
  <div class="b-2 b-s bc-d-indigo-2 dim-16 rad-1"></div>
</div>

Border Bottom Color

Controls the color of the bottom border of an element.

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

This example showcases various border bottom colors using the indigo color palette:

• The bc-l-indigo-4 utility applies a lighter indigo shade.
• The bc-indigo utility applies the base indigo shade.
• The bc-d-indigo-2 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 b-s bc-b-l-indigo-4 dim-16 rad-1"></div>
  <div class="b-2 b-s bc-b-indigo dim-16 rad-1"></div>
  <div class="b-2 b-s bc-b-d-indigo-2 dim-16 rad-1"></div>
</div>

Border Left Color

Controls the color of the left border of an element.

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

This example showcases various border left colors using the indigo color palette:

• The bc-l-indigo-4 utility applies a lighter indigo shade.
• The bc-indigo utility applies the base indigo shade.
• The bc-d-indigo-2 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 b-s bc-l-l-indigo-4 dim-16 rad-1"></div>
  <div class="b-2 b-s bc-l-indigo dim-16 rad-1"></div>
  <div class="b-2 b-s bc-l-d-indigo-2 dim-16 rad-1"></div>
</div>

Border Right Color

Controls the color of the right border of an element.

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

This example showcases various border right colors using the indigo color palette:

• The bc-l-indigo-4 utility applies a lighter indigo shade.
• The bc-indigo utility applies the base indigo shade.
• The bc-d-indigo-2 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 b-s bc-r-l-indigo-4 dim-16 rad-1"></div>
  <div class="b-2 b-s bc-r-indigo dim-16 rad-1"></div>
  <div class="b-2 b-s bc-r-d-indigo-2 dim-16 rad-1"></div>
</div>

Border Top Color

Controls the color of the top border of an element.

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

This example showcases various border top colors using the indigo color palette:

• The bc-l-indigo-4 utility applies a lighter indigo shade.
• The bc-indigo utility applies the base indigo shade.
• The bc-d-indigo-2 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 b-s bc-t-l-indigo-4 dim-16 rad-1"></div>
  <div class="b-2 b-s bc-t-indigo dim-16 rad-1"></div>
  <div class="b-2 b-s bc-t-d-indigo-2 dim-16 rad-1"></div>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Hover modifiers

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

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