Green Waterloo
See how #101405 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Green Waterloo Base */
--color-primary: #101405;
--color-primary-rgb: 16 20 5;
--color-primary-hsl: 76 60% 5%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f6faeb;
--color-primary-100: #e3f0c2;
--color-primary-200: #d1e699;
--color-primary-300: #bfdb70;
--color-primary-400: #acd147;
--color-primary-500: #93b82e;
--color-primary-600: #728f24;
--color-primary-700: #52661a;
--color-primary-800: #313d0f;
--color-primary-900: #101405;
}