# Color Palette

## Overview
The Compeer color system is designed to convey trust, stability, and growth - values central to financial and agricultural services.

## Primary Colors

### Brand Colors

#### Dark Teal (Primary)
- **Hex**: `#1b6875`
- **RGB**: R27 | G104 | B117
- **Usage**: Primary actions, key branding elements, main buttons, navigation highlights
- **Accessibility**: Meets WCAG AA on white backgrounds

#### Dark Teal Hover
- **Hex**: `#137f8b`
- **RGB**: R19 | G127 | B139
- **Usage**: Hover state for Dark Teal elements
- **Accessibility**: Sufficient contrast shift for hover feedback

#### Apple Green (Accent)
- **Hex**: `#a9c23f`
- **RGB**: R169 | G194 | B63
- **Usage**: Accent color, highlights, secondary CTAs, positive indicators
- **Accessibility**: Test carefully for text use, works well for large elements

## Secondary / Neutral Colors

### Turquoise (Supporting Brand Color)
- **Hex**: `#179dab`
- **RGB**: R23 | G157 | B171
- **Usage**: Secondary actions, informational elements, accents, links

### Grayscale Palette

#### Black
- **Hex**: `#1F1F23`
- **RGB**: R31 | G31 | B35
- **Usage**: Primary text, headings, high emphasis text

#### Almost Black
- **Hex**: `#3f3f43`
- **RGB**: R63 | G63 | B67
- **Usage**: Secondary text, subheadings, medium emphasis text

#### Dark Cool Gray
- **Hex**: `#73757f`
- **RGB**: R115 | G117 | B127
- **Usage**: Tertiary text, disabled text, subtle elements

#### Cool Gray
- **Hex**: `#b1b1b1`
- **RGB**: R177 | G177 | B177
- **Usage**: Borders, dividers, placeholders, disabled states

#### Light Cool Gray
- **Hex**: `#dad9d6`
- **RGB**: R218 | G217 | B214
- **Usage**: Subtle backgrounds, hover states, section dividers

#### Barely Gray
- **Hex**: `#f3f3f4`
- **RGB**: R243 | G243 | B244
- **Usage**: Page backgrounds, card backgrounds, alternate sections

#### White
- **Hex**: `#ffffff`
- **RGB**: R255 | G255 | B255
- **Usage**: Primary backgrounds, text on dark surfaces, cards

## Feedback Colors

### Error Red
- **Hex**: `#be0123`
- **RGB**: R190 | G1 | B35
- **Usage**: Error messages, validation failures, destructive actions
- **Applications**: 
  - Color for elements related to an error or destructive actions
  - Form validation errors
  - Alert messages
  - Destructive button backgrounds

### Error Red Hover
- **Hex**: `#8e0209`
- **RGB**: R142 | G2 | B9
- **Usage**: Hover state for error/destructive elements
- **Applications**: 
  - Hover state for destructive buttons or error-state buttons
  - Interactive error elements

### Warning Orange
- **Hex**: `#dc9503`
- **RGB**: R220 | G149 | B3
- **Usage**: Warning messages, caution states, important notices
- **Applications**:
  - Color for elements that are not quite an error but still require user attention
  - Warning alerts
  - Caution indicators
  - Important status messages

### Success Green
- **Hex**: `#2e834a`
- **RGB**: R46 | G131 | B74
- **Usage**: Success messages, positive confirmations, completed states
- **Applications**:
  - Color for elements related to a successful action
  - Form validation success
  - Confirmation messages
  - Completed status indicators

### Info (Informational)
- **Color**: Turquoise `#179dab` or Dark Teal `#1b6875`
- **Usage**: Info messages, tips, educational content, informational elements
- **Applications**:
  - Informational alerts
  - Help text
  - Tips and guidance
  - Neutral status indicators

## Background Colors

### Page Backgrounds
- **Primary**: White or very light gray
- **Alternate**: Light gray for section differentiation
- **Dark Mode** (if applicable): Dark grays with appropriate contrast ratios

## Text Colors

### On Light Backgrounds
- **Primary**: Black `#1F1F23` - Body text, headings
- **Secondary**: Almost Black `#3f3f43` - Subheadings, secondary text
- **Tertiary**: Dark Cool Gray `#73757f` - Meta text, captions
- **Disabled**: Cool Gray `#b1b1b1`

### On Dark Backgrounds
- **Primary**: White `#ffffff`
- **Secondary**: Light Cool Gray `#dad9d6`
- **Disabled**: Cool Gray `#b1b1b1`

### On Colored Backgrounds
- **Dark Teal**: Use White `#ffffff` for text (sufficient contrast)
- **Apple Green**: Test text color, may need Black or Almost Black
- **Turquoise**: Use White `#ffffff` for text
- Always verify WCAG AA compliance (minimum 4.5:1 for normal text)

