Citrine Glow

Citrine Glow starts pale and ends deep, moving from soft yellow through amber to burnt orange. It suits highlight banners, sale promotions, energy-related brands, and pages that want to feel optimistic without going neon. The slow darkening across the ramp means the left part of the gradient is a light surface while the right part behaves like an accent color.

Dark brown or near-black text reads well on the pale end and loses ground as the gradient deepens, so put the headline at the start of the ramp and reserve the deep end for the button or the image. On wide panels the middle amber tints the whole composition, which can be exactly what a promotion needs. The 120 degree angle tilts the light-to-dark sweep gently upward, which keeps the gradient from feeling like a simple left-to-right stripe.

The three amber stops at 0, 50, and 100 percent build the depth; on a banner the pale end reads as lit and the deep end as shadow. Put headline copy on the left half where the yellow is lightest, and set it in a dark brown rather than black so the tone stays warm. The gradient also earns its place at small scale, as an 8px divider or the fill of a progress bar during onboarding. Copy the tokens from this page and the warm sweep carries through every use without variation.