Gothic
See how #6D92A1 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Gothic Base */
--color-primary: #6D92A1;
--color-primary-rgb: 109 146 161;
--color-primary-hsl: 197 22% 53%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #eff3f5;
--color-primary-100: #d0dce1;
--color-primary-200: #b1c5cd;
--color-primary-300: #92aeb9;
--color-primary-400: #7397a5;
--color-primary-500: #5a7e8c;
--color-primary-600: #46626d;
--color-primary-700: #32464e;
--color-primary-800: #1e2a2f;
--color-primary-900: #0a0e10;
}