Colors

The appearance of different hues, shades, tints and tones an object may produce as a result of how the object absorbs, reflects or emits light.

Brand

The GEL uses BNSF Railway's brand orange, along with a complementary blue, to communicate brand identity.

Primary

The GEL uses the brand's primary color as the key color for all components. #008291

.text-primary
.bg-primary

Accent

The GEL uses the brand's accent color as the conservativly used accent color. #f85d13

.text-accent
.bg-accent

Contextual Alternatives

The GEL provides a set of colors which have the same contextual meaning globally.

Information

Call the user's attention to an element with the information color. #007dc6

.text-info
.bg-info

Success

Call the user's attention to constructive operations and successful feedback with the success color. #0ea80e

.text-success
.bg-success

Warning

Call the user's attention to potential problems with the warning color. #f7b512

.text-warning
.bg-warning

Danger

Call the user's attention to destructive operations, errors, and feedback on invalidities with the danger color. #c40000

.text-danger
.bg-danger

Backgrounds

The GEL provides a set of classes to control background color.

Banner

GEL uses a dark color for all banner/navbar backgrounds.

.bg-banner

Card / Whiteframe

Card / whiteframe colored background.

.whiteframe

Flat

Flat components have a transparent background.

.bg-flat

Default

Default background color.

.bg-default

Palette

The GEL defines a full color palette.

Opt-in

Use of the full color palette requires an additional CSS file:

<link rel="stylesheet" href="https://bnsfweb.bnsf.com/gel/releases/3.latest/css/gel-palette.min.css" media="screen">

Accessibility

Please consult your UX Architect before using arbitrary color combinations.

Accidental misuse of color can render applications unusable by individuals who are color blind.

Additionally, some text/background color combinations can cause eye strain for all users.

Usage

Style text using the .text-[color]-[intensity] class.

Style background using the .bg-[color]-[intensity] class.

Usage example

Given the color teal and the intensity 500:

The .text- class would be .text-teal-500, giving Hello, world!

The .bg- class would be .bg-teal-500, giving Hello, world!

Orange
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
Black
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
Teal
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
Blue
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
Information
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
Success
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
Warning
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
Danger
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
Third-party Content Disclaimer