Palette (VCP)
Special class name(s) created: .xxx
.BRS- Color utility classes applicable to texts and backgrounds. Includes support for styling links with hover states, too.
Convention shade suffixes from -200
to -900
where -500
is the main one.
If you need lighter version of the colors remeber always reference them with their rgb code to handle opcaity: color: rgba(67, 147, 189, 0.2);
This syntax sample represents a 20% opacity/transparency of our "CuriousBlue" color.
Swatches
Midnight
- Midnight Blue
- brs-midnight
- 8
-
.text-brs-midnight
-*
.bg-brs-midnight-*
.bg-gradient-brs-midnight-*
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 200 Text Sample
- 300 Text Sample
- 400 Text Sample
- 500 Text Sample
- 600 Text Sample
- 700 Text Sample
- 800 Text Sample
- 900 Text Sample
Sea
- Sea Green
- brs-sea
- 8
-
.text-brs-sea
-*
.bg-brs-sea-*
.bg-gradient-brs-sea-*
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 200
- 200
- 200
- 200
- 200
- 200
- 200
- 200
- 200 Text Sample
- 300 Text Sample
- 400 Text Sample
- 500 Text Sample
- 600 Text Sample
- 700 Text Sample
- 800 Text Sample
- 900 Text Sample
- 200 200 Text Link
- 300 300Text Link
- 400 400 Text Link
- 500 500 Text Link
- 600 600 Text Link
- 700 700 Text Link
- 800 800 Text Link
- 900 900 Text Link
Golden
- Golden Yellow
- brs-golden
- 8
-
.text-brs-golden
-*
.bg-brs-golden-*
.bg-gradient-brs-golden-*
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 200 Text Sample
- 300 Text Sample
- 400 Text Sample
- 500 Text Sample
- 600 Text Sample
- 700 Text Sample
- 800 Text Sample
- 900 Text Sample
Coral
- Coral Red
- brs-coral
- 8
-
.text-brs-coral
-*
.bg-brs-coral-*
.bg-gradient-brs-coral-*
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 200 Text Sample
- 300 Text Sample
- 400 Text Sample
- 500 Text Sample
- 600 Text Sample
- 700 Text Sample
- 800 Text Sample
- 900 Text Sample