Colors

gray

var(--pgn-color-gray-100)

var(--pgn-color-gray-200)

var(--pgn-color-gray-300)

var(--pgn-color-gray-400)

var(--pgn-color-gray-500)

var(--pgn-color-gray-600)

var(--pgn-color-gray-700)

var(--pgn-color-gray-800)

var(--pgn-color-gray-900)

primary

var(--pgn-color-primary-100)

var(--pgn-color-primary-200)

var(--pgn-color-primary-300)

var(--pgn-color-primary-400)

var(--pgn-color-primary-500)

var(--pgn-color-primary-600)

var(--pgn-color-primary-700)

var(--pgn-color-primary-800)

var(--pgn-color-primary-900)

brand

var(--pgn-color-brand-100)

var(--pgn-color-brand-200)

var(--pgn-color-brand-300)

var(--pgn-color-brand-400)

var(--pgn-color-brand-500)

var(--pgn-color-brand-600)

var(--pgn-color-brand-700)

var(--pgn-color-brand-800)

var(--pgn-color-brand-900)

light

var(--pgn-color-light-100)

var(--pgn-color-light-200)

var(--pgn-color-light-300)

var(--pgn-color-light-400)

var(--pgn-color-light-500)

var(--pgn-color-light-600)

var(--pgn-color-light-700)

var(--pgn-color-light-800)

var(--pgn-color-light-900)

dark

var(--pgn-color-dark-100)

var(--pgn-color-dark-200)

var(--pgn-color-dark-300)

var(--pgn-color-dark-400)

var(--pgn-color-dark-500)

var(--pgn-color-dark-600)

var(--pgn-color-dark-700)

var(--pgn-color-dark-800)

var(--pgn-color-dark-900)

success

var(--pgn-color-success-100)

var(--pgn-color-success-200)

var(--pgn-color-success-300)

var(--pgn-color-success-400)

var(--pgn-color-success-500)

var(--pgn-color-success-600)

var(--pgn-color-success-700)

var(--pgn-color-success-800)

var(--pgn-color-success-900)

info

var(--pgn-color-info-100)

var(--pgn-color-info-200)

var(--pgn-color-info-300)

var(--pgn-color-info-400)

var(--pgn-color-info-500)

var(--pgn-color-info-600)

var(--pgn-color-info-700)

var(--pgn-color-info-800)

var(--pgn-color-info-900)

danger

var(--pgn-color-danger-100)

var(--pgn-color-danger-200)

var(--pgn-color-danger-300)

var(--pgn-color-danger-400)

var(--pgn-color-danger-500)

var(--pgn-color-danger-600)

var(--pgn-color-danger-700)

var(--pgn-color-danger-800)

var(--pgn-color-danger-900)

warning

var(--pgn-color-warning-100)

var(--pgn-color-warning-200)

var(--pgn-color-warning-300)

var(--pgn-color-warning-400)

var(--pgn-color-warning-500)

var(--pgn-color-warning-600)

var(--pgn-color-warning-700)

var(--pgn-color-warning-800)

var(--pgn-color-warning-900)

accents

var(--pgn-color-accent-a)

var(--pgn-color-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`

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

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

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

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-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-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

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

Edit this page Leave feedback

Paragon Design System

Theme