Palette

There's a science to color. It's part visual chemistry and part psychology. Balancing both makes for a palette that's a powerful tool for establishing uniqueness.

Brand

The brand color is most frequently used across your UI, and imparts a distinct brand identity to the product. 500 is the base color for all colors, brand-500 represents the primary, brand-300 the secondary and brand-100 the tertiary color. Other brand shades should be used sparingly.

CSS Variable

--q-brand-50

Tailwind Class

*-brand-50

Value

Color

CSS Variable

--q-brand-100

Tailwind Class

*-brand-100

Value

Color

CSS Variable

--q-brand-200

Tailwind Class

*-brand-200

Value

Color

CSS Variable

--q-brand-300

Tailwind Class

*-brand-300

Value

Color

CSS Variable

--q-brand-400

Tailwind Class

*-brand-400

Value

Color

CSS Variable

--q-brand-500

Tailwind Class

*-brand-500

Value

Color

CSS Variable

--q-brand-600

Tailwind Class

*-brand-600

Value

Color

CSS Variable

--q-brand-700

Tailwind Class

*-brand-700

Value

Color

CSS Variable

--q-brand-800

Tailwind Class

*-brand-800

Value

Color

CSS Variable

--q-brand-900

Tailwind Class

*-brand-900

Value

Color

CSS Variable

--q-brand-950

Tailwind Class

*-brand-950

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--q-brand-50`	`*-brand-50`
`--q-brand-100`	`*-brand-100`
`--q-brand-200`	`*-brand-200`
`--q-brand-300`	`*-brand-300`
`--q-brand-400`	`*-brand-400`
`--q-brand-500`	`*-brand-500`
`--q-brand-600`	`*-brand-600`
`--q-brand-700`	`*-brand-700`
`--q-brand-800`	`*-brand-800`
`--q-brand-900`	`*-brand-900`
`--q-brand-950`	`*-brand-950`

Neutral

CSS Variable

--q-neutral-50

Tailwind Class

*-neutral-50

Value

Color

CSS Variable

--q-neutral-100

Tailwind Class

*-neutral-100

Value

Color

CSS Variable

--q-neutral-150

Tailwind Class

*-neutral-150

Value

Color

CSS Variable

--q-neutral-200

Tailwind Class

*-neutral-200

Value

Color

CSS Variable

--q-neutral-250

Tailwind Class

*-neutral-250

Value

Color

CSS Variable

--q-neutral-300

Tailwind Class

*-neutral-300

Value

Color

CSS Variable

--q-neutral-350

Tailwind Class

*-neutral-350

Value

Color

CSS Variable

--q-neutral-400

Tailwind Class

*-neutral-400

Value

Color

CSS Variable

--q-neutral-450

Tailwind Class

*-neutral-450

Value

Color

CSS Variable

--q-neutral-500

Tailwind Class

*-neutral-500

Value

Color

CSS Variable

--q-neutral-550

Tailwind Class

*-neutral-550

Value

Color

CSS Variable

--q-neutral-600

Tailwind Class

*-neutral-600

Value

Color

CSS Variable

--q-neutral-650

Tailwind Class

*-neutral-650

Value

Color

CSS Variable

--q-neutral-700

Tailwind Class

*-neutral-700

Value

Color

CSS Variable

--q-neutral-750

Tailwind Class

*-neutral-750

Value

Color

CSS Variable

--q-neutral-800

Tailwind Class

*-neutral-800

Value

Color

CSS Variable

--q-neutral-850

Tailwind Class

*-neutral-850

Value

Color

CSS Variable

--q-neutral-900

Tailwind Class

*-neutral-900

Value

Color

CSS Variable

--q-neutral-950

Tailwind Class

*-neutral-950

Value

Color

CSS Variable

--q-neutral-1000

Tailwind Class

*-neutral-1000

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--q-neutral-50`	`*-neutral-50`
`--q-neutral-100`	`*-neutral-100`
`--q-neutral-150`	`*-neutral-150`
`--q-neutral-200`	`*-neutral-200`
`--q-neutral-250`	`*-neutral-250`
`--q-neutral-300`	`*-neutral-300`
`--q-neutral-350`	`*-neutral-350`
`--q-neutral-400`	`*-neutral-400`
`--q-neutral-450`	`*-neutral-450`
`--q-neutral-500`	`*-neutral-500`
`--q-neutral-550`	`*-neutral-550`
`--q-neutral-600`	`*-neutral-600`
`--q-neutral-650`	`*-neutral-650`
`--q-neutral-700`	`*-neutral-700`
`--q-neutral-750`	`*-neutral-750`
`--q-neutral-800`	`*-neutral-800`
`--q-neutral-850`	`*-neutral-850`
`--q-neutral-900`	`*-neutral-900`
`--q-neutral-950`	`*-neutral-950`
`--q-neutral-1000`	`*-neutral-1000`

