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;
	--blue-10: #EAF0FA;
	--blue-100: #0D244A;
	--blue-20: #C1D7FB;
	--blue-30: #AFC5E8;
	--blue-40: #6795E0;
	--blue-50: #3173DE;
	--blue-60: #2C66C4;
	--blue-70: #2659AB;
	--blue-80: #1F55AD;
	--blue-90: #153C7A;
	--gray-10: #F8F8F8;
	--gray-100: #141414;
	--gray-20: #E0E0E0;
	--gray-30: #C6C6C6;
	--gray-40: #A8A8A8;
	--gray-50: #8D8D8D;
	--gray-60: #6F6F6F;
	--gray-70: #525252;
	--gray-80: #393939;
	--gray-90: #262626;
	--green-10: #E6F8D2;
	--green-20: #C4E0A5;
	--green-50: #71C716;
	--green-60: #64AD13;
	--green-70: #549410;
	--orange-10: #FDE2CB;
	--orange-20: #FAB980;
	--orange-50: #FF9333;
	--orange-60: #FF7800;
	--orange-70: #BA6820;
	--primary-10: #EAF0FA;
	--primary-100: #0D244A;
	--primary-20: #C1D7FB;
	--primary-30: #AFC5E8;
	--primary-40: #6795E0;
	--primary-50: #3173DE;
	--primary-60: #2C66C4;
	--primary-70: #2659AB;
	--primary-80: #1F55AD;
	--primary-90: #153C7A;
	--purple-20: #B995CA;
	--purple-50: #932DC2;
	--purple-60: #6C218F;
	--purple-70: #591B75;
	--red-10: #FBE1E1;
	--red-20: #F0A8A8;
	--red-50: #F21D1D;
	--red-60: #D91919;
	--red-70: #BF1717;
	--white: #FFF;
	--yellow-20: #FFF9C0;
	--yellow-50: #FFF490;
	--yellow-60: #FFE60D;
	--yellow-70: #DFC903;

/* 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);