Emphasis
A tinted pill behind a key word in a heading.
Heading and sentence sizes
The pill scales with the text around it.
Your product's context layer
Your data stack, working together
Connect PostHog to your favorite coding agent.
All colors and line breaks
Every color, then one phrase across line breaks. Each line gets its own rounded tint.
graybrandbluecobaltcoralcorn-bluegreenlemonlimepurpletangerinetealvioletyellow
Build with analytics, replays, and product context
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- The color is decoration and has no meaning. Pick the color that suits the page.
- For semantic emphasis, put an
<em>or<strong>inside.
API
Emphasis is a site component. It accepts span element props.
Emphasis
| Prop | Type | Default | Description |
|---|---|---|---|
| color | 'gray' | 'brand' | 'blue' | 'cobalt' | 'coral' | 'corn-blue' | 'green' | 'lemon' | 'lime' | 'purple' | 'tangerine' | 'teal' | 'violet' | 'yellow' | 'blue' | Sets the tint and text color. |