Red

CSS Variable

--q-red-50

Tailwind Class

*-red-50

Value

Color

CSS Variable

--q-red-100

Tailwind Class

*-red-100

Value

Color

CSS Variable

--q-red-200

Tailwind Class

*-red-200

Value

Color

CSS Variable

--q-red-300

Tailwind Class

*-red-300

Value

Color

CSS Variable

--q-red-400

Tailwind Class

*-red-400

Value

Color

CSS Variable

--q-red-500

Tailwind Class

*-red-500

Value

Color

CSS Variable

--q-red-600

Tailwind Class

*-red-600

Value

Color

CSS Variable

--q-red-700

Tailwind Class

*-red-700

Value

Color

CSS Variable

--q-red-800

Tailwind Class

*-red-800

Value

Color

CSS Variable

--q-red-900

Tailwind Class

*-red-900

Value

Color

CSS Variable

--q-red-950

Tailwind Class

*-red-950

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--q-red-50`	`*-red-50`
`--q-red-100`	`*-red-100`
`--q-red-200`	`*-red-200`
`--q-red-300`	`*-red-300`
`--q-red-400`	`*-red-400`
`--q-red-500`	`*-red-500`
`--q-red-600`	`*-red-600`
`--q-red-700`	`*-red-700`
`--q-red-800`	`*-red-800`
`--q-red-900`	`*-red-900`
`--q-red-950`	`*-red-950`

Orange

CSS Variable

--q-orange-50

Tailwind Class

*-orange-50

Value

Color

CSS Variable

--q-orange-100

Tailwind Class

*-orange-100

Value

Color

CSS Variable

--q-orange-200

Tailwind Class

*-orange-200

Value

Color

CSS Variable

--q-orange-300

Tailwind Class

*-orange-300

Value

Color

CSS Variable

--q-orange-400

Tailwind Class

*-orange-400

Value

Color

CSS Variable

--q-orange-500

Tailwind Class

*-orange-500

Value

Color

CSS Variable

--q-orange-600

Tailwind Class

*-orange-600

Value

Color

CSS Variable

--q-orange-700

Tailwind Class

*-orange-700

Value

Color

CSS Variable

--q-orange-800

Tailwind Class

*-orange-800

Value

Color

CSS Variable

--q-orange-900

Tailwind Class

*-orange-900

Value

Color

CSS Variable

--q-orange-950

Tailwind Class

*-orange-950

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--q-orange-50`	`*-orange-50`
`--q-orange-100`	`*-orange-100`
`--q-orange-200`	`*-orange-200`
`--q-orange-300`	`*-orange-300`
`--q-orange-400`	`*-orange-400`
`--q-orange-500`	`*-orange-500`
`--q-orange-600`	`*-orange-600`
`--q-orange-700`	`*-orange-700`
`--q-orange-800`	`*-orange-800`
`--q-orange-900`	`*-orange-900`
`--q-orange-950`	`*-orange-950`

Yellow

CSS Variable

--q-yellow-50

Tailwind Class

*-yellow-50

Value

Color

CSS Variable

--q-yellow-100

Tailwind Class

*-yellow-100

Value

Color

CSS Variable

--q-yellow-200

Tailwind Class

*-yellow-200

Value

Color

CSS Variable

--q-yellow-300

Tailwind Class

*-yellow-300

Value

Color

CSS Variable

--q-yellow-400

Tailwind Class

