Colors

This palette is designed to create a consistent look and feel across products. The palette is influenced by the official Department of Homeland Security brand colors, with bright saturated tints of blue and red, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should aid users in ease of use and quick navigation. This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Attention - Adherence to 508 Accessibility policies is the responsibility of the application team. We are continually working to ensure the CBP Theme meets established 508 guidelines; however, each application must perform an official assessment with a DHS 508 Trusted Tester before launching your application into production.


Color Palettes

Primary Color Palette

These are the primary colors used for Common Framework UI elements. The primary colors have semantic meanings associated with them.

@brand-primary
#00416A
@brand-success
#008000
@brand-info
#1460AA
@brand-warning
#F09511
@brand-danger
#A00000

Subtle Color Palette

These are the subtle colors used for Common Framework UI elements. The subtle colors have semantic meanings associated with them.

@state-primary-bg
#ECF1F4
@state-success-bg
#ECF5EC
@state-info-bg
#EDF3F9
@state-warning-bg
#FEF7ED
@state-danger-bg
#F8ECEC

Gray Color Palette

@gray-darker
#222222
@gray-dark
#333333
@gray
#555555
@gray-medium
#808080
@gray-light
#AAAAAA
@gray-lighter
#EEEEEE
@gray-lightest
#F6F6F6
 

 

Section 508 Color Combinations

This color combination palette provides examples of 508-approved and illegal text-to-color patterns.

#00416a
approved
#00416a
#008000
approved
#008000
#1460AA
approved
#1460AA
#F09511
illegal
#F09511
#A00000
approved
#A00000
#333333
approved
#00416a
#333333
approved
#008000
#333333
approved
#1460AA
#333333
approved
#F09511
#333333
approved
#A00000
#FFFFFF
approved
#00416a
#FFFFFF
approved
#008000
#FFFFFF
approved
#1460AA
#FFFFFF
illegal
#F09511
#FFFFFF
approved
#A00000
#95D9FF
approved
#00416a
#C1E8B0
illegal
#008000
#95D9FF
illegal
#1460AA
#F3E69C
illegal
#F09511
#FAB2AA
approved
#A00000
#333333
approved
#F09511

 

Data Visualization Palette

This palette is made up of primary and supplementary colors to be used in data visualizations such as charts and graphs.

#600000
#A00000
#E00000
#FAB2AA
#003865
#004C97
#009CDE
#95D9FF
#134D13
#008000
#1BAB00
#C1E8B0
#3C1053
#671E75
#BB16A3
#C9B1D0
#A36900
#F09511
#F3CE37
#F3E69C
#000000
#63666A
#A7A8AA
#D9D9D6