Color Palette

Foundation CSS provides a comprehensive color system designed for accessibility, consistency, and flexibility. Our palette is built with semantic meaning and follows modern design principles.

Design Philosophy

Our color system is inspired by Stack Overflow's Stacks design system and follows established color theory principles. Each color has been carefully crafted to ensure:

  • • Accessibility - WCAG AA compliance for text and interactive elements
  • • Consistency - Harmonious relationships between colors
  • • Flexibility - Easy customization through SCSS variables
  • • Semantic meaning - Colors convey purpose and hierarchy

Color Stops

#

Each color in our palette includes 6 stops (100-600) that provide a range from light to dark. The 400 stop represents the main color, with lighter variants (100-300) and darker variants (500-600).

Color Generation

Our color stops are generated using systematic color theory principles. For consistent results, you can use tools like ColorBox to create harmonious color scales.

Pro tip: When creating custom color scales, maintain consistent saturation and brightness curves to ensure visual harmony across your palette.

Neutral Colors

#

The neutral palette consists of light grays and provides the foundation for text, backgrounds, and subtle UI elements.

Light #ffffff

Lightest background

Light 025 #f9f9f9

Lightest background

Light 050 #f1f2f7

Very light background

Light 075 #eaecf2

Light background

Light 100 #e1e3e8

Main light background

Light 200 #c8c8d5

Light borders and dividers

Light 300 #a9a9bf

Medium light borders

Light 400 #8b8da8

Medium borders and dividers

Light 500 #6b6e94

Secondary text and icons

Light 600 #4f517d

Primary text and headings

Light 700 #30336b

Dark text and emphasis

Light 800 #27294f

Dark text and emphasis

Light 900 #181a34

Darkest text and headings

Complete Color Palette

#

Foundation CSS provides a comprehensive color palette with 8 color families. The light palette contains 10 stops (025-900) for fine-grained control, while other colors contain 6 stops (100). All colors have been tested for accessibility compliance and optimal contrast ratios.

Light Palette

Light #ffffff

Lightest background

Light 025 #f9f9f9

Lightest background

Light 050 #f1f2f7

Very light background

Light 075 #eaecf2

Light background

Light 100 #e1e3e8

Main light background

Light 200 #c8c8d5

Light borders and dividers

Light 300 #a9a9bf

Medium light borders

Light 400 #8b8da8

Medium borders and dividers

Light 500 #6b6e94

Secondary text and icons

Light 600 #4f517d

Primary text and headings

Light 700 #30336b

Dark text and emphasis

Light 800 #27294f

Dark text and emphasis

Light 900 #181a34

Darkest text and headings

Green Palette

Green 100 #e8f8f2

Lightest green - backgrounds

Green 200 #d1f1e5

Light green - subtle elements

Green 300 #9ee6c7

Medium light - borders

Green 400 #4bdc9f

Main green - primary actions

Green 500 #2bc885

Dark green - hover states

Green 600 #1a8f5f

Darkest green - active states

Red Palette

Red 100 #ffe8e0

Lightest red - backgrounds

Red 200 #ffd1c2

Light red - subtle elements

Red 300 #ffb399

Medium light - borders

Red 400 #ff855c

Main red - primary actions

Red 500 #ff6b33

Dark red - hover states

Red 600 #e54d1a

Darkest red - active states

Blue Palette

Blue 100 #e6f2ff

Lightest blue - backgrounds

Blue 200 #cce5ff

Light blue - subtle elements

Blue 300 #99ccff

Medium light - borders

Blue 400 #4a90e2

Main blue - primary actions

Blue 500 #2e7ce6

Dark blue - hover states

Blue 600 #1a5bb3

Darkest blue - active states

Orange Palette

Orange 100 #fff4e6

Lightest orange - backgrounds

Orange 200 #ffe9cc

Light orange - subtle elements

Orange 300 #ffd699

Medium light - borders

Orange 400 #ffb55c

Main orange - primary actions

Orange 500 #ff9f1f

Dark orange - hover states

Orange 600 #e6850a

Darkest orange - active states

Yellow Palette

Yellow 100 #fffce6

Lightest yellow - backgrounds

Yellow 200 #fff9cc

Light yellow - subtle elements

Yellow 300 #fff299

Medium light - borders

Yellow 400 #ffd749

Main yellow - primary actions

Yellow 500 #ffcc1a

Dark yellow - hover states

Yellow 600 #e6b800

Darkest yellow - active states

Purple Palette

Purple 100 #f4e6ff

Lightest purple - backgrounds

Purple 200 #e9ccff

Light purple - subtle elements

Purple 300 #d399ff

Medium light - borders

Purple 400 #da93f3

Main purple - primary actions

Purple 500 #c266e6

Dark purple - hover states

Purple 600 #a633cc

Darkest purple - active states

Pink Palette

Pink 100 #ffe6f0

Lightest pink - backgrounds

Pink 200 #ffcce1

Light pink - subtle elements

Pink 300 #ff99c2

Medium light - borders

Pink 400 #ff92b9

Main pink - primary actions

Pink 500 #ff66a3

Dark pink - hover states

Pink 600 #e6337a

Darkest pink - active states

Teal Palette

Teal 100 #e6faf5

Lightest teal - backgrounds

Teal 200 #ccf5eb

Light teal - subtle elements

Teal 300 #99ebd7

Medium light - borders

Teal 400 #20c997

Main teal - primary actions

Teal 500 #1aa085

Dark teal - hover states

Teal 600 #147a66

Darkest teal - active states

Accessibility

#

All colors in our palette have been tested for accessibility compliance. We follow WCAG AA guidelines to ensure sufficient contrast ratios for text and interactive elements.

Contrast Guidelines

  • • Normal text: Minimum 4.5:1 contrast ratio
  • • Large text: Minimum 3:1 contrast ratio
  • • Interactive elements: Minimum 3:1 contrast ratio
  • • Focus indicators: Minimum 3:1 contrast ratio

Best Practices

  • • Use light colors (100-300) for backgrounds and subtle elements
  • • Use medium colors (400) for primary text and main elements
  • • Use dark colors (500-600) for headings and strong emphasis
  • • Test your color combinations with accessibility tools

Customization

#

Foundation CSS colors are fully customizable through SCSS variables. You can override the entire palette or modify individual colors to match your brand.

Custom Color Palette

To customize colors, override the $colors map in your SCSS: 

@use "@enodo/foundation-css" with (
  $colors: (
    primary: (
      "main": #your-brand-color,
      "100": #lightest-variant,
      "200": #lighter-variant,
      "300": #light-variant,
      "400": #your-brand-color,
      "500": #dark-variant,
      "600": #darkest-variant,
    ),
    // ... other colors
  )
);

Color Generation Tips

  • • Use ColorBox for systematic color scale generation
  • • Maintain consistent saturation and brightness curves
  • • Test all color combinations for accessibility
  • • Consider both light and dark mode variations

CSS Variables

#

All palette colors are automatically exposed as CSS custom properties. Use them in your custom components: 

/* All color palettes available as CSS variables */
.my-component {
  background-color: var(--green-100);
  border-color: var(--green-600);
  color: var(--green-600);
}

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

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

/* Combine with other design tokens */
.my-alert {
  background-color: var(--red-100);
  color: var(--red-600);
  padding: var(--su4);
  border-radius: var(--br-md);
  border-left: 4px solid var(--red-600);
}

💡 Available Variables

See the Colors Customization section for the complete list of all available CSS custom properties.

Usage Examples

#

Text Colors

Light text for subtle information

Medium text for regular content

Dark text for headings

Background Colors

Success message

Error message

Info message