Cupid
See how #FBC7D4 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Cupid Base */
--color-primary: #FBC7D4;
--color-primary-rgb: 251 199 212;
--color-primary-hsl: 345 87% 88%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #fde7ed;
--color-primary-100: #fab7c8;
--color-primary-200: #f788a4;
--color-primary-300: #f3587f;
--color-primary-400: #f0285a;
--color-primary-500: #d70f41;
--color-primary-600: #a70c32;
--color-primary-700: #770824;
--color-primary-800: #480516;
--color-primary-900: #180207;
}