Primary colors

Primary

Class: .color-primary
Variable: --color-p2
HEX: #
RGB:

Highlight

Class: .color-highlight
Variable: --color-p1
HEX: #
RGB:

Standout

Class: .color-standout
Variable: --color-p3
HEX: #
RGB:

Secondary colors

Secondary 1

Class: .color-s1
Variable: --color-s1
HEX: #
RGB:

Secondary 2

Class: .color-s2
Variable: --color-s2
HEX: #
RGB:

Secondary 3

Class: .color-s3
Variable: --color-s3
HEX: #
RGB:

Samples

Light background

Link grid

Short link 1
Short link 2
Short link 3

Buttons

Default
.btn-default .btn-primary .btn-highlight .btn-standout .btn-secondary
Hover
.btn-default.active .btn-primary.active .btn-highlight.active .btn-standout.active .btn-secondary.active

Cards

Card (Overstated)

button
Card Body

Card (Standout)

button
Card Body

Dark background

Link grid

Short link 1
Short link 2
Short link 3

Buttons

Default
.btn-default .btn-primary .btn-highlight .btn-standout .btn-secondary
Hover
.btn-default.active .btn-primary.active .btn-highlight.active .btn-standout.active .btn-secondary.active

Cards

Card (Overstated)

button
Card Body

Card (Standout)

button
Card Body