Colors

The design system includes comprehensive color palettes for both light and dark modes. All colors are designed to maintain accessibility and visual consistency across themes.

Tailwind Configuration

All color tokens must be explicitly defined in your tailwind.config.js. Add these to the theme.extend.colors section:

module.exports = {
  theme: {
    extend: {
      colors: {
        // Light theme - Text colors
        'light-text-primary': '#000000',
        'light-text-secondary': '#6D6D6D',
        'light-text-tertiary': '#6D6D6D',
        'light-text-disabled': '#9E9E9E',
        'light-text-contrast': '#FFFFFF',

        // Light theme - Accent colors
        'light-accent-main': '#EEAE03',
        'light-accent-dark': '#CE8602',
        'light-accent-light': '#FFDD43',
        'light-accent-contrast': '#000000',

        // Dark theme - Text colors
        'dark-text-primary': '#EEEEEE',
        'dark-text-secondary': '#B0B0B0',
        'dark-text-tertiary': '#B0B0B0',
        'dark-text-disabled': '#6D6D6D',
        'dark-text-contrast': '#000000',

        // Dark theme - Accent colors
        'dark-accent-main': '#FFCD29',
        'dark-accent-dark': '#CE8602',
        'dark-accent-light': '#FFDD43',
        'dark-accent-contrast': '#000000',

        // ... (see full configuration in setup guide)
      },
    },
  },
  darkMode: 'class', // Required for theme switching
}

Important: All color tokens must use the light- and dark- prefixes, and darkMode: 'class' must be enabled in your Tailwind config.

Color Palette

Below are all available color tokens. Each color automatically switches between light and dark theme values.

Text Colors

Primary

Light: #000000 / Dark: #EEEEEE

Secondary

Light: #6D6D6D / Dark: #B0B0B0

Disabled

Light: #9E9E9E / Dark: #6D6D6D

Contrast

Light: #FFFFFF / Dark: #000000

Accent Colors

Main

Light: #EEAE03 / Dark: #FFCD29

Dark

Light: #CE8602 / Dark: #CE8602

Light

Light: #FFDD43 / Dark: #FFDD43

Contrast

#000000

Primary Colors

Main

Light: #454545 / Dark: #D5D5D5

Dark

Light: #262626 / Dark: #E9E9E9

Light

Light: #888888 / Dark: #9A9A9A

Secondary Colors

Main

Light: #B0B0B0 / Dark: #4F4F4F

Dark

Light: #888888 / Dark: #454545

Light

Light: #D1D1D1 / Dark: #6D6D6D

Semantic Colors

Error

Main

Light: #D32F2F / Dark: #F44336

Dark

Light: #B22323 / Dark: #CE2A2A

Light

Light: #F27777 / Dark: #F79494

Warning

Main

Light: #EF6C00 / Dark: #FF9800

Dark

Light: #CC5302 / Dark: #E87902

Light

Light: #FFA732 / Dark: #FFBD5C

Info

Main

Light: #0087D4 / Dark: #29B6F6

Dark

Light: #006BAB / Dark: #0A99D9

Light

Light: #2CC1FF / Dark: #62D0FF

Success

Main

Light: #328736 / Dark: #66BB6A

Dark

Light: #2A6B2D / Dark: #4F9A53

Light

Light: #67C16B / Dark: #8FD393

Background Colors

Default

Light: #E8E8E8 / Dark: #1E1E1E

Accent 100

Light: #F1F1F1 / Dark: #2A2A2A

Accent 200

Light: #F7F7F7 / Dark: #323232

Accent 300

Light: #FFFFFF / Dark: #3E3E3E

Action Colors

Active

Hover

Selected

Disabled

Miscellaneous

Divider

Light: #D1D1D1 / Dark: #454545

Scrollbar

Light: #B0B0B0 / Dark: #4F4F4F