PandaGo Components

Appearance

Return to top
On this page

Colors

For the best experience, we recommend using the colors from the palette below.

They are carefully chosen to be used with the Panda Components.

Usage

primary-0
primary-1
primary-2
primary-3
primary-4
primary-5
primary-6
primary-7
primary-8
primary-9
primary-10
primary-11
secondary-0
secondary-1
secondary-2
secondary-3
secondary-4
secondary-5
secondary-6
secondary-7
secondary-8
secondary-9
secondary-10
secondary-11
grayscale-0
grayscale-1
grayscale-2
grayscale-3
grayscale-4
grayscale-5
grayscale-6
grayscale-7
grayscale-8
grayscale-9
grayscale-10
grayscale-11
semantic-green-0
semantic-green-1
semantic-green-2
semantic-green-3
semantic-green-4
semantic-green-5
semantic-green-6
semantic-green-7
semantic-green-8
semantic-green-9
semantic-green-10
semantic-green-11
semantic-yellow-0
semantic-yellow-1
semantic-yellow-2
semantic-yellow-3
semantic-yellow-4
semantic-yellow-5
semantic-yellow-6
semantic-yellow-7
semantic-yellow-8
semantic-yellow-9
semantic-yellow-10
semantic-yellow-11
semantic-red-0
semantic-red-1
semantic-red-2
semantic-red-3
semantic-red-4
semantic-red-5
semantic-red-6
semantic-red-7
semantic-red-8
semantic-red-9
semantic-red-10
semantic-red-11
semantic-blue-0
semantic-blue-1
semantic-blue-2
semantic-blue-3
semantic-blue-4
semantic-blue-5
semantic-blue-6
semantic-blue-7
semantic-blue-8
semantic-blue-9
semantic-blue-10
semantic-blue-11

You can access these colors by using the CSS variables.

--panda-color-primary-<0-11>
--panda-color-secondary-<0-11>
--panda-color-grayscale-<0-11>

--panda-color-semantic-green-<0-11>
--panda-color-semantic-yellow-<0-11>
--panda-color-semantic-red-<0-11>
--panda-color-semantic-blue-<0-11>

First three are the actual brand colors, while the semantic ones are supposed to be used for specific purposes, like success, warning, error, and info states.