Non-interactive elements styled like interactive ones
- Forbidden
- A "Verified" badge with the brand fill and the shape of the primary button; decorative icons carrying the same border and colour as a secondary button
- Instead
- Things that look alike are expected to behave alike. If an element does nothing when clicked, it must not carry the visual signature of something that does — brand fill, button shape, or control border.
What this rule looks like
Why this rule
Differentiate deliberately: change the shape (a badge, pill, chip or avatar takes --radius-full, more rounded than a button's --radius-control), the tone (success for a verified state rather than brand), and the emphasis (a fill background rather than a solid one, so the real primary action stays the most prominent thing on screen). The converse also holds: two elements that do the same job should look the same.
- Kind
- Rule
- Section
- Things to avoid
- Group
- Colour and contrast
- Bucket
- judgment
- Severity
- note
- Since
- v0.1.0