Color Palette

Design System • Last Updated: January 2024

Complete color system for the Psilobase including primary, secondary, semantic, and neutral colors. All colors are tested for WCAG accessibility compliance.

Primary Colors

Main brand colors used for primary actions, links, and interactive elements.

Secondary Colors

Supporting colors for secondary actions, borders, and decorative elements.

Accent Colors

Highlight colors for special features and attention-grabbing elements.

Semantic Colors

Status and feedback colors for alerts, messages, and state indicators.

Neutral Colors

Text and background colors for general content and layout.

Contrast Checker

Test color combinations for WCAG compliance.

Contrast Ratio
-

Usage Guidelines

Color Accessibility

  • AAA - Enhanced contrast (7:1 for normal text, 4.5:1 for large text)
  • AA - Minimum contrast (4.5:1 for normal text, 3:1 for large text)
  • Large Text - 18pt+ or 14pt+ bold
  • UI Components - 3:1 minimum contrast ratio

Best Practices

  • Use primary colors for main CTAs and important actions
  • Use secondary colors for supporting UI elements
  • Use semantic colors consistently for feedback (success, warning, danger)
  • Ensure sufficient contrast between text and backgrounds
  • Test colors in both light and dark modes
  • Consider colorblind users - don't rely solely on color

CSS Variables

Use CSS custom properties for consistent color application:

/* Access colors in your CSS */
.element {
  color: var(--primary-color);
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

/* Dark mode override */
[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --text-primary: #e0e0e0;
}