Colours

Group	Contrast level	CSS variable	Hex Value	Preview
alert	100	`--color-alert-100`	`#ffd6d6`
	200	`--color-alert-200`	`#ff9999`
	300	`--color-alert-300`	`#f93939`
	400	`--color-alert-400`	`#da0707`
	500	`--color-alert-500`	`#a80505`
border	100	`--color-border-100`	`#e8eaec`
	200	`--color-border-200`	`#e0e1e5`
	300	`--color-border-300`	`#d7d9dd`
	400	`--color-border-400`	`#c5c8ce`
	500	`--color-border-500`	`#b7bbc2`
text	100	`--color-text-100`	`#ffffff`
	200	`--color-text-200`	`#b5b0b5`
	300	`--color-text-300`	`#575157`
	400	`--color-text-400`	`#3b353b`
	500	`--color-text-500`	`#0d0c0d`
info	100	`--color-info-100`	`#e5f3ff`
primary	100	`--color-primary-100`	`#f3f0fa`
	200	`--color-primary-200`	`#e8e3f6`
	300	`--color-primary-300`	`#cfc6ed`
	400	`--color-primary-400`	`#5e43c2`
	500	`--color-primary-500`	`#4d35a1`
success	100	`--color-success-100`	`#e8f6e3`
	200	`--color-success-200`	`#c8e9bb`
	300	`--color-success-300`	`#a7db93`
	400	`--color-success-400`	`#86d06d`
	500	`--color-success-500`	`#65c345`
surface	100	`--color-surface-100`	`#ffffff`
	200	`--color-surface-200`	`#f9fafb`
	300	`--color-surface-300`	`#f1f2f4`
	400	`--color-surface-400`	`#e8eaec`
	500	`--color-surface-500`	`#e0e1e5`
	600	`--color-surface-600`	`#d7d9dd`
	700	`--color-surface-700`	`#75767e`
	800	`--color-surface-800`	`#1c1b27`
warning	100	`--color-warning-100`	`#ffedd6`
	200	`--color-warning-200`	`#ffe0b8`
	300	`--color-warning-300`	`#ffce8f`
	400	`--color-warning-400`	`#ffb95e`
	500	`--color-warning-500`	`#ff9d1f`