Color Tokens

Migration

Old scss variables will still be available but we will drop support in the next major release.

We encourage you to replace usage of kotti colors with kotti color tokens.

List of tokens

This list is automatically generated so you can consider it a source of truth.

CSS custom properties generated

Again, these are automatically generated so it can be considered source of truth.

/* Base colors */

	--black: #000;
	--white: #FFF;
	--blue-05: #F3F8FF;
	--blue-10: #E7F0FF;
	--blue-20: #C7DAF9;
	--blue-30: #99BDF7;
	--blue-40: #689CF1;
	--blue-50: #3173DE;
	--blue-60: #2E65BF;
	--blue-70: #2757A6;
	--blue-80: #1A4488;
	--blue-90: #0F2F62;
	--gray-05: #F8F8F8;
	--gray-10: #F3F3F3;
	--gray-20: #E3E3E3;
	--gray-30: #BABABA;
	--gray-40: #9D9D9D;
	--gray-50: #848484;
	--gray-60: #696969;
	--gray-70: #4F4F4F;
	--gray-80: #3A3A3A;
	--gray-90: #282828;
	--green-05: #E5FFE1;
	--green-10: #CBFCC5;
	--green-20: #A2F298;
	--green-30: #7BE46E;
	--green-40: #58C74A;
	--green-50: #40B032;
	--green-60: #359928;
	--green-70: #217B15;
	--green-80: #19670F;
	--green-90: #105008;
	--mint-05: #E5FAF5;
	--mint-10: #C7FDF1;
	--mint-20: #83FAE2;
	--mint-30: #40F5D4;
	--mint-40: #25E9CC;
	--mint-50: #01CBB1;
	--mint-60: #00A491;
	--mint-70: #038275;
	--mint-80: #08675F;
	--mint-90: #0C554E;
	--orange-05: #FFF7ED;
	--orange-10: #FFEED4;
	--orange-20: #FFD9A8;
	--orange-30: #FFBD71;
	--orange-40: #FF9333;
	--orange-50: #FE7711;
	--orange-60: #EF5C07;
	--orange-70: #C64308;
	--orange-80: #9D360F;
	--orange-90: #7E2E10;
	--primary-05: #F3F8FF;
	--primary-10: #E7F0FF;
	--primary-20: #C7DAF9;
	--primary-30: #99BDF7;
	--primary-40: #689CF1;
	--primary-50: #3173DE;
	--primary-60: #2E65BF;
	--primary-70: #2757A6;
	--primary-80: #1A4488;
	--primary-90: #0F2F62;
	--purple-05: #FAF6FD;
	--purple-10: #F4ECFB;
	--purple-20: #E9D9F5;
	--purple-30: #D8BAED;
	--purple-40: #C291E1;
	--purple-50: #A766CF;
	--purple-60: #8443A8;
	--purple-70: #753893;
	--purple-80: #613078;
	--purple-90: #532B64;
	--red-05: #FEF2F2;
	--red-10: #FFE1E1;
	--red-20: #FFC8C8;
	--red-30: #FFA2A2;
	--red-40: #FC6D6D;
	--red-50: #F53E3E;
	--red-60: #E22020;
	--red-70: #BF1717;
	--red-80: #9D1717;
	--red-90: #821A1A;
	--slate-05: #F6F6F9;
	--slate-10: #EDEDF1;
	--slate-20: #D6D6E1;
	--slate-30: #B2B3C7;
	--slate-40: #898CA7;
	--slate-50: #6A6D8D;
	--slate-60: #555674;
	--slate-70: #46485E;
	--slate-80: #3C3D50;
	--slate-90: #353545;
	--violet-05: #FCF3F9;
	--violet-10: #F9EAF4;
	--violet-20: #F5D5E9;
	--violet-30: #EEAFD6;
	--violet-40: #E383BC;
	--violet-50: #D75DA2;
	--violet-60: #C43E84;
	--violet-70: #A92D6A;
	--violet-80: #8C2858;
	--violet-90: #75264C;
	--yellow-05: #FEFEE8;
	--yellow-10: #FFFEC2;
	--yellow-20: #FFFA87;
	--yellow-30: #FFF043;
	--yellow-40: #FFDE03;
	--yellow-50: #EFC703;
	--yellow-60: #CE9A00;
	--yellow-70: #A46E04;
	--yellow-80: #88560B;
	--yellow-90: #734610;

/* Token colors */

	--ui-background: var(--white);
	--ui-01: var(--gray-10);
	--ui-02: var(--gray-20);
	--ui-03: var(--gray-50);
	--ui-04: var(--gray-60);
	--ui-05: var(--primary-10);
	--text-01: var(--gray-80);
	--text-02: var(--gray-60);
	--text-03: var(--gray-40);
	--text-04: var(--white);
	--text-05: var(--gray-30);
	--interactive-01: var(--primary-60);
	--interactive-01-hover: var(--primary-70);
	--interactive-01-active: var(--primary-90);
	--interactive-02: var(--gray-10);
	--interactive-02-hover: var(--primary-10);
	--interactive-03: var(--primary-50);
	--interactive-04: var(--primary-20);
	--interactive-05: var(--primary-40);
	--danger: var(--red-50);
	--hover-danger: var(--red-70);
	--link-01: var(--primary-60);
	--link-02: var(--gray-50);
	--link-03: var(--primary-50);
	--link-04: var(--primary-40);
	--link-05: var(--primary-30);
	--icon-01: var(--gray-80);
	--icon-02: var(--gray-50);
	--icon-03: var(--white);
	--support-error: var(--red-50);
	--support-error-bg: var(--red-10);
	--support-error-dark: var(--red-70);
	--support-error-light: var(--red-20);
	--support-warning: var(--orange-50);
	--support-warning-bg: var(--orange-10);
	--support-warning-dark: var(--orange-70);
	--support-warning-light: var(--orange-20);
	--support-success: var(--green-50);
	--support-success-bg: var(--green-10);
	--support-success-dark: var(--green-70);
	--support-success-light: var(--green-20);
	--support-info: var(--blue-50);
	--support-info-bg: var(--blue-10);
	--support-info-dark: var(--blue-70);
	--support-info-light: var(--blue-20);