# Gradients

Binary UIKit ships five text gradients for display type. They are applied with utility classes, never with a color value written into a component.

`Provider` injects the utility stylesheet that defines the gradient classes, so no extra CSS file is needed.

<h2 id="purpose">Where gradients belong</h2>

Gradients carry hero titles and single-word emphasis. Keep them out of body copy, buttons, inputs, and any text that has to stay legible at small sizes. Contrast comes first.

<h2 id="anatomy">Two classes, one effect</h2>

A gradient needs the base class `.bd-grad-text` plus one ramp class. The base class clips the background to the glyphs; the ramp class supplies the image from a `--bd-grad-text-*` variable.

```html
<h1 class="bd-h1 bd-grad-text bd-grad-text-blueprint">Binary Dreams</h1>
```

<h2 id="usage">Use sparingly</h2>

One gradient per screen is usually enough. Apply it to a single heading or one word inside a heading, and let the rest of the type stay solid. Repeating the effect flattens its meaning.

<h2 id="details">The five ramps</h2>

The class names stay stable across themes. Graphite Light supplies monochrome default ramps. Graphite Dark reverses them for dark surfaces. Blueprint Light and Blueprint Dark replace them with blue technical ramps and warm `ember` and `dawn` counterparts.

<h2 id="accessibility">Legibility</h2>

Clipped text drops the solid `color` value, so a gradient must stay large and heavy enough to read on its own. Check every ramp against the surface behind it, and keep a solid fallback for text that carries meaning at body size.

<h2 id="tokens">Tokens</h2>

The default ramps live in `BD_THEME.gradients` and reach CSS as `--bd-grad-text-blueprint`, `--bd-grad-text-blueprint-deep`, `--bd-grad-text-ember`, `--bd-grad-text-dawn`, and `--bd-grad-text-ink`. A `Provider` override replaces the values without changing the class names.

<h2 id="related">Related</h2>

See [Provider](/docs/components/provider) for the utility stylesheet and overrides, and [Section](/docs/components/section) for the headings a gradient usually lands on.