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': '#686868',
        '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-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: Default

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: #686868 / Dark: #B0B0B0

Disabled

Light: #9E9E9E / Dark: #6D6D6D

Contrast

Light: #FFFFFF / Dark: #000000

Accent Colors

Main

Light: #EEAE03 / Dark: #FFCD29

Dark

#CE8602

Light

#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: #E74C4C

Dark

Light: #A82121 / Dark: #B22323

Light

#F27777

Warning

Main

Light: #EF6C00 / Dark: #FF8C0A

Dark

Light: #A84600 / Dark: #CC5302

Light

#FFA732

Info

Main

Light: #0087D4 / Dark: #00AFFF

Dark

#006BAB

Light

#2CC1FF

Success

Main

Light: #328736 / Dark: #42A547

Dark

#2A6B2D

Light

#67C16B

Background Colors

Default

Light: #E8E8E8 / Dark: #262626

Accent 100

Light: #F1F1F1 / Dark: #333333

Accent 200

Light: #F7F7F7 / Dark: #454545

Accent 300

Light: #FFFFFF / Dark: #4F4F4F

Action Colors

Active

Hover

Selected

Disabled

Miscellaneous

Divider

Light: #D1D1D1 / Dark: #404040

Scrollbar

Light: #B0B0B0 / Dark: #4F4F4F

Color Palette: Forest

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

Text Colors

Primary

Light: #1C2213 / Dark: #D9E5C7

Secondary

Light: #515E3C / Dark: #9DAA85

Disabled

Light: #8A9670 / Dark: #6D7956

Contrast

Light: #FFFFFF / Dark: #000000

Accent Colors

Main

Light: #1C2213 / Dark: #E7ECDA

Dark

Light: #2A331E / Dark: #D6DEC3

Light

Light: #3A472B / Dark: #F2F5EA

Contrast

Light: #E7ECDA / Dark: #1C2213

Primary Colors

Main

Light: #454545 / Dark: #D5D5D5

Dark

Light: #262626 / Dark: #E9E9E9

Light

Light: #888888 / Dark: #9A9A9A

Secondary Colors

Main

#6E7A5A

Dark

#5D6849

Light

#828D6B

Semantic Colors

Error

Main

Light: #D32F2F / Dark: #E74C4C

Dark

Light: #A82121 / Dark: #B22323

Light

#F27777

Warning

Main

Light: #EF6C00 / Dark: #FF8C0A

Dark

Light: #A84600 / Dark: #CC5302

Light

#FFA732

Info

Main

Light: #0087D4 / Dark: #00AFFF

Dark

#006BAB

Light

#2CC1FF

Success

Main

Light: #328736 / Dark: #42A547

Dark

#2A6B2D

Light

#67C16B

Background Colors

Default

Light: #D9E5C7 / Dark: #1C2213

Accent 100

Light: #E2ECD4 / Dark: #27301B

Accent 200

Light: #EBF1E0 / Dark: #364228

Accent 300

Light: #F4F7EC / Dark: #424F34

Action Colors

Active

Hover

Selected

Disabled

Miscellaneous

Divider

Light: #D1D1D1 / Dark: #404040