Muesli
See how #AA8B5B looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Muesli Base */
--color-primary: #AA8B5B;
--color-primary-rgb: 170 139 91;
--color-primary-hsl: 36 32% 51%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #f6f3ee;
--color-primary-100: #e5dbcd;
--color-primary-200: #d4c3ab;
--color-primary-300: #c2ab89;
--color-primary-400: #b19468;
--color-primary-500: #977a4e;
--color-primary-600: #765f3d;
--color-primary-700: #54442b;
--color-primary-800: #32291a;
--color-primary-900: #110e09;
}