Our color system is built on four primary palettes: Primary (forest green), Secondary (warm wood), Accent (warm amber), and Neutral (grays). All colors support light and dark mode contexts.
Forest green used for primary actions, links, and brand identity. Reserved for main CTAs and interactive elements.
/* Primary Color Usage */
.bg-primary-600 /* Button backgrounds */
.text-primary-600 /* Links, accent text */
.border-primary-600 /* Active borders */
.hover:bg-primary-700
.dark:bg-primary-700
.dark:text-primary-400Warm wood brown used for secondary CTAs, backgrounds, and complementary sections. Creates a warm, organic feel.
/* Secondary Color Usage */
.bg-secondary-600 /* Secondary buttons, card backgrounds */
.text-secondary-600 /* Accent text, labels */
.border-secondary-100 /* Light borders */
.hover:bg-secondary-700Warm amber used for highlights, badges, and attention-grabbing elements. Complements primary green without competing.
/* Accent Color Usage */
.bg-amber-400 /* Featured badge, "Special Offer" highlights */
.text-amber-600 /* Alert text, important labels */
.border-amber-300 /* Highlight borders */Stone grays used for text, borders, backgrounds, and UI structure. Supports both light and dark modes seamlessly.
/* Neutral Color Usage */
.text-neutral-900 /* Primary text (light mode) */
.dark:text-neutral-50 /* Primary text (dark mode) */
.bg-neutral-50 /* Page backgrounds (light mode) */
.dark:bg-neutral-900 /* Page backgrounds (dark mode) */
.border-neutral-200 /* Light borders */
.dark:border-neutral-700 /* Dark borders */
.text-neutral-500 /* Secondary text, disabled state */Status and feedback colors used for messages, alerts, and validation states.