Overview

The Primary Color token defines the main brand color used throughout the interface for primary actions and key interactive elements.

Token Details

• Value: #0066cc
• CSS Variable: var(--color-primary)
• Sass Variable: $color-primary
• HSL: hsl(210, 100%, 40%)
• RGB: rgb(0, 102, 204)

Usage Guidelines

Recommended Use

• Primary call-to-action buttons
• Active states for navigation
• Links and interactive text
• Progress bars and loading states
• Selected items and focus states

Avoid Using For

• Large background areas
• Text on colored backgrounds without proper contrast
• Decorative elements that don't require interaction

Accessibility

• Contrast Ratio: 4.5:1 against white background
• WCAG Compliance: AA level for normal text
• Color Blindness: Tested with deuteranopia and protanopia

Color Variations

Code Examples

CSS

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

Sass

.link {
  color: $color-primary;

  &:hover {
    color: darken($color-primary, 10%);
  }
}

Related Tokens

• Primary Hover - Interaction state
• Primary Light - Background variant
• Primary Dark - High contrast variant