UI Colours Tokens - George Design System

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

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