Do not use hex values from the design

When implementing UI, do not copy and paste raw hex color values directly from Figma. Always use the NeetoUI utility classes or NeetoUI CSS variables instead.

Why?

  1. Ensures consistency across products
    NeetoUI provides standard utility classes and CSS variables like neeto-ui-text-gray-800, neeto-ui-bg-primary-500, and --neeto-ui-gray-800. These are centrally defined and help maintain a consistent visual language across all Neeto products.

  2. Supports dark mode automatically
    NeetoUI CSS variables are theme-aware. They automatically adapt to light and dark modes, ensuring proper contrast and readability.
    Hardcoded hex values do not adapt and can break the UI in dark mode.

  3. Easy to maintain and update
    When a color needs to change, updating the variable in one place updates it everywhere.
    Hardcoded hex values require manual updates across the codebase.

Do's and Don'ts

🚫 Don't

Screenshot 2023-10-21 at 10.13.06 PM.png

✅ Do's

Screenshot 2023-10-21 at 9.38.24 PM.png

Read more about the NeetoUI color scheme and CSS variable usage here.

https://neeto-ui.neeto.com/?path=/docs/customize-css-variables--customize-neeto-ui