Spectra
See how #2F5A57 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Spectra Base */
--color-primary: #2F5A57;
--color-primary-rgb: 47 90 87;
--color-primary-hsl: 176 31% 27%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #eef6f6;
--color-primary-100: #cde5e3;
--color-primary-200: #abd3d0;
--color-primary-300: #8ac1be;
--color-primary-400: #69b0ab;
--color-primary-500: #4f9692;
--color-primary-600: #3e7571;
--color-primary-700: #2c5451;
--color-primary-800: #1a3231;
--color-primary-900: #091110;
}