ezForge defines product-signature gradient tokens as CSS custom properties in globals.css (@layer base { :root { … } }). These are the single source of truth for brand gradient colors across the platform — defined once and consumed by Tailwind utility classes.
Source: ezforge-platform/apps/web/src/app/globals.css — brand_identity_spec.md §3.2
Brand gradient tokens
These tokens are defined in :root and intentionally have no dark-mode overrides (the spec defines no dark-mode variants for gradient tokens).
--gradient-cross-product resolves to a solid color (#06B6D4, Electric Teal). The gradient syntax is preserved for consistency so all tokens share the same CSS value type.
Utility classes
The @layer utilities block provides ready-made classes that consume the tokens above.
Text gradients
Apply a gradient fill to text:
Background gradients
Apply a gradient background to an element:
Using tokens directly
Reference a token via var() for custom CSS where the utility classes do not apply:
Adding new gradient tokens
- Add the CSS variable to
:root in globals.css following the existing naming pattern (--gradient-<name>).
- Add a corresponding utility class in
@layer utilities (both gradient-text-<name> and gradient-bg-<name> if applicable).
- Update this page with the new token and its intended use.
- Do not add a dark-mode override unless
brand_identity_spec.md §3.2 is updated to define one.
