# Custom Selection Styling

**SHOULD** · **ID:** `design-selection-styling` · **Category:** design
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-selection-styling

> SHOULD: Style `::selection` with brand colors instead of shipping the browser default blue.

Style the document selection state with ::selection to match the brand

The default browser selection color is a generic blue that rarely matches your design. Customizing ::selection with your brand colors creates a more cohesive and polished experience. It's a small detail that shows attention to craft.

## Rule snippet

```tsx
::selection { background: var(--accent); color: var(--accent-foreground); }
```

## Bad — do not do this

`design-selection-styling-bad`

```tsx
export function SelectionStylingBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-2">
        <h3 className="text-sm font-medium text-foreground">About Our Platform</h3>
        <p className="text-sm text-muted-foreground">
          Select this text to see the default browser highlight color — the generic blue doesn't match our brand palette and looks out of place.
        </p>
        <p className="text-sm text-muted-foreground">
          Every detail matters in crafting a polished interface. Even text selection contributes to the overall visual coherence.
        </p>
      </div>
      <p className="text-xs text-error">Default ::selection — generic blue doesn't match the brand</p>
    </div>
  );
}
```

## Good — do this

`design-selection-styling-good`

```tsx
export function SelectionStylingGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-2">
        {/* The theme tokens are oklch values, so they are used directly. Wrapping them
            in hsl() would be invalid CSS and the declaration would be dropped. */}
        <style>{`
          .custom-selection ::selection {
            background: color-mix(in oklch, var(--primary) 35%, transparent);
            color: var(--foreground);
          }
        `}</style>
        <div className="custom-selection">
          <h3 className="text-sm font-medium text-foreground">About our platform</h3>
          <p className="text-sm text-muted-foreground">
            Select this text to see the branded highlight. It is tinted with the primary token, so it feels
            intentional rather than borrowed from the OS.
          </p>
          <p className="text-sm text-muted-foreground">
            Styling ::selection is a small detail that lifts the polish of the whole interface.
          </p>
        </div>
      </div>
      <p className="text-xs text-success">
        A custom <code>::selection</code> tinted from the primary token, matching the brand
      </p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)
- [MDN ::selection](https://developer.mozilla.org/en-US/docs/Web/CSS/::selection)