Our color palette is essential to our brand identity, providing a consistent and visually appealing experience across all digital touchpoints. Carefully curated for contrast and harmony, our primary, secondary, and accent colors enhance readability and usability. By following these guidelines, you ensure every piece of content is both engaging and on-brand.
The brand has four primary colors.
#002BFF
--bt1d--color--blue
#0B1157
--bt1d--color--navy
#FED7FF
--bt1d--color--opal
#78DCFF
--bt1d--color--cyan
A range of neutrals from white to black.
#FFFFFF
--bt1d--color--white
#F7F7F7
--bt1d--color--light-gray
#C8C8C8
--bt1d--color--medium-gray
#949494
--bt1d--color--form-gray
#545454
--bt1d--color--dark-gray
#000000
--bt1d--color--black
These functional colors communicate success and danger status across components.
#D0000D
--bt1d--color--red
--bt1d--color--error
#008D28
--bt1d--color--green
--bt1d--color--success
Use navy for the full range of standard typography, such as headings, paragraphs, and labels.
On Light (default)
--bt1d--text--color--dark
.bt1d-text-color--dark
AAA
On Navy
--bt1d--text--color--light
.bt1d-text-color--light
AAA
On Opal
--bt1d--text--color--dark
.bt1d-text-color--dark
AAA
On Blue
--bt1d--text--color--light
.bt1d-text-color--light
AAA
Links follow the default brand blue on light, and reverse to white on dark.
AAA
Available Classes:
The background color helper classes provide a simple way to apply predefined background colors to any element. These utility classes use custom properties (CSS variables) to ensure consistent color application across the site.
Navy
--bt1d--color--navy
.bt1d-navy-background-color
AAA
Blue
--bt1d--color--blue
.bt1d-blue-background-color
AAA
Opal
--bt1d--color--opal
.bt1d-opal-background-color
AAA
White
--bt1d--color--white
.bt1d-white-background-color
AAA
Light Gray
--bt1d--color--light-gray
.bt1d-light-gray-background-color
AAA
Color contrast represents the luminance difference between foreground and background colors. The WCAG 2.1 standard for accessibility sets three levels of achievement, from the minimum Level A to the stringent Level AAA. Level AA requires a contrast ratio of 4.5:1 for regular text and 3:1 for large text. Level AAA is even more stringent.
Our design system intends to achieve at least WCAG Level A.
If you’re stuck or need assistance, don’t hesitate to reach out to our support team for guidance.