UI Colours Tokens
HINT The latest version of the list below can be found here.
| Code | Light mode | Dark mode | Comment |
|---|---|---|---|
surface.background | gray-100 | gray-dark-400 | base background color |
surface.primary | neutral-100 | gray-dark-300 | base color for primary container elements like cells, cards |
surface.secondary | gray-200 | gray-dark-200 | for additional container elements like split-screen layouts |
surface.brand | blue-300 | gray-dark-400 | for core headers, full-screen messages. This token is manually overridden for Pro mode |
fill.primary | blue-400 | neutral-dark-100 | for e.g. icons on overview card avatar |
fill.secondary | gray-400 | gray-dark-100 | no usage example yet |
fill.tertiary | gray-300 | gray-dark-100 | for e.g. leading icons in cells |
fill.quaternary | gray-200 | gray-dark-200 | for e.g. dividers or separators |
fill.mono | neutral-100 | neutral-dark-100 | for elements on color which stay the same in light and dark mode |
fill.disabled | neutral-200 | neutral-dark-200 | for disabled non-text elements |
text.primary | blue-400 | neutral-dark-100 | for primary text |
text.secondary | gray-400 | gray-dark-100 | for secondary text |
text.mono | neutral-100 | neutral-dark-100 | for text on color which stays the same in light and dark mode |
text.disabled | neutral-300 | neutral-dark-300 | for disabled text elements |
text.placeholder | gray-300 | gray-dark-100 | for placeholder text |
state.positive | ui-green | ui-green-dark | for elements (both text and others) that are semantically positive like positive balance, success icon etc. |
state.negative | ui-red | ui-red-dark | for elements (both text and others) that are semantically negative like negative balance, error icon etc. |
state.warning | ui-yellow-900 | ui-yellow-dark | for elements (both text and others) that are meant to be a warning like alert type warning |
state.info | ui-blue | blue-dark-100 | for elements (both text and others) used to render informational content that is read-only and not interactive |
state.default | ui-gray | gray-dark-100 | for elements (both text and others) used to render neutral content like state badges or PFM category badges |
state.active | blue-300 | blue-dark-100 | for elements (both text and others) that are interactive and represent an action like a button or clickable icon |
state.positive.weak | ui-green-100 | ui-green-dark-100 | for background fill of success badges & alerts |
state.negative.weak | ui-red-100 | ui-red-dark-100 | for background fill of error badges & alerts |
state.warning.weak | ui-yellow-100 | ui-yellow-dark-100 | for background fill of warning badges & alerts |
state.info.weak | ui-blue-100 | ui-blue-dark-100 | for background fill of info badges & alerts |
state.default.weak | ui-gray-100 | ui-gray-dark-100 | for background fill of state badges & alerts |