Janna
See how #F4EBD3 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Janna Base */
--color-primary: #F4EBD3;
--color-primary-rgb: 244 235 211;
--color-primary-hsl: 44 60% 89%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #faf6eb;
--color-primary-100: #f0e3c2;
--color-primary-200: #e6d199;
--color-primary-300: #dbbf70;
--color-primary-400: #d1ac47;
--color-primary-500: #b8932e;
--color-primary-600: #8f7224;
--color-primary-700: #66521a;
--color-primary-800: #3d310f;
--color-primary-900: #141005;
}