Mystic
See how #E2EBED looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Mystic Base */
--color-primary: #E2EBED;
--color-primary-rgb: 226 235 237;
--color-primary-hsl: 191 23% 91%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #eff4f5;
--color-primary-100: #d0dee2;
--color-primary-200: #b1c9ce;
--color-primary-300: #91b3ba;
--color-primary-400: #729da7;
--color-primary-500: #58838d;
--color-primary-600: #45666e;
--color-primary-700: #31494e;
--color-primary-800: #1d2c2f;
--color-primary-900: #0a0f10;
}