Colors

Foundation CSS provides a comprehensive set of color utility classes for text, backgrounds, and borders. All colors are designed with accessibility in mind and follow semantic naming conventions.

Text Colors

#

Use text color classes to apply colors to text elements. All classes support hover and focus states.

Usage

<p class="fc-green-400">Success message</p>
<p class="fc-red-500">Error message</p>
<p class="fc-blue-600 fw-bold">Important information</p>

Light Text

White

Lightest text (025)

Very light text (050)

Light text (075)

Main light text (100)

Light text (200)

Medium light text

Medium text

Secondary text

Primary text

Dark text

Medium Dark text

Darkest text

Green Text

Light green text

Lighter green text

Light green text

Main green text

Dark green text

Darkest green text

Red Text

Light red text

Lighter red text

Light red text

Main red text

Dark red text

Darkest red text

Blue Text

Light blue text

Lighter blue text

Light blue text

Main blue text

Dark blue text

Darkest blue text

Orange Text

Light orange text

Lighter orange text

Light orange text

Main orange text

Dark orange text

Darkest orange text

Purple Text

Light purple text

Lighter purple text

Light purple text

Main purple text

Dark purple text

Darkest purple text

Teal Text

Light teal text

Lighter teal text

Light teal text

Main teal text

Dark teal text

Darkest teal text

Background Colors

#

Use background color classes to apply colors to background elements. Perfect for cards, alerts, and section backgrounds.

Usage

<div class="bg-green-100 p4 bar-md">
  <p class="fc-green-600">Success message</p>
</div>

<div class="bg-red-100 p4 bar-md">
  <p class="fc-red-600">Error message</p>
</div>

Light Backgrounds

White background

Lightest background (025)

Very light background (050)

Light background (075)

Main light background (100)

Light background (200)

Medium light background

Medium background

Dark background

Darker background

Dark background (700)

Medium Dark background (800)

Darkest background (900)

Green Backgrounds

Light green background

Lighter green background

Light green background

Main green background

Dark green background

Darkest green background

Red Backgrounds

Light red background

Lighter red background

Light red background

Main red background

Dark red background

Darkest red background

Blue Backgrounds

Light blue background

Lighter blue background

Light blue background

Main blue background

Dark blue background

Darkest blue background

Border Colors

#

Use border color classes to apply colors to border elements. Great for form inputs, cards, and dividers.

Usage

<input class="bc-green-300 bar-sm p3" type="text" placeholder="Success input">
<div class="bc-red-300 bs-sm p4 bar-md">Error card</div>

Green Borders

Light green border

Lighter green border

Light green border

Main green border

Dark green border

Darkest green border

Blue Borders

Light blue border

Lighter blue border

Light blue border

Main blue border

Dark blue border

Darkest blue border

Interactive States

#

All color classes support hover and focus states using the h: and f: prefixes.

Interactive Examples

<button class="bg-blue-400 fc-light p3 bar-sm h:bg-blue-500 f:bg-blue-600">
  Interactive Button
</button>

<a href="#" class="fc-blue-400 h:fc-blue-500 f:fc-blue-600">
  Interactive Link
</a>
Hover link

Semantic Usage

#

Use colors semantically to convey meaning and provide clear visual feedback to users.

Success States

Success message

Confirmation

Error States

Error message

Validation error

Warning States

Warning message

Caution notice

Information States

Info message

Help text

Best Practices

#

Do

  • • Use semantic colors for their intended purpose
  • • Test color combinations for accessibility
  • • Use consistent color stops across your design
  • • Provide sufficient contrast for text
  • • Use hover and focus states for interactivity

Don't

  • • Use red for non-error states
  • • Use low contrast color combinations
  • • Mix different color systems
  • • Use too many colors in one interface
  • • Ignore accessibility guidelines

Color Accessibility Tips

  • • Test contrast: Use tools like WebAIM's contrast checker
  • • Don't rely on color alone: Combine with icons, text, or patterns
  • • Consider colorblind users: Ensure information is accessible without color
  • • Use consistent patterns: Establish clear color meanings across your app

Customization

#

CSS Variables

All colors are exposed as CSS custom properties for use in custom components: 

:root {
  /* Light palette */
  --light: #fff;
  --light-025: #f9f9f9;
  --light-050: #f1f2f7;
  --light-075: #eaecf2;
  --light-100: #e1e3e8;
  --light-200: #c8c8d5;
  --light-300: #a9a9bf;
  --light-400: #8b8da8;
  --light-500: #6b6e94;
  --light-600: #4f517d;
  --light-700: #30336b;
  --light-800: #27294f;
  --light-900: #181a34;

  /* Green palette */
  --green: #4bdc9f;
  --green-100: #e8f8f2;
  --green-200: #d1f1e5;
  --green-300: #9ee6c7;
  --green-400: #4bdc9f;
  --green-500: #2bc885;
  --green-600: #1a8f5f;

  /* Red, Blue, Orange, Yellow, Purple, Pink, Teal */
  /* ... (all color palettes available) */
}

/* Use in custom components */
.my-alert {
  background-color: var(--green-100);
  border-left: 4px solid var(--green-600);
  color: var(--green-600);
  padding: var(--su4);
  border-radius: var(--br-md);
}

.my-button--primary {
  background-color: var(--blue);
  color: var(--light);
}

.my-button--primary:hover {
  background-color: var(--blue-600);
}

.my-badge {
  background-color: var(--red-100);
  color: var(--red-600);
  padding: var(--su1) var(--su2);
  border-radius: var(--br-sm);
}

SCSS Variables (Build-time)

Override SCSS variables before importing to customize your theme: 

@use "@enodo/foundation-css" with (
  $colors: (
    light: (
      "main": #fff,
      "025": #f9f9f9,
      "050": #f1f2f7,
      "075": #eaecf2,
      "100": #e1e3e8,
      "200": #c8c8d5,
      "300": #a9a9bf,
      "400": #8b8da8,
      "500": #6b6e94,
      "600": #4f517d,
      "700": #30336b,
      "800": #27294f,
      "900": #181a34,
    ),
    green: (
      "main": #4bdc9f,
      "100": #e8f8f2,
      "200": #d1f1e5,
      "300": #9ee6c7,
      "400": #4bdc9f,
      "500": #2bc885,
      "600": #1a8f5f,
    ),
    // ... other colors
  )
);