Pages
Contents
8. Contextual Colours & Pills
Semantic colours for status, hints and errors run through text, buttons, cards, tables and timelines.
Colour Palette
Accent
Primary actions, focus, active navigation
Success / Info
Positive feedback, online status
Warning
Hints without error status
Danger
Errors and destructive actions
Muted
Secondary lines, dividers
Pills
Default
Info
Warning
Danger
v1.3.0-RC
| <span class="xpulse-pill">Default</span> |
| <span class="xpulse-pill xpulse-pill--info">Info</span> |
| <span class="xpulse-pill xpulse-pill--warning">Pending</span> |
| <span class="xpulse-pill xpulse-pill--danger">Incident</span> |
Inline Contextual Colours
Status: Connected — all good.
Review: Pending — waiting for approval.
Deploy: Failed — action required.
| <span class="xpulse-text--info">Connected</span> |
| <span class="xpulse-text--warning">Pending Review</span> |
| <span class="xpulse-text--danger">Error</span> |