Color palette
The FEC needed a defined color palette that was distinctly American, but avoided the partisan politcal connotations that are also associated with reds and blues. To accomplish this, the palette is used scientifically. To use both colors equally, the information architecture of the site is color coded: each major branch of the site is designed with deep blue accents, or deep red accents.
The deep blues and reds are matched with bright complements to create a modern sense of gravitas. These pairs are also used scientifically, and blend only for illustrations of infographics.
Grey and white pair in equal amounts with the red and blue to make versatile neutral space and features. They are the core design colors of the system, accentuated by the blue and red palettes.
Federal blue pairs with aqua
The colors between are used to demonstrate interaction state changes
Crimson pairs with orange
The colors between are used to demonstrate interaction state changes
White and gray pair with a dark base
The grays between are used to demonstrate interaction state changes
.neutral, .gray-lightest
#F1F1F1
Color pairings: text and icons
The colors in this system are used in specific combinations. The background color determines the color of the text, link text, and icons.
White backgrounds use black main and accent text, federal blue icon containers, and white icon fills.
.inverse
#FFFFFF
.base
#212121
.base
#212121
background: .federal blue
image: .inverse
Federal blue backgrounds use white main text, aqua accent text, white icon containers, and aqua icon fills.
.federal-blue
#112E51
.inverse
#FFFFFF
.aqua
#35BDBB
background: .inverse
image: .aqua
Crimson backgrounds use white main text, orange accent text, white icon containers, and orange icon fills.
.crimson
#631010
.inverse
#FFFFFF
.orange
#F77B42
background: .inverse
image: .orange
Lightest gray (or neutral) backgrounds use black main and accent text, federal blue icon containers, and white icon fills.
.neutral, .gray-lightest
#F1F1F1
.base
#212121
.base
#212121
background: .federal blue
image: .inverse