Colors

gray

gray-100

gray-200

gray-300

gray-400

gray-500

gray-600

gray-700

gray-800

gray-900

primary

primary-100

primary-200

primary-300

primary-400

primary-500

primary-600

primary-700

primary-800

primary-900

brand

brand-100

brand-200

brand-300

brand-400

brand-500

brand-600

brand-700

brand-800

brand-900

light

light-100

light-200

light-300

light-400

light-500

light-600

light-700

light-800

light-900

dark

dark-100

dark-200

dark-300

dark-400

dark-500

dark-600

dark-700

dark-800

dark-900

success

success-100

success-200

success-300

success-400

success-500

success-600

success-700

success-800

success-900

info

info-100

info-200

info-300

info-400

info-500

info-600

info-700

info-800

info-900

danger

danger-100

danger-200

danger-300

danger-400

danger-500

danger-600

danger-700

danger-800

danger-900

warning

warning-100

warning-200

warning-300

warning-400

warning-500

warning-600

warning-700

warning-800

warning-900

accent

accent-a

accent-b

CSS Color Usage

Variable name

// var(--pgn-color-name-level) 
var(--pgn-color-primary-100)
var(--pgn-color-primary-200)
var(--pgn-color-brand-100)
var(--pgn-color-brand-200)

With default value

Using a default value in CSS variables allows to set a default value for a variable, which will be used if the primary value of the variable is not defined or not available.

// var(--pgn-color-name-level), default variable 
var(--pgn-color-brand-100, var(--pgn-color-primary-200))

CSS Class Utilities

Utility classes for backgrounds, borders, and text colors follow the format below:

.{use}-{color}-{level}

Use	Color	Level
`bg`	`gray`	`100`
`border`	`primary`	`200`
`text`	`brand`	`300`
	`light`	`400`
	`dark`	`500`
	`success`	`600`
	`info`	`700`
	`danger`	`800`
	`warning`	`900`
	`accent`

Background Fills

.bg-gray-100

.bg-primary-100

.bg-brand-100

.bg-light-100

.bg-dark-100

.bg-success-100

.bg-info-100

.bg-danger-100

.bg-warning-100

.bg-accent-100

Borders & Lines

.border-gray-200

.border-primary-200

.border-brand-200

.border-light-200

.border-dark-200

.border-success-200

.border-info-200

.border-danger-200

.border-warning-200

.border-accent-200

Icons & Semantic Lines

.border-gray-300

.border-primary-300

.border-brand-300

.border-light-300

.border-dark-300

.border-success-300

.border-info-300

.border-danger-300

.border-warning-300

.border-accent-300

Text

Color levels 500 and above are accessible on white and 100 level backgrounds.

Lighter Text

Regular Text

Darker Text

.text-gray-500.text-primary-500.text-brand-500.text-light-500.text-dark-500.text-success-500.text-info-500.text-danger-500.text-warning-500.text-accent-500

.text-gray-700.text-primary-700.text-brand-700.text-light-700.text-dark-700.text-success-700.text-info-700.text-danger-700.text-warning-700.text-accent-700

.text-gray-900.text-primary-900.text-brand-900.text-light-900.text-dark-900.text-success-900.text-info-900.text-danger-900.text-warning-900.text-accent-900

Element Fills

Buttons or other interactive elements.

Default State

Hover State

Active State

.bg-gray-500

.bg-gray-700

.bg-gray-900

.bg-primary-500

.bg-primary-700

.bg-primary-900

.bg-brand-500

.bg-brand-700

.bg-brand-900

.bg-light-500

.bg-light-700

.bg-light-900

.bg-dark-500

.bg-dark-700

.bg-dark-900

.bg-success-500

.bg-success-700

.bg-success-900

.bg-info-500

.bg-info-700

.bg-info-900

.bg-danger-500

.bg-danger-700

.bg-danger-900

.bg-accent-500

.bg-accent-700

.bg-accent-900

Edit this page Leave feedback

Paragon Design System