San Juan
See how #304B6A looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* San Juan Base */
--color-primary: #304B6A;
--color-primary-rgb: 48 75 106;
--color-primary-hsl: 212 38% 30%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #edf2f7;
--color-primary-100: #cad8e7;
--color-primary-200: #a7bed7;
--color-primary-300: #84a3c8;
--color-primary-400: #6189b8;
--color-primary-500: #47709e;
--color-primary-600: #37577b;
--color-primary-700: #283e58;
--color-primary-800: #182535;
--color-primary-900: #080c12;
}