Colors

Color system built out of main brand colors and adjusted for variety of interfaces.

Icon for hero-colors

Primary Colors

Colors that are used most frequently across all pages and components.

Berxi Navy
Value: #0e2c51Blend: normalSass: $color-primary-berxi-navy
Berxi Blue
Value: #297dadBlend: normalSass: $color-primary-berxi-blue
Berxi CTA Orange
Value: #c25100Blend: normalSass: $color-primary-berxi-cta-orange
Berxi Dark Navy
Value: #001f43Blend: normalSass: $color-primary-berxi-dark-navy
Berxi Cyan
Value: #0aa0ccBlend: normalSass: $color-primary-berxi-cyan
Berxi Tint 1
Value: #4ac1e0Blend: normalSass: $color-primary-berxi-tint-1
Berxi Tint 2
Value: #a2d9e7Blend: normalSass: $color-primary-berxi-tint-2
Berxi Tint 3
Value: #c2e7f2Blend: normalSass: $color-primary-berxi-tint-3
Berxi Tint 4
Value: #d0ecf3Blend: normalSass: $color-primary-berxi-tint-4
Berxi Blue Tint 3
Value: #c9deeaBlend: normalSass: $color-primary-berxi-blue-tint-3
Berxi Blue Tint 4
Value: #f1f9fbBlend: normalSass: $color-primary-berxi-blue-tint-4
Berxi Light Navy
Value: #03669fBlend: normalSass: $color-primary-berxi-light-navy

Secondary Colors

Colors that are used most frequently across all pages and components.

Berxi Green Tint 2
Value: #b5dbd2Blend: normalSass: $color-secondary-berxi-green-tint-2
Berxi Green Tint 1
Value: #80c7bcBlend: normalSass: $color-secondary-berxi-green-tint-1
Berxi Mint
Value: #00a98fBlend: normalSass: $color-secondary-berxi-mint
Berxi Green
Value: #008375Blend: normalSass: $color-secondary-berxi-green
Berxi Forest
Value: #00615cBlend: normalSass: $color-secondary-berxi-forest
Berxi Dark Forest
Value: #153e35Blend: normalSass: $color-secondary-berxi-dark-forest
Dark Orange
Value: #d6832bBlend: normalSass: $color-secondary-dark-orange
Marigold
Value: #e8b860Blend: normalSass: $color-secondary-marigold
Yellow
Value: #f0d283Blend: normalSass: $color-secondary-yellow
Palest Amber
Value: #f7e9c1Blend: normalSass: $color-secondary-palest-amber
Limited Use Red
Value: #ee4a2dBlend: normalSass: $color-secondary-limited-use-red
Limited Use Pink
Value: #e5a9b9Blend: normalSass: $color-secondary-limited-use-pink

Extra Colors

Colors that are used most frequently across all pages and components.

Info
Value: #0aa0ccBlend: normalSass: $color-extra-info
Success
Value: #008375Blend: normalSass: $color-extra-success
Warning
Value: #e8b860Blend: normalSass: $color-extra-warning
Danger
Value: #d42f13Blend: normalSass: $color-extra-danger
Danger - darker
Value: #c32b3aBlend: normalSass: $color-extra-danger-darker
Danger - lighter
Value: #f35d6cBlend: normalSass: $color-extra-danger-lighter
Error - Lighter
Value: #faccc4Blend: normalSass: $color-extra-error-lighter
Error - Lightest
Value: #fef8f7Blend: normalSass: $color-extra-error-lightest
Input Blue
Value: #3b82f6Blend: normalSass: $color-extra-input-blue

Border Colors

Colors that are used most frequently across all pages and components.

Base
Value: #e8e8e8Blend: normalSass: $color-border-base
Dark
Value: #b3b3b3Blend: normalSass: $color-border-dark
Darker
Value: #929292Blend: normalSass: $color-border-darker
Darkest
Value: rgba(0, 0, 0, .6)Blend: normalSass: $color-border-darkest
Invert
Value: rgba(200, 200, 200, .2)Blend: normalSass: $color-border-invert
Light
Value: rgba(200, 200, 200, .4)Blend: normalSass: $color-border-light
Lighter
Value: rgba(255, 255, 255, .4)Blend: normalSass: $color-border-lighter
Lightest
Value: rgba(255, 255, 255, .75)Blend: normalSass: $color-border-lightest
Blue
Value: #2563ebBlend: normalSass: $color-border-blue

Neutral Colors

Colors that are used most frequently across all pages and components.

White
Value: #ffffffBlend: normalSass: $color-neutral-white
Gray 100
Value: #f8f8f8Blend: normalSass: $color-neutral-gray-100
Gray 200
Value: #e5e5e5Blend: normalSass: $color-neutral-gray-200
Gray 300
Value: #ccccccBlend: normalSass: $color-neutral-gray-300
Gray 400
Value: #aaaaaaBlend: normalSass: $color-neutral-gray-400
Gray 500
Value: #888888Blend: normalSass: $color-neutral-gray-500
Gray 600
Value: #6e6e6eBlend: normalSass: $color-neutral-gray-600
Gray 700
Value: #555555Blend: normalSass: $color-neutral-gray-700
Gray 800
Value: #333333Blend: normalSass: $color-neutral-gray-800
Gray 900
Value: #191919Blend: normalSass: $color-neutral-gray-900
Black
Value: #000000Blend: normalSass: $color-neutral-black
Transparent
Value: rgba(0, 0, 0, 0)Blend: normalSass: $color-neutral-transparent
Dark Grey
Value: #54565aBlend: normalSass: $color-neutral-dark-grey
Medium Grey
Value: #76777aBlend: normalSass: $color-neutral-medium-grey
UX UI Neutral 1
Value: #827363Blend: normalSass: $color-neutral-ux-ui-neutral-1
Light Grey
Value: #cbc3bbBlend: normalSass: $color-neutral-light-grey
Lighter Grey
Value: #e5e1ddBlend: normalSass: $color-neutral-lighter-grey
Lightest Grey
Value: #f2f0eeBlend: normalSass: $color-neutral-lightest-grey
UX UI Neutral 2
Value: #fefdfdBlend: normalSass: $color-neutral-ux-ui-neutral-2

Text Colors

Colors that are used most frequently across all pages and components.

Hard
Value: #001f43Blend: normalSass: $color-text-hard
Base
Value: #001f43Blend: normalSass: $color-text-base
Soft
Value: #555555Blend: normalSass: $color-text-soft
Muted
Value: #777777Blend: normalSass: $color-text-muted
Hard [invert]
Value: #ffffffBlend: normalSass: $color-text-hard-invert
Base [invert]
Value: rgba(255, 255, 255, .85)Blend: normalSass: $color-text-base-invert
Soft [invert]
Value: rgba(255, 255, 255, .65)Blend: normalSass: $color-text-soft-invert
Muted [invert]
Value: rgba(255, 255, 255, .45)Blend: normalSass: $color-text-muted-invert