A background that adapts to text: how a Mark makes room

A Gradiently Mark is a background that adapts to text. Because it is drawn live rather than stored as a picture, it knows where your words are, and it rearranges itself around them: the calmest, best contrasting part of the material moves behind the text, colours near the letters deepen or lift, and busy detail relaxes. Nothing is laid on top. There are no boxes, no shadows and no blur, so you keep the whole background and the words still read.

The usual ways to make text readable, and what they cost

Put a headline on a lively gradient or photo and part of it disappears. The standard fixes all work by covering the background up, which is a strange outcome when the background was the reason you chose the design.

Each fix has its place on a flat image, and text on a gradient background covers them honestly. The difference with a Mark is that the background takes part, rather than being masked.

What a Mark does around your words

1. 1

   It settles

   The material shifts so your words land on its calmest part. Light that would have sat behind the headline drifts into the open space around it.

2. 2

   It changes tone

   Close to the letters, the palette slides towards a colour that contrasts with the type: deeper behind light ink, lighter behind dark ink.

3. 3

   It calms

   Warp, busyness and fine detail relax behind the words, so a strong texture never cuts through a thin stroke.

4. 4

   It bends around the edges

   Patterns curve slightly at the edge of the words instead of running straight through them.

The reaction works hand in hand with Auto ink, which picks the Mark's light or dark ink for each line. The background makes the room; Auto ink chooses the right colour to fill it.

Choosing how strongly the background responds

You decide how much the Mark gives way. The panel for this is called Around your words, and it starts with five levels.

Under the levels are four dials for fine tuning: Tone sets how far the material settles behind words for contrast, Calm how much warp and busyness relax, Bend how much the pattern curves at the edge of the words, and Reach whether it hugs each letter or responds around the whole block of text.

Why it matters at every size

A flat background image is laid out once. Crop it to a story and the bright spot may land right behind the headline. A Mark is drawn fresh for each format, so when a design moves from a post to a story to a banner, the words move too and the Mark makes room again wherever they land. That is what lets one look work at every size.

A simple version of the idea in CSS

On the web you can borrow the principle with a plain gradient: put the deepest, calmest part of the background where your text sits and keep the colour out at the edges. It won't follow the words when the layout changes, but it beats a box.

.hero {
  min-height: 70vh;
  display: grid;
  align-content: end;
  padding: 8vh 6vw;
  color: #fbf3ea;
  background: radial-gradient(
    ellipse 70% 45% at 35% 62%,
    #1b1030 0%,
    #2e1745 40%,
    #8a3f6e 75%,
    #f0a46f 100%
  );
}

When to turn the reaction down

Not every design wants maximum legibility. A phone wallpaper has no words at all, so Off is right. Huge display lettering, a single word across a poster, can stand on its own and often looks better with Invisible. Lettering treatments such as Contour or Extrude, covered in lettering effects, already carry their own contrast. Keep the strong levels for the jobs that need them: small print, long details and anything read in a hurry.