<!-- Protocore Design System — Mark -->
# Mark

- **Category:** Typography (`typography`)
- **Slug:** `typography/mark`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { Mark } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/typography/mark

> Inline highlight — a tone-tinted background behind text, for search hits and emphasis.

## 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.

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `ReactNode` | no | — | The highlighted text. |
| `className` | `string` | no | — | — |
| `style` | `CSSProperties` | no | — | — |
| `tone` | `enum` | no | `accent` | Tint behind the text. Defaults to `accent` (brand accent-muted wash). |

## Examples

### 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.

```tsx
import { Mark, Text } from "@protocore/pds";

export default function MarkBasics() {
  return (
    <Text>
      The <Mark>settlement ledger</Mark> was reconciled against the bank feed at 04:12 UTC, and no{" "}
      <Mark>discrepancies</Mark> remained.
    </Text>
  );
}
```

### 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.

```tsx
import { Mark, Stack, Text } from "@protocore/pds";

export default function MarkTones() {
  return (
    <Stack direction="column" gap={2}>
      <Text>
        Accent emphasis on the <Mark>primary term</Mark>.
      </Text>
      <Text>
        The batch <Mark tone="success">settled</Mark> cleanly.
      </Text>
      <Text>
        Two rows are <Mark tone="warning">pending review</Mark>.
      </Text>
      <Text>
        Payment <Mark tone="danger">reversed</Mark> by the issuer.
      </Text>
      <Text>
        Now <Mark tone="info">syncing</Mark> the remaining pages.
      </Text>
    </Stack>
  );
}
```

## 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

**Notes**

- 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.

## Related

`highlight`, `text`, `code`, `badge`

---

© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/