/// Typography
Mark
Inline highlight — a tone-tinted background behind text, for search hits and emphasis.
import { Mark } from "@protocore/pds";Basics
Mark renders a real <mark> element with a tone-tinted wash behind the text — the default accent tone uses the brand accent-muted colour. It flows inline with the surrounding copy and keeps the text's own colour, so it stays readable.
The settlement ledger was reconciled against the bank feed at 04:12 UTC, and no discrepancies remained.
Tones
Beyond accent, Mark accepts the five status tones. Reserve those for genuine status meaning — a red mark reads as a problem — and reach for the neutral or accent wash for plain emphasis.
Accent emphasis on the primary term.
The batch settled cleanly.
Two rows are pending review.
Payment reversed by the issuer.
Now syncing the remaining pages.
When to use it
Use Mark to draw the eye to a run of text inside a sentence — a matched search term, a changed value in a diff summary, a key phrase in a policy. For the common case of highlighting *search matches inside a longer string*, use Highlight, which finds the substrings for you and wraps each in a Mark.
Mark is server-safe and carries no interactivity — it is emphasis, not an affordance. Never wrap a whole paragraph in it; the highlight loses meaning when everything is highlighted.
Usage
Do
- Highlight short, meaningful runs — a term, a value, a phrase.
- Keep the default `accent` wash for neutral emphasis.
- Use a status tone only when the highlight also carries that status meaning.
Don't
- Don't highlight whole paragraphs — emphasis needs contrast to read.
- Don't use `Mark` as a button or link; it is not interactive.
- Don't apply several different tones within one sentence.
Accessibility
- Renders a semantic `<mark>` element, which assistive tech may expose as highlighted text.
- The tint is decorative — meaning must survive without colour, so the highlighted words themselves must still make sense in context.
- Text colour is inherited (not recoloured), so contrast against the tint stays at the paragraph's own ratio.
Mark props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The highlighted text. |
className | string | — | |
style | CSSProperties | — | |
tone | enum | accent | Tint behind the text. Defaults to `accent` (brand accent-muted wash). |