Design Tokens

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.

Getting Started

Concepts

Templates

Changelog

Brand gradient tokens

Utility classes

Text gradients

Background gradients

Using tokens directly

Adding new gradient tokens

​Brand gradient tokens

​Utility classes

​Text gradients

​Background gradients

​Using tokens directly

​Adding new gradient tokens

Brand gradient tokens

Utility classes

Text gradients

Background gradients

Using tokens directly

Adding new gradient tokens