Foundation CSS Global Style Colors

Foundation CSS provides a set of global style colors that you can use to maintain consistency and coherence across your web projects. These global colors are defined as CSS variables and can be easily applied to various elements throughout your site. Here are some of the key global style colors offered by Foundation CSS:

---

1. Primary Color

The primary color is the main color used for highlighting important elements and actions throughout your site. It typically represents your brand identity and serves as the dominant color in your design. Foundation CSS defines the primary color variable as --primary-color.

---

2. Secondary Color

The secondary color complements the primary color and is used to provide contrast or emphasis to certain elements. It can be used for secondary actions, buttons, or accents within your design. Foundation CSS defines the secondary color variable as --secondary-color.

---

3. Success Color

The success color indicates positive or successful actions or outcomes. It is commonly used for indicating success messages, validation states, or progress indicators. Foundation CSS defines the success color variable as --success-color.

---

4. Alert Color

The alert color signifies warnings or alerts that require attention from the user. It is typically used for indicating error messages, validation errors, or critical alerts. Foundation CSS defines the alert color variable as --alert-color.

---

5. Dark Color

The dark color provides a darker shade that can be used for backgrounds, borders, or text in situations where a darker tone is needed. It helps create visual contrast and hierarchy within your design. Foundation CSS defines the dark color variable as --dark-color.

---

6. Light Color

The light color offers a lighter shade that can be used for backgrounds, borders, or text in situations where a lighter tone is required. It helps create visual contrast and highlights certain elements within your design. Foundation CSS defines the light color variable as --light-color.

---

Conclusion

By utilizing Foundation CSS's global style colors, you can ensure consistency and coherence in your web design while also providing visual hierarchy and emphasis to different elements. These predefined color variables make it easy to maintain a cohesive color scheme throughout your site and adapt to changes or updates in your design.