Skip to content

Farm Cove Theme Documentation

Overview

This document outlines the Farm Cove color palette and theme implementation for the Delta Web App. The theme has been designed to reflect Farm Cove's brand identity while ensuring accessibility compliance with WCAG 2.1 AA standards.

Color Palette

Primary Colors

Teal/Cyan (Primary Brand Color)

  • CSS Variable: --primary
  • Light Mode: hsl(188 61% 35%) - Darkened for WCAG compliance
  • Dark Mode: hsl(188 61% 50%) - Original brand color
  • Usage: Primary buttons, links, active states, focus rings
  • Utility Classes: bg-primary, text-primary, border-primary

Background Colors

  • Light Mode: White hsl(0 0% 100%)
  • Dark Mode: Dark Gray hsl(0 0% 16%)
  • CSS Variable: --background
  • Usage: Main canvas, page backgrounds

Text Colors

  • Light Mode: Dark Gray hsl(0 0% 16%)
  • Dark Mode: White hsl(0 0% 100%)
  • CSS Variable: --foreground
  • Usage: Primary text content

State Colors

Success

  • Value: hsl(146 55% 40%) (#4bca81 adjusted for contrast)
  • CSS Variable: --success
  • Usage: Success messages, positive actions, confirmations
  • Utility Classes: bg-success, text-success

Warning

  • Value: hsl(33 100% 68%) (#ffb75d)
  • CSS Variable: --warning
  • Usage: Warning alerts, caution states, pending actions
  • Utility Classes: bg-warning, text-warning

Error/Destructive

  • Value: hsl(2 58% 48%) (#c23934)
  • CSS Variable: --destructive
  • Usage: Error messages, delete actions, critical alerts
  • Utility Classes: bg-destructive, text-destructive

Info

  • Value: hsl(216 61% 22%) (#16325c)
  • CSS Variable: --info
  • Usage: Informational messages, help text, tooltips
  • Utility Classes: bg-info, text-info

Secondary Colors

Secondary (Light Mode)

  • Background: White
  • Text: Teal (same as primary)
  • Usage: Secondary buttons with teal outline/text

Usage Guidelines

1. Primary Actions

Use the primary teal color for:

  • Primary buttons and CTAs
  • Active navigation items
  • Focus states
  • Links
<Button variant="default">Primary Action</Button>
<a className="text-primary hover:text-primary/80">Link</a>

2. Secondary Actions

Use secondary styling for:

  • Cancel buttons
  • Alternative actions
  • Less prominent CTAs
<Button variant="secondary">Secondary Action</Button>
<Button variant="outline">Outline Action</Button>

3. State-Based UI

Apply state colors consistently:

// Success state
<div className="bg-success text-success-foreground p-4 rounded">
  ✓ Operation completed successfully
</div>

// Warning state
<div className="bg-warning text-warning-foreground p-4 rounded">
  ⚠ Please review before proceeding
</div>

// Error state
<div className="bg-destructive text-destructive-foreground p-4 rounded">
  ✕ An error occurred
</div>

// Info state
<div className="bg-info text-info-foreground p-4 rounded">
  ℹ Additional information
</div>

4. Farm Cove Utility Classes

The theme provides additional utility classes for Farm Cove branding:

// Brand colors
<div className="bg-farm-teal">Primary brand color</div>
<div className="bg-farm-teal-hover">Hover state</div>
<div className="bg-farm-gray">Dark gray background</div>

// Semantic usage
<div className="text-farm-gray-lighter">Muted text</div>
<div className="border-farm-teal">Teal border</div>

Accessibility

Contrast Ratios

All color combinations meet WCAG 2.1 AA standards:

  • Primary on White: 4.55:1 ✅
  • Dark Gray on White: 14.55:1 ✅
  • White on Dark Gray: 14.55:1 ✅
  • Error on White: 5.41:1 ✅
  • Info on White: 12.95:1 ✅
  • Warning on Dark: 8.38:1 ✅

Note: Success state (3.40:1) passes for large text only (18px+ or 14px+ bold).

Best Practices

  1. Always use semantic color variables rather than hard-coded values
  2. Test color combinations before implementing new patterns
  3. Ensure interactive elements have sufficient contrast
  4. Provide color-blind friendly indicators (icons, patterns) for critical states

Dark Mode

The theme automatically switches between light and dark modes based on user preference or system settings. Key considerations:

  1. The primary teal remains consistent across modes
  2. Background and foreground colors invert
  3. State colors maintain their semantic meaning
  4. All contrast ratios remain WCAG compliant

Implementation Examples

Card Component

<div className="bg-card text-card-foreground p-6 rounded-lg border border-border">
  <h3 className="text-lg font-semibold">Production Budget</h3>
  <p className="text-muted-foreground">Manage your finances</p>
  <Button className="mt-4">View Details</Button>
</div>

Form Validation

<Input className={error ? 'border-destructive' : ''} aria-invalid={!!error} />;
{
  error && <p className="text-sm text-destructive mt-1">{error}</p>;
}

Status Indicators

<Badge className="bg-success text-success-foreground">Active</Badge>
<Badge className="bg-warning text-warning-foreground">Pending</Badge>
<Badge className="bg-destructive text-destructive-foreground">Expired</Badge>

Migration Notes

When updating existing components:

  1. Replace hardcoded colors with CSS variables
  2. Update button variants to use new theme colors
  3. Ensure all text has proper contrast
  4. Test in both light and dark modes
  5. Verify color-blind accessibility

Resources