Bastille
See how #292130 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Bastille Base */
--color-primary: #292130;
--color-primary-rgb: 41 33 48;
--color-primary-hsl: 272 19% 16%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f2f0f5;
--color-primary-100: #d9d1e0;
--color-primary-200: #c0b3cb;
--color-primary-300: #a795b7;
--color-primary-400: #8e76a2;
--color-primary-500: #745d89;
--color-primary-600: #5a486a;
--color-primary-700: #41344c;
--color-primary-800: #271f2e;
--color-primary-900: #0d0a0f;
}