> ## 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.

# Design Tokens

> CSS custom properties and utility classes for ezForge brand gradients

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 |

<Note>
  `--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.
</Note>

## 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`      |

```html theme={null}
<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` |

```html theme={null}
<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:

```css theme={null}
.my-element {
  background: var(--gradient-ready);
}
```

## Adding new gradient tokens

1. Add the CSS variable to `:root` in `globals.css` following the existing naming pattern (`--gradient-<name>`).
2. Add a corresponding utility class in `@layer utilities` (both `gradient-text-<name>` and `gradient-bg-<name>` if applicable).
3. Update this page with the new token and its intended use.
4. Do **not** add a dark-mode override unless `brand_identity_spec.md §3.2` is updated to define one.