Documentation Index
Fetch the complete documentation index at: https://docs.ezforge.ai/llms.txt
Use this file to discover all available pages before exploring further.
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).
| Token | Value | Product |
|---|
--gradient-platform | linear-gradient(to right, #F59E0B, #EF4444) | Platform — amber → red |
--gradient-ready | linear-gradient(to right, #3B82F6, #6366F1) | Ready — blue → indigo |
--gradient-hub | linear-gradient(to right, #8B5CF6, #6366F1) | Hub — purple → indigo |
--gradient-cross-product | linear-gradient(to right, #06B6D4, #06B6D4) | Cross-product — solid teal |
--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:
| Class | Token consumed |
|---|
.gradient-text-platform | --gradient-platform |
.gradient-text-ready | --gradient-ready |
.gradient-text-hub | --gradient-hub |
<span class="gradient-text-platform">ezForge Platform</span>
<span class="gradient-text-ready">Ready</span>
<span class="gradient-text-hub">Hub</span>
Background gradients
Apply a gradient background to an element:
| Class | Token consumed |
|---|
.gradient-bg-platform | --gradient-platform |
.gradient-bg-ready | --gradient-ready |
.gradient-bg-hub | --gradient-hub |
.gradient-bg-cross-product | --gradient-cross-product |
<div class="gradient-bg-platform">Platform header</div>
<div class="gradient-bg-cross-product">Cross-product banner</div>
Using tokens directly
Reference a token via var() for custom CSS where the utility classes do not apply:
.my-element {
background: var(--gradient-ready);
}
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.
