Arapawa
See how #0C0C6D looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Arapawa Base */
--color-primary: #0C0C6D;
--color-primary-rgb: 12 12 109;
--color-primary-hsl: 240 80% 24%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #e8e8fc;
--color-primary-100: #babaf7;
--color-primary-200: #8c8cf2;
--color-primary-300: #5e5eed;
--color-primary-400: #3030e8;
--color-primary-500: #1717cf;
--color-primary-600: #1212a1;
--color-primary-700: #0d0d73;
--color-primary-800: #080845;
--color-primary-900: #030317;
}