Neutral

This palette is reserved for type, states of interactive components, border lines and stroke line.

Shades of Grey

Alpha (Transparencies)

Will be used when the page content should be covered and a dialog/modal will be on top

Blanket/Overlay

# Neutral CSS Classes

This document provides a clear and organized guide to the neutral color CSS classes, including text and background colors. Each class name corresponds to a specific shade of grey, making it easy for developers to implement consistent theming.

Usage

Apply the CSS classes in your HTML like this:

<p class="ayode-text-neutral-500">This is neutral text 500.</p>
<div class="ayode-bg-neutral-100">This is a neutral background 100.</div>

Neutral Color Classes

Text Colors

These classes are used to apply neutral colors to text.

Example:

<p class="ayode-text-neutral-700">This text uses ayode-text-neutral-700.</p>

Background Colors

These classes apply neutral shades as background colors.

Example:

<div class="ayode-bg-neutral-200">
  This background uses ayode-bg-neutral-200.
</div>

Alpha (Transparency)

Used for overlays and modals.

Example:

<div class="ayode-overlay-50">This is an overlay with 50% transparency.</div>

Conclusion

These classes simplify the use of consistent neutral colors across your project. Choose the shade that best fits your UI design and apply it easily with the corresponding class.

Need more help? Feel free to ask! 😊