Problem
Selecting text across the site can apply a large, opaque tan/gold highlight. Against the site's neon-green typography and dark backgrounds, the selected text becomes difficult to read, especially across long paragraphs.
This was first observed on:
/whitepapers/augur-v2/how-augur-works/#a-market-creation
The whitepaper route is the reproduction example, but the issue is global rather than limited to whitepaper pages.
Expected behavior
Selected text should remain clearly legible while still providing an obvious selection state. The highlight should adapt to the site's visual system without overpowering the text.
Suggested direction
Define a global selection treatment at the site/base styling layer, using a lower-opacity, theme-appropriate background and a text color with reliable contrast. Add component-specific overrides only where a surface genuinely needs different treatment. Check paragraphs, headings, inline code, links, footnotes, and other content surfaces.
Acceptance criteria
- Selected text remains readable across the site.
- Selection styling is visually compatible with the site's themes and backgrounds.
- Contrast remains usable on desktop and mobile widths.
- Paragraphs, headings, inline code, links, and footnotes remain legible when selected.
- Copying selected text continues to work normally.
- Styling does not unintentionally alter selection behavior elsewhere on the site.
Problem
Selecting text across the site can apply a large, opaque tan/gold highlight. Against the site's neon-green typography and dark backgrounds, the selected text becomes difficult to read, especially across long paragraphs.
This was first observed on:
/whitepapers/augur-v2/how-augur-works/#a-market-creationThe whitepaper route is the reproduction example, but the issue is global rather than limited to whitepaper pages.
Expected behavior
Selected text should remain clearly legible while still providing an obvious selection state. The highlight should adapt to the site's visual system without overpowering the text.
Suggested direction
Define a global selection treatment at the site/base styling layer, using a lower-opacity, theme-appropriate background and a text color with reliable contrast. Add component-specific overrides only where a surface genuinely needs different treatment. Check paragraphs, headings, inline code, links, footnotes, and other content surfaces.
Acceptance criteria