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.

Where gradients belong

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.

Two classes, one effect

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.

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

Use sparingly

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.

The five ramps

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.

Legibility

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.

Tokens

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.

Related

See Provider for the utility stylesheet and overrides, and Section for the headings a gradient usually lands on.