Watermark

A watermark is faint text or a mark laid over content and repeated across it, usually rotated so it cannot be mistaken for part of the layout. The repetition is what makes it a watermark rather than a label: a single word in the corner is a badge and can be cropped away in one gesture, while a mark tiled across the whole surface has to be removed everywhere at once. The web version is a component, not a graphic. Ant Design ships one that wraps arbitrary children, and every implementation that takes the job seriously also watches for its own node being deleted from the page.

Two jobs account for almost every use. The first is provenance: this document, image, or export came from here and belongs to this account, which is why so many watermarks carry a name, an email address, or a user id. The second is state: the content is a draft, a preview, a sample, a comp under a licensing hold, and must not be mistaken for the finished thing. The second job is the one with a deadline, because a document that escapes review unmarked causes a specific kind of expensive mistake, and it is the reason the mark is applied to the view rather than to the content underneath.

The whole craft is one tension, and the demo above shows both ends of it. A watermark has to survive a screenshot, a crop, and a photograph of the screen, which argues for high contrast and dense tiling. It also has to leave the content readable, which argues for the opposite. Anything faint enough to be pleasant is faint enough to be cleaned up in an image editor, and anything strong enough to be uncleanable makes the text underneath hard to read. Practical settings sit near the readable end: low opacity, a repeat interval wide enough that the mark does not land on the same line twice, an angle far from the horizontal, and an accessibility check that the marked text still meets its contrast requirement, since a watermark drops the effective contrast of everything beneath it.

Against other overlays the distinction is what the overlay is doing. A scrim is there to suppress what is beneath it and to hand attention to whatever is on top, so it is meant to be seen and then dismissed. A vignette darkens edges to focus the eye on the middle and carries no message at all. A watermark carries a message and is not dismissible: it is content added to the view for as long as the view is shown. Do not use one where a status field would do. If the reader is already inside a screen that says “draft” and can only be reached by an editor, a tiled stamp is noise; the watermark earns its cost when the view can leave the building.