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

accents

$accent-a

$accent-b

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

SCSS Color Usage

Include these colors in scss files in one of two ways:

Variable name

// $color_name-level 
$primary-100
$primary-200
$brand-100
$brand-200

Mixin (deprecated)

theme-color($color-name, $variant)

Using the variable name instead of the theme-color mixin will make later upgrade paths easier. Paragon may begin to adopt CSS variables for theming and attempt to eliminate mixins from the public api.

Color Name A theme color	`grayprimarybrandlightdarksuccessinfodangerwarning`
Variant A number level or element type	Levels `100200300400500600700800900` Element types `backgrounddisabled-borderbordericonactive-borderfocusgraphicdefaultlight-texthovertextactivedark-text`

Example

border: solid 1px $gray-300;border: solid 1px theme-color(“gray”, “border”);border: solid 1px theme-color(“gray”, 300);

CSS Class Utilties

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

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

Use	Color	Level
`bg-` `border-` `text-`	`gray-primary-brand-light-dark-success-info-danger-warning-`	`100200300400500600700800900`

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