*-yellow-400

Value

Color

CSS Variable

--q-yellow-500

Tailwind Class

*-yellow-500

Value

Color

CSS Variable

--q-yellow-600

Tailwind Class

*-yellow-600

Value

Color

CSS Variable

--q-yellow-700

Tailwind Class

*-yellow-700

Value

Color

CSS Variable

--q-yellow-800

Tailwind Class

*-yellow-800

Value

Color

CSS Variable

--q-yellow-900

Tailwind Class

*-yellow-900

Value

Color

CSS Variable

--q-yellow-950

Tailwind Class

*-yellow-950

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--q-yellow-50`	`*-yellow-50`
`--q-yellow-100`	`*-yellow-100`
`--q-yellow-200`	`*-yellow-200`
`--q-yellow-300`	`*-yellow-300`
`--q-yellow-400`	`*-yellow-400`
`--q-yellow-500`	`*-yellow-500`
`--q-yellow-600`	`*-yellow-600`
`--q-yellow-700`	`*-yellow-700`
`--q-yellow-800`	`*-yellow-800`
`--q-yellow-900`	`*-yellow-900`
`--q-yellow-950`	`*-yellow-950`

Kiwi

CSS Variable

--q-kiwi-50

Tailwind Class

*-kiwi-50

Value

Color

CSS Variable

--q-kiwi-100

Tailwind Class

*-kiwi-100

Value

Color

CSS Variable

--q-kiwi-200

Tailwind Class

*-kiwi-200

Value

Color

CSS Variable

--q-kiwi-300

Tailwind Class

*-kiwi-300

Value

Color

CSS Variable

--q-kiwi-400

Tailwind Class

*-kiwi-400

Value

Color

CSS Variable

--q-kiwi-500

Tailwind Class

*-kiwi-500

Value

Color

CSS Variable

--q-kiwi-600

Tailwind Class

*-kiwi-600

Value

Color

CSS Variable

--q-kiwi-700

Tailwind Class

*-kiwi-700

Value

Color

CSS Variable

--q-kiwi-800

Tailwind Class

*-kiwi-800

Value

Color

CSS Variable

--q-kiwi-900

Tailwind Class

*-kiwi-900

Value

Color

CSS Variable

--q-kiwi-950

Tailwind Class

*-kiwi-950

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--q-kiwi-50`	`*-kiwi-50`
`--q-kiwi-100`	`*-kiwi-100`
`--q-kiwi-200`	`*-kiwi-200`
`--q-kiwi-300`	`*-kiwi-300`
`--q-kiwi-400`	`*-kiwi-400`
`--q-kiwi-500`	`*-kiwi-500`
`--q-kiwi-600`	`*-kiwi-600`
`--q-kiwi-700`	`*-kiwi-700`
`--q-kiwi-800`	`*-kiwi-800`
`--q-kiwi-900`	`*-kiwi-900`
`--q-kiwi-950`	`*-kiwi-950`

Green

CSS Variable

--q-green-50

Tailwind Class

*-green-50

Value

Color

CSS Variable

--q-green-100

Tailwind Class

*-green-100

Value

Color

CSS Variable

--q-green-200

Tailwind Class

*-green-200

Value

Color

CSS Variable

--q-green-300

Tailwind Class

*-green-300

Value

Color

CSS Variable

--q-green-400

Tailwind Class

*-green-400

Value

Color

CSS Variable

--q-green-500

Tailwind Class

*-green-500

Value

Color

CSS Variable

--q-green-600

Tailwind Class

*-green-600

Value

Color

CSS Variable

--q-green-700

Tailwind Class

*-green-700

Value

Color

CSS Variable

--q-green-800

Tailwind Class

*-green-800

Value

Color

CSS Variable

--q-green-900

Tailwind Class

*-green-900

Value

Color

CSS Variable

--q-green-950

Tailwind Class

