Skip to main content

Interface: PaletteColor

A set of color variants for a specific color category.

PaletteColor defines a color with its main value along with light and dark variations for different emphasis levels or interaction states. This structure provides a consistent way to represent color families used throughout the interface.

Systematized color variants ensure appropriate contrast and visual hierarchy while maintaining design consistency across different interface components.

Indexable​

[key: string | number]: string

Additional color variants indexed by name or number.

Allows for extended color variants beyond the standard main/dark/light system. This can include custom variants for specific interface elements or states.

Properties​

dark​

dark: string

A darker variant of this color.

Typically used for hover or active states, or to create contrast with the main color. Dark variants are often used for pressed states of buttons or to indicate active selections.

light​

light: string

A lighter variant of this color.

Typically used for backgrounds, disabled states, or to create subtle variations within a color family. Light variants provide lower emphasis while maintaining the color identity.

main​

main: string

The primary variant of this color.

This is the standard, default version of the color used in most cases. It serves as the reference point for creating light and dark variants and should have appropriate contrast against background colors.