Foundations · color · 343 tokens · avala / g100
Color
Avala adopts Carbon's role taxonomy verbatim — values flip per (brand, tone). Below is the avala / g100 emit. Open /themes for the brand × tone matrix.
Background + canvas
--background#121212--background-hover#292c33--background-active#41454d--background-selected#1b1b1b--background-inverse#ffffff--background-brand#ff5c00Layer (elevation)
--layer-01#1a1a1a--layer-02#1e1e1e--layer-03#222222--layer-hover-01#222222--layer-active-01#2e2e2e--layer-selected-01#1f1f1f--layer-accent-01#1b1b1bField
--field-01#1e1e1e--field-02#292c33--field-03#2a2a2a--field-hover-01#222222Borders
--border-subtle-00#2a2a2a--border-subtle-01#333333--border-strong-01#676b73--border-tile-01#2a2a2a--border-inverse#ffffff--border-interactive#ff5c00--border-disabled#3a3a3aText
--text-primary#ffffff--text-secondary#c6c6c6--text-placeholder#676b73--text-helper#a8a8a8--text-error#fa4d56--text-disabled#525252--text-inverse#161616--text-on-color#ffffffLink
--link-primary#ff5c00--link-primary-hover#ff7a33--link-secondary#c6c6c6--link-visited#a422e1--link-inverse#0f62feIcon
--icon-primary#ffffff--icon-secondary#c6c6c6--icon-on-color#ffffff--icon-disabled#525252--icon-interactive#ff5c00--icon-inverse#161616Support (locked Avala quartet)
--support-success#50cc3d--support-warning#f7b100--support-error#d93636--support-info#6fc1e0Interactive + focus
--interactive#ff5c00--focus#ff5c00--focus-inset#161616--focus-inverse#ffffff--highlight#ff7a33--skeleton-background#1a1a1a--skeleton-element#2a2a2aButtons
--button-primary#ff5c00--button-secondary#525252--button-tertiary#ffffff--button-danger-primary#d93636--button-disabled#3a3a3a