• FRAMEWORK

Foundations

Colors

Colors

The project colors that can be used in the project are as follows. If you would like to use a color other than the colors found here, please contact us.

FO Framework defines a consistent color system for brand and functional usage. These colors must be used for UI elements and components. If a new color is needed, contact the design system team for approval.

Brand Colors

Primary colors used to reflect corporate identity and key UI elements.

Primary

#337AB7

.fo-color-primary / .fo-background-primary
Secondary

#344859

.fo-color-secondary / .fo-background-secondary
Tertiary

#6C757D

.fo-color-tertiary / .fo-background-tertiary
Semantic Colors

Functional colors that convey meaning (success, warnings, errors, info).

Success

#00A860

.fo-color-success
Info

#45A4F7

.fo-color-info
Warning

#FABA57

.fo-color-warning
Error

#DB4437

.fo-color-error
Neutral Colors

Backgrounds, text, and border usage.

Black

#000000

.fo-color-black
Dark

#333333

.fo-color-dark
Light

#CCCCCC

.fo-color-light
White

#FFFFFF

.fo-color-white

Light Variations

Light colors are useful for backgrounds and subtle UI elements.

Primary Light
.fo-background-primary-light
Secondary Light
.fo-background-secondary-light
Success Light
.fo-background-success-light
Info Light
.fo-background-info-light
Warning Light
.fo-background-success-light
Error Light
.fo-background-error-light

Contrast Examples (WCAG)

Correct and incorrect color combinations for accessibility:

Good: White text on Primary (passes AA)
Bad: Light text on Primary (fails contrast)
Best Practices
  • Use only defined colors; do not create custom hex codes.
  • Ensure at least AA contrast level between text and background.
  • Use semantic colors to indicate state (e.g., success for success messages).
  • Use light variations for subtle UI backgrounds or hover states.