Skip to content

Color System Documentation

Centralized Color Management

All colors are now managed from extra.css using CSS custom properties (variables). This allows for easy theme switching and consistent color usage across the entire project.

Color Palette

Primary Accent

  • --accent-primary: #624BFF - Main brand color

Secondary Colors

  • --secondary-color-1: #AC50FF - Purple accent
  • --secondary-color-2: #7059FB - Blue-purple accent
  • --secondary-color-3: #2ECFF6 - Cyan accent

Neutral Colors

  • --neutral-800: #07091B - Darkest (headers, text)
  • --neutral-700: #1A1C38 - Dark (backgrounds)
  • --neutral-600: #92939B - Medium-dark
  • --neutral-500: #83848D - Medium
  • --neutral-400: #9C9DA4 - Medium-light
  • --neutral-300: #B5B6BB - Light
  • --neutral-200: #E7E7E9 - Very light
  • --neutral-100: #FFFFFF - White

Usage

In CSS

.my-element {
  color: var(--accent-primary);
  background-color: var(--neutral-100);
  border: 1px solid var(--neutral-200);
}

Utility Classes

  • .text-accent - Accent color text
  • .bg-accent-light - Light accent background
  • .border-accent - Accent color border
  • .hero-accent-bg - Gradient hero background

Theme Switching

Colors automatically adapt for light/dark themes: - Light theme uses --accent-primary - Dark theme uses --secondary-color-2 for better contrast

CSS Classes Available

Text Colors

  • .text-accent
  • .text-secondary-1
  • .text-secondary-2
  • .text-secondary-3
  • .text-neutral-600
  • .text-neutral-500

Background Colors

  • .bg-accent-light
  • .bg-accent
  • .bg-neutral-100
  • .bg-neutral-200

Border Colors

  • .border-accent
  • .border-neutral-200

Special Backgrounds

  • .hero-accent-bg - Gradient with border for hero sections
  • .secondary-accent-bg - Alternative gradient

Adding New Colors

To add new colors, update the :root section in extra.css:

:root {
  --your-new-color: #HEXCODE;
  --your-new-color-10: rgba(R, G, B, 0.1); /* 10% opacity version */
}

Then create utility classes if needed and update theme variants.