Color

Color is a fundamental part of Teardrop Design System. It helps distinguish brands, convey meaning, and create consistent experiences.

Color System

Teardrop uses a systematic approach to color with tokens for each brand.

Hardwater Colors

Primary Colors

Hardwater's primary color palette emphasizes professionalism and trust.

Token	Value	Usage
color.primary.50	#e3f2fd	Lightest tint
color.primary.100	#bbdefb	Light tint
color.primary.500	#0065ff	Primary brand color
color.primary.600	#0052cc	Hover state
color.primary.700	#003d99	Active state
color.primary.900	#001d66	Darkest shade

Neutral Colors

Neutral colors provide the foundation for text, backgrounds, and borders.

Token	Value	Usage
color.neutral.50	#fafbfc	Lightest background
color.neutral.100	#f4f5f7	Light background
color.neutral.200	#dee4ea	Border, subtle background
color.neutral.300	#c1c7d0	Disabled states
color.neutral.500	#8993a4	Placeholder text
color.neutral.700	#505f79	Secondary text
color.neutral.900	#091e42	Primary text
color.white	#ffffff	Pure white

Semantic Colors

Semantic colors convey meaning and status.

Success (Green)

• color.semantic.success.500: #00875a - Success states
• color.semantic.success.100: #d5f4e6 - Success backgrounds

Warning (Orange)

• color.semantic.warning.500: #ff991f - Warning states
• color.semantic.warning.100: #fff4e5 - Warning backgrounds

Error (Red)

• color.semantic.error.500: #de350b - Error states
• color.semantic.error.100: #ffe5e5 - Error backgrounds

Info (Blue)

• color.semantic.info.500: #0052cc - Informational states
• color.semantic.info.100: #deebff - Info backgrounds

Hardwater Studios Colors

Primary Colors

Hardwater Studios uses a more expressive color palette.

Token	Value	Usage
color.primary.50	#f3e8ff	Lightest tint
color.primary.100	#e9d5ff	Light tint
color.primary.500	#7c3aed	Primary brand color (Purple)
color.primary.600	#6d28d9	Hover state
color.primary.700	#5b21b6	Active state
color.primary.900	#4c1d95	Darkest shade

Accent Colors

Hardwater Studios includes additional accent colors for creative expression.

• Accent 1 (Pink): #ec4899
• Accent 2 (Amber): #f59e0b
• Accent 3 (Emerald): #10b981

Neutral Colors

Hardwater Studios uses a slightly different neutral palette.

Token	Value	Usage
color.neutral.50	#f9fafb	Lightest background
color.neutral.100	#f3f4f6	Light background
color.neutral.900	#111827	Primary text

Using Colors

In Components

import { Box } from '@hardwater/teardrop';
import { tokens } from '@hardwater/teardrop';

<Box
  backgroundColor={tokens.color.primary[500]}
  color={tokens.color.white}
>
  Primary content
</Box>

In CSS

.button {
  background-color: var(--teardrop-color-primary-500);
  color: var(--teardrop-color-white);
}

.button:hover {
  background-color: var(--teardrop-color-primary-600);
}

Semantic Usage

// Success state
<Box backgroundColor={tokens.color.semantic.success[100]}>
  <Text color={tokens.color.semantic.success[700]}>
    Success message
  </Text>
</Box>

// Error state
<Box backgroundColor={tokens.color.semantic.error[100]}>
  <Text color={tokens.color.semantic.error[700]}>
    Error message
  </Text>
</Box>

Color Contrast

All color combinations meet WCAG AA contrast requirements:

• Normal text: Minimum 4.5:1 contrast ratio
• Large text: Minimum 3:1 contrast ratio
• Interactive elements: Minimum 3:1 contrast ratio

Contrast Examples

Good Contrast:

• neutral.900 on white - 12.6:1 ✓
• primary.500 on white - 4.5:1 ✓
• neutral.700 on neutral.100 - 4.8:1 ✓

Poor Contrast:

• neutral.200 on white - 1.4:1 ✗
• primary.100 on white - 1.2:1 ✗

Color Tokens

Access colors through the token system:

import { tokens } from '@hardwater/teardrop';

// Primary colors
tokens.color.primary[500]

// Neutral colors
tokens.color.neutral[900]

// Semantic colors
tokens.color.semantic.success[500]
tokens.color.semantic.warning[500]
tokens.color.semantic.error[500]
tokens.color.semantic.info[500]

Best Practices

1. Use tokens - Always use color tokens, never hardcode hex values
2. Semantic colors - Use semantic colors for status and meaning
3. Contrast - Ensure sufficient contrast for readability
4. Brand consistency - Use brand-appropriate colors
5. Accessibility - Test color combinations for accessibility

Resources

• Design Tokens
• Accessibility
• Brand Guidelines