# Composed accent surface — a tint that enters at one edge

Learned 2026-08-27 from Resend's `Domain verified` banner and its status cards.

- **The utility carries the shape, the element carries the colour.**
  `.bg-gradient-fade{background-image:linear-gradient(90deg,
  var(--tw-gradient-from) 0%, var(--tw-gradient-to) 40%)}` and the stops arrive
  as separate classes (`from-green-4`, `to-root`). The finished gradient exists
  only in the computed style, so grepping the stylesheet for it finds nothing.
- **Measured instance**: `linear-gradient(90deg, rgba(17,255,153,.176) 0%,
  rgba(0,0,0,0) 40%)`, border `1px solid rgba(43,255,162,.235)`, radius 16,
  padding 16, `background-clip:padding-box`. The tint is gone by 40% of the
  width — a full-width wash reads as an alert, an edge wash reads as a state.
- **Restyling is a scale swap.** Warning and error are the same recipe with
  `amber` and `red`, because the steps carry the meaning: `3` fills, `5`
  borders, `11` writes.