Color

The color foundation allows you to apply consistent text colors across components using a predefined map of color tokens. It automatically generates utility classes for each color defined in your design system.

---

Naming conventions

.f--color-{variation}

• {variation} represents a predefined color key
• Each variation maps to a color token defined in the system

---

How it works

Color foundation classes are generated using a loop that iterates over a map of color options. The loop goes through:

• A map of color keys
• Their corresponding color variables

$color-options: (
  a: $color-a,
  b: $color-b,
  c: $color-c,
);

For each entry in the map, a .f--color-{variation} class is generated and assigned the corresponding text color.

---

How to use it

In HTML

<div class="f--color-a">Text with color A</div>
<div class="f--color-b">Text with color B</div>

In SCSS

// using @extend (recommended)
.c--component-a {
  @extend .f--color-a;
}

// using map-get directly (only if necessary)
.c--component-a {
  color: map-get($color-options, a);
}

---

Codepen example:

In CodePen

Keep in mind that you can’t test @extend and map-get in CodePen.

---

Best Practices

Do’s ✅

• ✅ Always use color variables ($color-a, $color-b, etc.) instead of hardcoded hex values
• ✅ Use .f--color-* utility classes for text colors in HTML
• ✅ Ensure sufficient contrast ratios for accessibility (use dark text on light backgrounds and vice versa)
• ✅ Refer to Figma for approved color combinations and use cases
• ✅ Use semantic meaning (green for success, red for errors, etc.)

Don’ts ❌

• ❌ Don’t use arbitrary color values like color: #123456 - always use defined tokens
• ❌ Don’t create new colors without consulting the design team and updating Figma
• ❌ Don’t use low-contrast color combinations that fail accessibility standards
• ❌ Don’t override color variables locally - they should remain global constants
• ❌ Don’t use background color h (dark gray) as it’s intentionally excluded