Colors
Brand Colors
--color-brand-primary:
#ff0080
--color-brand-primary-dark:
#cc0066
--color-brand-primary-pastel-light:
#ffcce8
--color-brand-primary-pastel-dark:
#ff0080
--color-brand-secondary:
#00aeff
--color-brand-secondary-dark:
#008bcc
--color-brand-secondary-very-light:
#f2fdff
--color-brand-secondary-pastel-light:
#daf3ff
--color-brand-secondary-pastel-medium:
#aaf3ff
--color-brand-secondary-pastel-dark:
#00aeff
Background Colors
--color-background-content-dark:
#263238
--color-background-content-light:
#ffffff
--color-background-page-light:
#dbfaff
--color-background-page-dark:
#13454c
Text Colors
--color-text-dark:
rgba(0, 0, 0, 0.8)
Accessible on white and lightest gray.
--color-text-dark-emphasis:
#000000
--color-text-dark-secondary:
rgba(0, 0, 0, 0.6)
--color-text-light:
rgba(255, 255, 255, 0.85)
--color-text-light-emphasis:
#ffffff
--color-text-light-secondary:
rgba(255, 255, 255, 0.65)
--color-text-link:
#00aeff
--color-text-link-hover:
#008bcc
--color-text-link-primary:
#ff0080
--color-text-link-primary-hover:
#cc0066
--color-text-link-danger:
#ff3300
--color-text-link-danger-hover:
#cc2900
Status Colors
--color-status-success:
#09b896
--color-status-success-dark:
#079378
--color-status-success-pastel-very-light:
#dfffcb
--color-status-success-pastel-light:
#b9ff8d
--color-status-success-pastel-dark:
#0caf8b
--color-status-warning:
#ff9600
--color-status-warning-dark:
#cc7800
--color-status-warning-pastel-light:
#ffe466
--color-status-warning-pastel-dark:
#ff9600
--color-status-danger:
#ff3300
--color-status-danger-dark:
#cc2900
--color-status-danger-pastel-light:
#ffd4d4
--color-status-danger-pastel-dark:
#ff1c1c
--color-status-disabled:
#a1a1a1
--color-status-disabled-light:
#e9e9e9
--color-status-disabled-pastel-light:
#cecec6
--color-status-disabled-pastel-dark:
#8d8d87
--color-status-edit:
rgba(252, 255, 0, 0.66)
--color-status-highlight:
#fffbd9
Base Colors
--color-base-pink:
#ff0080
--color-base-pink-dark:
#cc0066
--color-base-pink-pastel-dark:
#ff0080
--color-base-pink-pastel-light:
#ffcce8
--color-base-blue:
#00aeff
--color-base-blue-dark:
#008bcc
--color-base-blue-very-light:
#f2fdff
--color-base-blue-pastel-dark:
#00aeff
--color-base-blue-pastel-medium:
#aaf3ff
--color-base-blue-pastel-light:
#daf3ff
--color-base-blue-pastel-very-light:
#dbfaff
--color-base-blue-gray-light:
#e4eff1
--color-base-cyan-very-dark:
#13454c
--color-base-green:
#09b896
--color-base-green-dark:
#079378
--color-base-green-pastel-dark:
#0caf8b
--color-base-green-pastel-light:
#b9ff8d
--color-base-green-pastel-very-light:
#dfffcb
--color-base-orange:
#ff9600
--color-base-orange-dark:
#cc7800
--color-base-orange-pastel-dark:
#ff9600
--color-base-orange-pastel-light:
#ffe466
--color-base-red:
#ff3300
--color-base-red-dark:
#cc2900
--color-base-red-pastel-dark:
#ff1c1c
--color-base-red-pastel-light:
#ffd4d4
--color-base-gray:
#a1a1a1
--color-base-gray-light:
#e9e9e9
--color-base-gray-pastel-dark:
#8d8d87
--color-base-gray-pastel-light:
#cecec6
--color-base-yellow-pastel-light:
#fffbd9
--color-base-yellow-transparent-600:
rgba(252, 255, 0, 0.66)
--color-base-black-transparent:
rgba(0, 0, 0, 0)
--color-base-black-transparent-100:
rgba(0, 0, 0, 0.13)
--color-base-black-transparent-200:
rgba(0, 0, 0, 0.25)
--color-base-black-transparent-300:
rgba(0, 0, 0, 0.35)
--color-base-black-transparent-500:
rgba(0, 0, 0, 0.5)
--color-base-black-transparent-600:
rgba(0, 0, 0, 0.6)
--color-base-black-transparent-800:
rgba(0, 0, 0, 0.8)
--color-base-white-transparent:
rgba(255, 255, 255, 0)
--color-base-white-transparent-100:
rgba(255, 255, 255, 0.13)
--color-base-white-transparent-200:
rgba(255, 255, 255, 0.25)
--color-base-white-transparent-300:
rgba(255, 255, 255, 0.35)
--color-base-white-transparent-500:
rgba(255, 255, 255, 0.5)
--color-base-white-transparent-600:
rgba(255, 255, 255, 0.65)
--color-base-white-transparent-800:
rgba(255, 255, 255, 0.85)
--color-base-white:
#ffffff
--color-base-black:
#000000
--color-base-blue-dark-mode:
#263238
--color-base-gray-050:
#fafafa
--color-base-gray-100:
#f5f5f5
--color-base-gray-200:
#eeeeee
--color-base-gray-300:
#e0e0e0
--color-base-gray-400:
#bdbdbd
--color-base-gray-500:
#9e9e9e
--color-base-gray-600:
#757575
--color-base-gray-700:
#616161
--color-base-gray-800:
#424242
--color-base-gray-900:
#212121