*-green-950

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--q-green-50`	`*-green-50`
`--q-green-100`	`*-green-100`
`--q-green-200`	`*-green-200`
`--q-green-300`	`*-green-300`
`--q-green-400`	`*-green-400`
`--q-green-500`	`*-green-500`
`--q-green-600`	`*-green-600`
`--q-green-700`	`*-green-700`
`--q-green-800`	`*-green-800`
`--q-green-900`	`*-green-900`
`--q-green-950`	`*-green-950`

Teal

CSS Variable

--q-teal-50

Tailwind Class

*-teal-50

Value

Color

CSS Variable

--q-teal-100

Tailwind Class

*-teal-100

Value

Color

CSS Variable

--q-teal-200

Tailwind Class

*-teal-200

Value

Color

CSS Variable

--q-teal-300

Tailwind Class

*-teal-300

Value

Color

CSS Variable

--q-teal-400

Tailwind Class

*-teal-400

Value

Color

CSS Variable

--q-teal-500

Tailwind Class

*-teal-500

Value

Color

CSS Variable

--q-teal-600

Tailwind Class

*-teal-600

Value

Color

CSS Variable

--q-teal-700

Tailwind Class

*-teal-700

Value

Color

CSS Variable

--q-teal-800

Tailwind Class

*-teal-800

Value

Color

CSS Variable

--q-teal-900

Tailwind Class

*-teal-900

Value

Color

CSS Variable

--q-teal-950

Tailwind Class

*-teal-950

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--q-teal-50`	`*-teal-50`
`--q-teal-100`	`*-teal-100`
`--q-teal-200`	`*-teal-200`
`--q-teal-300`	`*-teal-300`
`--q-teal-400`	`*-teal-400`
`--q-teal-500`	`*-teal-500`
`--q-teal-600`	`*-teal-600`
`--q-teal-700`	`*-teal-700`
`--q-teal-800`	`*-teal-800`
`--q-teal-900`	`*-teal-900`
`--q-teal-950`	`*-teal-950`

Blue

CSS Variable

--q-blue-50

Tailwind Class

*-blue-50

Value

Color

CSS Variable

--q-blue-100

Tailwind Class

*-blue-100

Value

Color

CSS Variable

--q-blue-200

Tailwind Class

*-blue-200

Value

Color

CSS Variable

--q-blue-300

Tailwind Class

*-blue-300

Value

Color

CSS Variable

--q-blue-400

Tailwind Class

*-blue-400

Value

Color

CSS Variable

--q-blue-500

Tailwind Class

*-blue-500

Value

Color

CSS Variable

--q-blue-600

Tailwind Class

*-blue-600

Value

Color

CSS Variable

--q-blue-700

Tailwind Class

*-blue-700

Value

Color

CSS Variable

--q-blue-800

Tailwind Class

*-blue-800

Value

Color

CSS Variable

--q-blue-900

Tailwind Class

*-blue-900

Value

Color

CSS Variable

--q-blue-950

Tailwind Class

*-blue-950

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--q-blue-50`	`*-blue-50`
`--q-blue-100`	`*-blue-100`
`--q-blue-200`	`*-blue-200`
`--q-blue-300`	`*-blue-300`
`--q-blue-400`	`*-blue-400`
`--q-blue-500`	`*-blue-500`
`--q-blue-600`	`*-blue-600`
`--q-blue-700`	`*-blue-700`
`--q-blue-800`	`*-blue-800`
`--q-blue-900`	`*-blue-900`
`--q-blue-950`	`*-blue-950`

Purple

CSS Variable

--q-purple-50

Tailwind Class

*-purple-50

Value

Color

CSS Variable

--q-purple-100

Tailwind Class

*-purple-100

Value

Color

CSS Variable

--q-purple-200

Tailwind Class

*-purple-200

Value

Color

CSS Variable

--q-purple-300

Tailwind Class

*-purple-300

Value

Color

CSS Variable

--q-purple-400

Tailwind Class

*-purple-400

Value

Color

CSS Variable

--q-purple-500

Tailwind Class

*-purple-500

Value

Color

CSS Variable

--q-purple-600

Tailwind Class

*-purple-600

Value

Color

CSS Variable

--q-purple-700

Tailwind Class

*-purple-700

Value

Color

CSS Variable

--q-purple-800

Tailwind Class

*-purple-800

Value

Color

CSS Variable

--q-purple-900

Tailwind Class

*-purple-900

Value

Color

CSS Variable

--q-purple-950

Tailwind Class

*-purple-950

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--q-purple-50`	`*-purple-50`
`--q-purple-100`	`*-purple-100`
`--q-purple-200`	`*-purple-200`
`--q-purple-300`	`*-purple-300`
`--q-purple-400`	`*-purple-400`
`--q-purple-500`	`*-purple-500`
`--q-purple-600`	`*-purple-600`
`--q-purple-700`	`*-purple-700`
`--q-purple-800`	`*-purple-800`
`--q-purple-900`	`*-purple-900`
`--q-purple-950`	`*-purple-950`