## Usage Guidelines

### Accessibility Requirements

### WCAG 2.1 Compliance
Compeer Financial's branding should meet all WCAG 2.1 compliance for all digital products.

- **Web Grades**: All accessibility guidelines (WCAG) require a minimum contrast of 4.5:1 for regular text and 3:0 for large bold or extra-bold (at or above 24px) text. If both WCAG contrast ratios are met, a green checkmark is shown.
- **Large Text**: If a color pair fails AA, it may be acceptable to use if the text is large and bold (at or above 24px/18pt bold). Large text has a less stringent requirement of 3:1 ratio.

### Color Usage Requirements
- All text must meet WCAG 2.1 AA standards (minimum 4.5:1 for normal text, 3:1 for large text 18pt+)
- Interactive elements must have 3:1 contrast ratio against adjacent colors
- Do not rely on color alone to convey information
- Provide text labels, icons, or patterns in addition to color coding
- Test all color combinations with contrast checkers before implementation

### AA Regular vs AA Large
- **AA Regular**: Passes for all text sizes (4.5:1 minimum contrast)
- **AA Large**: Passes only for large text 18pt+ regular or 14pt+ bold (3:1 minimum contrast)

### Brand Application
- Use primary brand colors consistently across all touchpoints
- Maintain color relationships and hierarchy
- Avoid mixing too many colors in a single interface
- Allow white space to let colors breathe

### Do's and Don'ts

#### Do:
- Use brand colors for primary actions
- Maintain consistent color meanings (green = success, red = error)
- Test all color combinations for accessibility
- Use neutral backgrounds to let content shine

#### Don't:
- Use brand colors for semantic states (don't use brand green for success if different)
- Create poor contrast combinations
- Overuse bright colors
- Mix competing color schemes

## Color Combinations

### Recommended Pairings

#### Buttons
- **Primary Button**: Dark Teal `#1b6875` background + White `#ffffff` text
- **Primary Button Hover**: Dark Teal Hover `#137f8b` background
- **Secondary Button**: White background + Dark Teal `#1b6875` border and text
- **Accent Button**: Apple Green `#a9c23f` background + Black `#1F1F23` text
- **Destructive Button**: Error Red `#be0123` background + White `#ffffff` text
- **Destructive Button Hover**: Error Red Hover `#8e0209` background
- **Success Button**: Success Green `#2e834a` background + White `#ffffff` text

#### Text on Backgrounds
- **White background**: Black `#1F1F23` or Almost Black `#3f3f43` text
- **Dark Teal background**: White `#ffffff` text
- **Barely Gray background**: Black `#1F1F23` text
- **Apple Green background**: Black `#1F1F23` text (verify contrast)

#### Borders and Dividers
- **Subtle dividers**: Light Cool Gray `#dad9d6`
- **Standard borders**: Cool Gray `#b1b1b1`
- **Emphasized borders**: Dark Cool Gray `#73757f`
- **Interactive borders**: Dark Teal `#1b6875`

## Responsive Considerations
- Colors should maintain consistency across all breakpoints (1440px, 1200px, 1024px, 992px, 768px, 390px)
- Hover and focus states must remain accessible on all screen sizes
- Touch targets should have sufficient color contrast

## CSS Variables Implementation

```css
:root {
  /* Primary Brand Colors */
  --color-dark-teal: #1b6875;
  --color-dark-teal-hover: #137f8b;
  --color-apple-green: #a9c23f;
  
  /* Secondary Brand Color */
  --color-turquoise: #179dab;
  
  /* Feedback Colors */
  --color-error: #be0123;
  --color-error-hover: #8e0209;
  --color-warning: #dc9503;
  --color-success: #2e834a;
  
  /* Grayscale */
  --color-black: #1F1F23;
  --color-almost-black: #3f3f43;
  --color-dark-cool-gray: #73757f;
  --color-cool-gray: #b1b1b1;
  --color-light-cool-gray: #dad9d6;
  --color-barely-gray: #f3f3f4;
  --color-white: #ffffff;
  
  /* Semantic Aliases */
  --color-primary: var(--color-dark-teal);
  --color-primary-hover: var(--color-dark-teal-hover);
  --color-accent: var(--color-apple-green);
  --color-info: var(--color-turquoise);
  --color-text: var(--color-black);
  --color-text-secondary: var(--color-almost-black);
  --color-text-tertiary: var(--color-dark-cool-gray);
  --color-border: var(--color-cool-gray);
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-barely-gray);
}
```

## Reference
Source: [Compeer Design System - Axure](https://83y9cn.axshare.com/?id=92xw93&p=color&c=1)
Brand Palette: Primary Colors (Dark Teal, Apple Green), Secondary/Neutral Colors (Turquoise, Grayscale)
Last Updated: December 2025