Fuchsia

CSS Variable

--q-fuchsia-50

Tailwind Class

*-fuchsia-50

Value

Color

CSS Variable

--q-fuchsia-100

Tailwind Class

*-fuchsia-100

Value

Color

CSS Variable

--q-fuchsia-200

Tailwind Class

*-fuchsia-200

Value

Color

CSS Variable

--q-fuchsia-300

Tailwind Class

*-fuchsia-300

Value

Color

CSS Variable

--q-fuchsia-400

Tailwind Class

*-fuchsia-400

Value

Color

CSS Variable

--q-fuchsia-500

Tailwind Class

*-fuchsia-500

Value

Color

CSS Variable

--q-fuchsia-600

Tailwind Class

*-fuchsia-600

Value

Color

CSS Variable

--q-fuchsia-700

Tailwind Class

*-fuchsia-700

Value

Color

CSS Variable

--q-fuchsia-800

Tailwind Class

*-fuchsia-800

Value

Color

CSS Variable

--q-fuchsia-900

Tailwind Class

*-fuchsia-900

Value

Color

CSS Variable

--q-fuchsia-950

Tailwind Class

*-fuchsia-950

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--q-fuchsia-50`	`*-fuchsia-50`
`--q-fuchsia-100`	`*-fuchsia-100`
`--q-fuchsia-200`	`*-fuchsia-200`
`--q-fuchsia-300`	`*-fuchsia-300`
`--q-fuchsia-400`	`*-fuchsia-400`
`--q-fuchsia-500`	`*-fuchsia-500`
`--q-fuchsia-600`	`*-fuchsia-600`
`--q-fuchsia-700`	`*-fuchsia-700`
`--q-fuchsia-800`	`*-fuchsia-800`
`--q-fuchsia-900`	`*-fuchsia-900`
`--q-fuchsia-950`	`*-fuchsia-950`

Magenta

CSS Variable

--q-magenta-50

Tailwind Class

*-magenta-50

Value

Color

CSS Variable

--q-magenta-100

Tailwind Class

*-magenta-100

Value

Color

CSS Variable

--q-magenta-200

Tailwind Class

*-magenta-200

Value

Color

CSS Variable

--q-magenta-300

Tailwind Class

*-magenta-300

Value

Color

CSS Variable

--q-magenta-400

Tailwind Class

*-magenta-400

Value

Color

CSS Variable

--q-magenta-500

Tailwind Class

*-magenta-500

Value

Color

CSS Variable

--q-magenta-600

Tailwind Class

*-magenta-600

Value

Color

CSS Variable

--q-magenta-700

Tailwind Class

*-magenta-700

Value

Color

CSS Variable

--q-magenta-800

Tailwind Class

*-magenta-800

Value

Color

CSS Variable

--q-magenta-900

Tailwind Class

*-magenta-900

Value

Color

CSS Variable

--q-magenta-950

Tailwind Class

*-magenta-950

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--q-magenta-50`	`*-magenta-50`
`--q-magenta-100`	`*-magenta-100`
`--q-magenta-200`	`*-magenta-200`
`--q-magenta-300`	`*-magenta-300`
`--q-magenta-400`	`*-magenta-400`
`--q-magenta-500`	`*-magenta-500`
`--q-magenta-600`	`*-magenta-600`
`--q-magenta-700`	`*-magenta-700`
`--q-magenta-800`	`*-magenta-800`
`--q-magenta-900`	`*-magenta-900`
`--q-magenta-950`	`*-magenta-950`

Overview

Font