[ { "Primitives": { "color": { "reserved": { "success": { "50": { "$type": "color", "$value": "#f2f9f2", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#d9ecd9", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#99cc99", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#47a447", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#249224", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#008000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#006d00", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#005a00", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#004600", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#003300", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#002000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "info": { "50": { "$type": "color", "$value": "#f2f8fc", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#d9eaf6", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#99c7e7", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#459ad4", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#2487cc", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#0074c4", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#0063a7", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#005189", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#00406c", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#002e4e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#001d31", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "warning": { "50": { "$type": "color", "$value": "#fcf5f2", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#f3d8cc", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#e8b199", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#d7784f", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#ce5826", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#c53b00", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#a73200", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#8a2900", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#6c2000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#4f1800", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#310f00", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "danger": { "50": { "$type": "color", "$value": "#fcf2f2", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#f9e6e6", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#eaa6a6", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#db6363", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#d03333", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#c40000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#a70000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#890000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#6c0000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#4e0000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#310000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "system": { "50": { "$type": "color", "$value": "#fffff2", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#ffffe6", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#ffffbf", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#ffff80", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#ffff40", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#ffff00", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#d9d900", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#b3b300", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#8c8c00", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#666600", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#404000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } } }, "WBC": { "muted": { "50": { "$type": "color", "$value": "#f9f9fa", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#f5f5f6", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#dedee1", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#b6b6bc", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#8e8d98", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#706f7c", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#5b5b6a", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#464651", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#323238", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#1c1c1f", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#161619", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "primary": { "50": { "$type": "color", "$value": "#fff0f0", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#facccb", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#f46e69", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#f1423c", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#ee221b", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#da1710", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#b9140e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#99100b", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#780d09", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#570906", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#370604", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#da171080", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "hero": { "50": { "$type": "color", "$value": "#f1f0fa", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#e2e1f4", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#a9a5df", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#6f69c9", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#423c97", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#1f1c4f", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#18144d", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#130f48", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#0d093e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#090538", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#060236", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#3a349399", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "pop": { "50": { "$type": "color", "$value": "#fff5fd", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#ffecfb", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#ffcff6", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#ff9eed", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#ff6ee4", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#ff3ddb", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#d934ba", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#b32b99", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#8c2278", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#59154d", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#330c2c", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#ff3ddb73", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "holler": { "50": { "$type": "color", "$value": "#faf1fd", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#ebcdf9", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#ce84f0", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#bc57eb", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#ad32e6", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#991ad6", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#8717ba", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#70139b", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#5c0f7f", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#450c5f", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#2e0840", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#991ad680", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "sing": { "50": { "$type": "color", "$value": "#faf2f2", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#f5d9d9", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#efa2a2", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#e76969", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#cf2c2c", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#990000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#860000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#710000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#5d0000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#4d0000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#410000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#99000080", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "dance": { "50": { "$type": "color", "$value": "#fef4eb", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#fde7d3", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#fbcba2", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#f9b071", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#f79540", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#f57a0f", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#ce6409", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#9d4c07", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#713705", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#401f03", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#2c1502", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#f57a0f73", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } } }, "STG": { "muted": { "50": { "$type": "color", "$value": "#f9f9f9", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#f5f5f4", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#e1e1e0", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#b2b2ae", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#8d8c81", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#727163", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#5e5d55", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#4c4c48", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#393937", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#1c1c1c", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#141414", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "primary": { "50": { "$type": "color", "$value": "#fff0f0", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#ffc7c7", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#f87272", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#f44848", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#f21818", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#e30000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#bc0000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#980000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#750000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#5b0000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#380000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#e300004d", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "hero": { "50": { "$type": "color", "$value": "#ecf8f0", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#c2eace", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#6dcb89", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#2fa854", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#219d4b", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#008739", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#007334", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#005f32", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#004833", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#003323", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#002a1c", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#00873973", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "pop": { "50": { "$type": "color", "$value": "#f1fbe5", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#e5f7cf", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#c2ec8e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#abe562", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#93d83b", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#78be20", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#619b18", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#4b7910", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#365909", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#223b04", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#132402", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#78be2073", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "holler": { "50": { "$type": "color", "$value": "#f5f2fb", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#e6dff5", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#bba3e2", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#9b73d2", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#814ec5", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#502d79", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#46276b", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#3e225f", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#341b50", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#2c1645", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#27133e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#502d794d", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "sing": { "50": { "$type": "color", "$value": "#edf8fe", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#e1f4fe", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#b9e6fc", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#91dcfb", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#5ad2fa", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#3fc3eb", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#319cbd", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#23768f", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#155264", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#09303c", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#04212a", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#3fc3eb4d", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "dance": { "50": { "$type": "color", "$value": "#fff3eb", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#ffe7d6", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#ffcba8", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#ffb380", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#ff9752", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#ff7f29", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#cf6200", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#9d4800", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#6e3100", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#421a00", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#2c0f00", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#ff7f2966", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } } }, "BOM": { "muted": { "50": { "$type": "color", "$value": "#fbfbfd", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#f7f7f7", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#dedee1", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#b6b6bc", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#8e8d98", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#706f7c", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#5b5b6a", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#464651", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#323238", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#1c1c1f", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#161619", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "primary": { "50": { "$type": "color", "$value": "#fff4f3", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#ffcbc7", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#ff7c6a", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#f24300", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#e43f00", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#d13900", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#b02f00", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#8f2400", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#6f1a00", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#501000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#380900", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#d1390080", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "hero": { "50": { "$type": "color", "$value": "#f6f5ff", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#dad6fe", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#c6c0fd", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#a094fc", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#685ac0", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#534891", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#433781", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#33286a", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#261b58", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#20024e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#1b0045", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#53489180", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "pop": { "50": { "$type": "color", "$value": "#f6f5ff", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#ebe9fe", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#dad6fe", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#c6c0fd", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#b2aafd", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#a094fc", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#7d67fa", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#5b31f8", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#3d0dc0", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#200470", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#140250", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#a094fc80", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "holler": { "50": { "$type": "color", "$value": "#eeedf8", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#dfddf3", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#c1bce8", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#a39cdc", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#8379cf", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#685ac0", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#5141ac", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#3f3288", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#2b2162", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#19123e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#0e0928", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#685ac080", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "sing": { "50": { "$type": "color", "$value": "#fff1ea", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#fee3d4", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#fec6a3", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#fda85f", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#ed9019", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#d17e15", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#a5620e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#7c4908", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#553004", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#321a01", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#210f01", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#d17e1580", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "dance": { "50": { "$type": "color", "$value": "#ffe9e7", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#ffcfcb", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#ff9b90", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#ff6244", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#d63c00", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#9e2a00", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#822100", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#671800", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#490e00", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#300700", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#230400", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#9e2a0080", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } } }, "BSA": { "muted": { "50": { "$type": "color", "$value": "#f9f9fa", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#f5f5f6", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#dedee1", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#b6b6bc", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#8e8d98", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#706f7c", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#5b5b6a", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#464651", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#323238", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#1c1c1f", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#161619", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "primary": { "50": { "$type": "color", "$value": "#fef0f1", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#fccbcc", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#f96a6f", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#f9434f", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#ed1f30", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#d81b2b", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#b61523", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#98101b", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#7a0a14", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#56050b", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#380205", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#d81b2b80", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "hero": { "50": { "$type": "color", "$value": "#e9f1fb", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#b5d0f2", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#4c8de1", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#2574da", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#1050a2", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#002f6c", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#00285e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#002657", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#001f47", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#001b3d", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#001838", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#002f6c8c", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "pop": { "50": { "$type": "color", "$value": "#e3fafc", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#c1f6fa", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#69ebf7", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#09d9ec", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#00c9db", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#00adbd", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#00919e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#007580", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#00545c", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#00383d", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#002529", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#00adbd80", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "holler": { "50": { "$type": "color", "$value": "#fbeef6", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#f4cce3", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#e689bd", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#db529e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#cf2b86", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#a22269", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#871c57", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#6e1747", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#541237", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#3b0c26", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#2e0a1e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#a2226980", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "sing": { "50": { "$type": "color", "$value": "#eff9ec", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#d2edc9", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#b5e2a7", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#95d581", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#78ca5e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#5cbb3e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#4d9d34", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#3c7b29", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#2d5c1e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#1e3d14", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#172e0f", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#5cbb3e80", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } }, "dance": { "50": { "$type": "color", "$value": "#fef1e1", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "100": { "$type": "color", "$value": "#fde0bf", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "200": { "$type": "color", "$value": "#fbcd98", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "300": { "$type": "color", "$value": "#faba70", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "400": { "$type": "color", "$value": "#f8a444", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "500": { "$type": "color", "$value": "#f7921e", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "600": { "$type": "color", "$value": "#d97708", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "700": { "$type": "color", "$value": "#ac5f06", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "800": { "$type": "color", "$value": "#7b4404", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "900": { "$type": "color", "$value": "#4a2903", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "950": { "$type": "color", "$value": "#311b02", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "opacity": { "$type": "color", "$value": "#f7921e80", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } } }, "mono": { "white": { "$type": "color", "$value": "#ffffff", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "black": { "$type": "color", "$value": "#000000", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } } }, "border": { "radius": { "0px": { "$type": "float", "$value": 0, "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "3px": { "$type": "float", "$value": 3, "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "4px": { "$type": "float", "$value": 4, "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "5px": { "$type": "float", "$value": 5, "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "6px": { "$type": "float", "$value": 6, "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "8px": { "$type": "float", "$value": 8, "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "12px": { "$type": "float", "$value": 12, "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "16px": { "$type": "float", "$value": 16, "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "24px": { "$type": "float", "$value": 24, "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "999px": { "$type": "float", "$value": 999, "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true } } } } }, { "Tokens": { "modes": { "Westpac": { "light-mode": { "color": { "background": { "background-white": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a white background use this token" }, "background-pale": { "$type": "color", "$value": "{color.WBC.muted.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a grey background use this token. Note: this token replaces the current Background colour style." }, "background-faint": { "$type": "color", "$value": "{color.WBC.muted.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a light grey background use this token. Note: this token replaces the current Light colour style. Do not use this token as a screen background." }, "background-primary": { "$type": "color", "$value": "{color.WBC.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" }, "background-hero": { "$type": "color", "$value": "{color.WBC.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" } }, "surface": { "surface-muted-vivid": { "$type": "color", "$value": "{color.WBC.muted.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for surfaces that need to be the same colour as body text (icons, arrows etc)." }, "surface-muted": { "$type": "color", "$value": "{color.WBC.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Muted colour style." }, "surface-muted-strong": { "$type": "color", "$value": "{color.WBC.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-mild": { "$type": "color", "$value": "{color.WBC.muted.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-soft": { "$type": "color", "$value": "{color.WBC.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-pale": { "$type": "color", "$value": "{color.WBC.muted.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Background colour style. Tip: In light mode this colour is the same as background-pale however they behave differently in dark mode." }, "surface-muted-faint": { "$type": "color", "$value": "{color.WBC.muted.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Light colour style. Tip: In light mode this colour is the same as background-faint however they each behave differently in dark mode." }, "surface-primary": { "$type": "color", "$value": "{color.WBC.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Primary colour style." }, "surface-primary-faint": { "$type": "color", "$value": "{color.WBC.primary.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-hero": { "$type": "color", "$value": "{color.WBC.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Hero colour style." }, "surface-hero-faint": { "$type": "color", "$value": "{color.WBC.hero.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-pop": { "$type": "color", "$value": "{color.WBC.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-pop-faint": { "$type": "color", "$value": "{color.WBC.pop.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop Light colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-holler": { "$type": "color", "$value": "{color.WBC.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-holler-faint": { "$type": "color", "$value": "{color.WBC.holler.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else." }, "surface-success-faint": { "$type": "color", "$value": "{color.reserved.success.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else. Note: this surface should always be used with border-success-mild as shown here." }, "surface-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else." }, "surface-info-faint": { "$type": "color", "$value": "{color.reserved.info.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else. Note: this surface should always be used with border-info-mild as shown here." }, "surface-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else." }, "surface-warning-faint": { "$type": "color", "$value": "{color.reserved.warning.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else. Note: this surface should always be used with border-warning-mild as shown here." }, "surface-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else." }, "surface-danger-faint": { "$type": "color", "$value": "{color.reserved.danger.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else. Note: this surface should always be used with border-danger-mild as shown here." }, "surface-system-error": { "$type": "color", "$value": "{color.reserved.system.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-system-error-dark": { "$type": "color", "$value": "{color.reserved.system.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "White in light mode and black in dark mode. Use with caution, black often creates too much contrast which defeats the object of reducing glare. Tip: Use background-white. This will provide the same results with less contrast in dark mode." }, "surface-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Always white. Use with caution, in Dark Mode white often creates too much contrast which defeats the object of reducing glare. Tip: Use surface-mono or background-white as these tokens are designed to work in dark mode." } }, "text": { "text-body": { "$type": "color", "$value": "{color.WBC.muted.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for paragraph text and UI elements - labels, buttons, inputs etc" }, "text-heading": { "$type": "color", "$value": "{color.WBC.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for headings only. Note: Using text-heading on anything other than headings may produce unexpected results in multi-brand applications." }, "text-muted": { "$type": "color", "$value": "{color.WBC.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires less emphasis like hint text etc." }, "text-primary": { "$type": "color", "$value": "{color.WBC.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution and in accordance with the brand guidelines. Tip: If your text is a link always use the text-link token." }, "text-hero": { "$type": "color", "$value": "{color.WBC.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc." }, "text-holler": { "$type": "color", "$value": "{color.WBC.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "text-link": { "$type": "color", "$value": "{color.WBC.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text links only. Note: In Westpac this colour is exactly the same as text-primary however this may not be the case in other brands." }, "text-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-system-error": { "$type": "color", "$value": "{color.reserved.system.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for system error alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, text-mono is white in light mode and black in dark mode. It’s typically used for UI elements like buttons, tabs, panel heading etc." }, "text-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-reversed, text-reversed is always white. Use with caution, in dark mode white creates too much contrast which defeats the object of reducing glare. Tip: Try using text-mono" } }, "border": { "border-muted": { "$type": "color", "$value": "{color.WBC.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-muted-strong": { "$type": "color", "$value": "{color.WBC.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border Dark colour style. Use for UI components that require accessible contrast ratios eg. Inputs, Selects etc" }, "border-muted-mild": { "$type": "color", "$value": "{color.WBC.muted.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "border-muted-soft": { "$type": "color", "$value": "{color.WBC.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border colour style. Use for UI components and page elements that don’t require accessible borders - Selectors, Flexi-cell, Tabs, section dividers etc" }, "border-hero": { "$type": "color", "$value": "{color.WBC.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-primary": { "$type": "color", "$value": "{color.WBC.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-pop": { "$type": "color", "$value": "{color.WBC.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-holler": { "$type": "color", "$value": "{color.WBC.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "border-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-success-mild": { "$type": "color", "$value": "{color.reserved.success.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info-mild": { "$type": "color", "$value": "{color.reserved.info.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success info messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning-mild": { "$type": "color", "$value": "{color.reserved.warning.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Must only be used for the Danger alert component." }, "border-danger-mild": { "$type": "color", "$value": "{color.reserved.danger.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, border-mono is white in light mode and black in dark mode." }, "border-focus": { "$type": "color", "$value": "{color.WBC.holler.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use with focus state keyboard navigation." } }, "data": { "data-a-solid": { "$type": "color", "$value": "{color.WBC.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-tint": { "$type": "color", "$value": "{color.WBC.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-opacity": { "$type": "color", "$value": "{color.WBC.primary.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-solid": { "$type": "color", "$value": "{color.WBC.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-tint": { "$type": "color", "$value": "{color.WBC.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-opacity": { "$type": "color", "$value": "{color.WBC.hero.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-solid": { "$type": "color", "$value": "{color.WBC.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-tint": { "$type": "color", "$value": "{color.WBC.pop.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-opacity": { "$type": "color", "$value": "{color.WBC.pop.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-solid": { "$type": "color", "$value": "{color.WBC.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-tint": { "$type": "color", "$value": "{color.WBC.holler.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-opacity": { "$type": "color", "$value": "{color.WBC.holler.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-solid": { "$type": "color", "$value": "{color.WBC.sing.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-tint": { "$type": "color", "$value": "{color.WBC.sing.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-opacity": { "$type": "color", "$value": "{color.WBC.sing.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-solid": { "$type": "color", "$value": "{color.WBC.dance.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-tint": { "$type": "color", "$value": "{color.WBC.dance.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-opacity": { "$type": "color", "$value": "{color.WBC.dance.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." } }, "pictogram": { "surface-pictogram-base": { "$type": "color", "$value": "{color.WBC.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." }, "surface-pictogram-accent": { "$type": "color", "$value": "{color.WBC.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." } }, "state": { "surface-hover-primary": { "$type": "color", "$value": "{color.WBC.primary.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary": { "$type": "color", "$value": "{color.WBC.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-hero": { "$type": "color", "$value": "{color.WBC.hero.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-hero": { "$type": "color", "$value": "{color.WBC.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-primary-faint": { "$type": "color", "$value": "{color.WBC.primary.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary-faint": { "$type": "color", "$value": "{color.WBC.primary.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-hero-faint": { "$type": "color", "$value": "{color.WBC.hero.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-active-hero-faint": { "$type": "color", "$value": "{color.WBC.hero.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-muted-pale": { "$type": "color", "$value": "{color.WBC.muted.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-muted-pale": { "$type": "color", "$value": "{color.WBC.muted.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-mono": { "$type": "color", "$value": "{color.WBC.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." } } }, "border": { "radius": { "rounded-none": { "$type": "float", "$value": "{border.radius.0px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-sm": { "$type": "float", "$value": "{border.radius.3px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-md": { "$type": "float", "$value": "{border.radius.4px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-lg": { "$type": "float", "$value": "{border.radius.5px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-xl": { "$type": "float", "$value": "{border.radius.6px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-2xl": { "$type": "float", "$value": "{border.radius.8px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-3xl": { "$type": "float", "$value": "{border.radius.12px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-4xl": { "$type": "float", "$value": "{border.radius.16px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-5xl": { "$type": "float", "$value": "{border.radius.24px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-full": { "$type": "float", "$value": "{border.radius.999px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } }, "misc": { "multi-brand": { "$type": "string", "$value": "Westpac", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "brand-font": { "$type": "string", "$value": "Westpac", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "mode": { "$type": "string", "$value": "Light mode", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } }, "dark-mode": { "color": { "background": { "background-white": { "$type": "color", "$value": "{color.WBC.muted.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a white background use this token" }, "background-pale": { "$type": "color", "$value": "{color.WBC.muted.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a grey background use this token. Note: this token replaces the current Background colour style." }, "background-faint": { "$type": "color", "$value": "{color.WBC.muted.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a light grey background use this token. Note: this token replaces the current Light colour style. Do not use this token as a screen background." }, "background-primary": { "$type": "color", "$value": "{color.WBC.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" }, "background-hero": { "$type": "color", "$value": "{color.WBC.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" } }, "surface": { "surface-muted-vivid": { "$type": "color", "$value": "{color.WBC.muted.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for surfaces that need to be the same colour as body text (icons, arrows etc)." }, "surface-muted": { "$type": "color", "$value": "{color.WBC.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Muted colour style." }, "surface-muted-strong": { "$type": "color", "$value": "{color.WBC.muted.600}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-mild": { "$type": "color", "$value": "{color.WBC.muted.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-soft": { "$type": "color", "$value": "{color.WBC.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-pale": { "$type": "color", "$value": "{color.WBC.muted.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Background colour style. Tip: In light mode this colour is the same as background-pale however they behave differently in dark mode." }, "surface-muted-faint": { "$type": "color", "$value": "{color.WBC.muted.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Light colour style. Tip: In light mode this colour is the same as background-faint however they each behave differently in dark mode." }, "surface-primary": { "$type": "color", "$value": "{color.WBC.primary.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Primary colour style." }, "surface-primary-faint": { "$type": "color", "$value": "{color.WBC.primary.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-hero": { "$type": "color", "$value": "{color.WBC.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Hero colour style." }, "surface-hero-faint": { "$type": "color", "$value": "{color.WBC.hero.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-pop": { "$type": "color", "$value": "{color.WBC.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-pop-faint": { "$type": "color", "$value": "{color.WBC.pop.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop Light colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-holler": { "$type": "color", "$value": "{color.WBC.holler.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-holler-faint": { "$type": "color", "$value": "{color.WBC.holler.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-success": { "$type": "color", "$value": "{color.reserved.success.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else." }, "surface-success-faint": { "$type": "color", "$value": "{color.reserved.success.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else. Note: this surface should always be used with border-success-mild as shown here." }, "surface-info": { "$type": "color", "$value": "{color.reserved.info.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else." }, "surface-info-faint": { "$type": "color", "$value": "{color.reserved.info.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else. Note: this surface should always be used with border-info-mild as shown here." }, "surface-warning": { "$type": "color", "$value": "{color.reserved.warning.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else." }, "surface-warning-faint": { "$type": "color", "$value": "{color.reserved.warning.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else. Note: this surface should always be used with border-warning-mild as shown here." }, "surface-danger": { "$type": "color", "$value": "{color.reserved.danger.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else." }, "surface-danger-faint": { "$type": "color", "$value": "{color.reserved.danger.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else. Note: this surface should always be used with border-danger-mild as shown here." }, "surface-system-error": { "$type": "color", "$value": "{color.reserved.system.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-system-error-dark": { "$type": "color", "$value": "{color.reserved.system.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "White in light mode and black in dark mode. Use with caution, black often creates too much contrast which defeats the object of reducing glare. Tip: Use background-white. This will provide the same results with less contrast in dark mode." }, "surface-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Always white. Use with caution, in Dark Mode white often creates too much contrast which defeats the object of reducing glare. Tip: Use surface-mono or background-white as these tokens are designed to work in dark mode." } }, "text": { "text-body": { "$type": "color", "$value": "{color.WBC.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for paragraph text and UI elements - labels, buttons, inputs etc" }, "text-heading": { "$type": "color", "$value": "{color.WBC.hero.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for headings only. Note: Using text-heading on anything other than headings may produce unexpected results in multi-brand applications." }, "text-muted": { "$type": "color", "$value": "{color.WBC.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires less emphasis like hint text etc." }, "text-primary": { "$type": "color", "$value": "{color.WBC.primary.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution and in accordance with the brand guidelines. Tip: If your text is a link always use the text-link token." }, "text-hero": { "$type": "color", "$value": "{color.WBC.hero.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc." }, "text-holler": { "$type": "color", "$value": "{color.WBC.holler.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "text-link": { "$type": "color", "$value": "{color.WBC.primary.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text links only. Note: In Westpac this colour is exactly the same as text-primary however this may not be the case in other brands." }, "text-success": { "$type": "color", "$value": "{color.reserved.success.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-info": { "$type": "color", "$value": "{color.reserved.info.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-warning": { "$type": "color", "$value": "{color.reserved.warning.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-danger": { "$type": "color", "$value": "{color.reserved.danger.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-system-error": { "$type": "color", "$value": "{color.reserved.system.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for system error alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, text-mono is white in light mode and black in dark mode. It’s typically used for UI elements like buttons, tabs, panel heading etc." }, "text-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-reversed, text-reversed is always white. Use with caution, in dark mode white creates too much contrast which defeats the object of reducing glare. Tip: Try using text-mono" } }, "border": { "border-muted": { "$type": "color", "$value": "{color.WBC.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-muted-strong": { "$type": "color", "$value": "{color.WBC.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border Dark colour style. Use for UI components that require accessible contrast ratios eg. Inputs, Selects etc" }, "border-muted-mild": { "$type": "color", "$value": "{color.WBC.muted.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "border-muted-soft": { "$type": "color", "$value": "{color.WBC.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border colour style. Use for UI components and page elements that don’t require accessible borders - Selectors, Flexi-cell, Tabs, section dividers etc" }, "border-hero": { "$type": "color", "$value": "{color.WBC.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-primary": { "$type": "color", "$value": "{color.WBC.primary.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-pop": { "$type": "color", "$value": "{color.WBC.pop.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-holler": { "$type": "color", "$value": "{color.WBC.holler.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "border-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-success-mild": { "$type": "color", "$value": "{color.reserved.success.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info-mild": { "$type": "color", "$value": "{color.reserved.info.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success info messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning-mild": { "$type": "color", "$value": "{color.reserved.warning.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Must only be used for the Danger alert component." }, "border-danger-mild": { "$type": "color", "$value": "{color.reserved.danger.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, border-mono is white in light mode and black in dark mode." }, "border-focus": { "$type": "color", "$value": "{color.WBC.holler.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use with focus state keyboard navigation." } }, "data": { "data-a-solid": { "$type": "color", "$value": "{color.WBC.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-tint": { "$type": "color", "$value": "{color.WBC.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-opacity": { "$type": "color", "$value": "{color.WBC.primary.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-solid": { "$type": "color", "$value": "{color.WBC.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-tint": { "$type": "color", "$value": "{color.WBC.hero.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-opacity": { "$type": "color", "$value": "{color.WBC.hero.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-solid": { "$type": "color", "$value": "{color.WBC.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-tint": { "$type": "color", "$value": "{color.WBC.pop.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-opacity": { "$type": "color", "$value": "{color.WBC.pop.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-solid": { "$type": "color", "$value": "{color.WBC.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-tint": { "$type": "color", "$value": "{color.WBC.holler.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-opacity": { "$type": "color", "$value": "{color.WBC.holler.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-solid": { "$type": "color", "$value": "{color.WBC.sing.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-tint": { "$type": "color", "$value": "{color.WBC.sing.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-opacity": { "$type": "color", "$value": "{color.WBC.sing.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-solid": { "$type": "color", "$value": "{color.WBC.dance.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-tint": { "$type": "color", "$value": "{color.WBC.dance.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-opacity": { "$type": "color", "$value": "{color.WBC.dance.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." } }, "pictogram": { "surface-pictogram-base": { "$type": "color", "$value": "{color.WBC.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." }, "surface-pictogram-accent": { "$type": "color", "$value": "{color.WBC.primary.600}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." } }, "state": { "surface-hover-primary": { "$type": "color", "$value": "{color.WBC.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary": { "$type": "color", "$value": "{color.WBC.primary.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-hero": { "$type": "color", "$value": "{color.WBC.hero.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-hero": { "$type": "color", "$value": "{color.WBC.hero.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-primary-faint": { "$type": "color", "$value": "{color.WBC.primary.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary-faint": { "$type": "color", "$value": "{color.WBC.primary.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-hero-faint": { "$type": "color", "$value": "{color.WBC.hero.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-active-hero-faint": { "$type": "color", "$value": "{color.WBC.hero.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-muted-pale": { "$type": "color", "$value": "{color.WBC.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-muted-pale": { "$type": "color", "$value": "{color.WBC.muted.600}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-mono": { "$type": "color", "$value": "{color.WBC.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." } } }, "border": { "radius": { "rounded-none": { "$type": "float", "$value": "{border.radius.0px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-sm": { "$type": "float", "$value": "{border.radius.3px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-md": { "$type": "float", "$value": "{border.radius.4px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-lg": { "$type": "float", "$value": "{border.radius.5px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-xl": { "$type": "float", "$value": "{border.radius.6px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-2xl": { "$type": "float", "$value": "{border.radius.8px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-3xl": { "$type": "float", "$value": "{border.radius.12px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-4xl": { "$type": "float", "$value": "{border.radius.16px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-5xl": { "$type": "float", "$value": "{border.radius.24px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-full": { "$type": "float", "$value": "{border.radius.999px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } }, "misc": { "multi-brand": { "$type": "string", "$value": "Westpac", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "brand-font": { "$type": "string", "$value": "Westpac", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "mode": { "$type": "string", "$value": "Dark mode", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } } }, "Bank of Melbourne": { "light-mode": { "color": { "background": { "background-white": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a white background use this token" }, "background-pale": { "$type": "color", "$value": "{Primitives.color.BOM.muted.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a grey background use this token. Note: this token replaces the current Background colour style." }, "background-faint": { "$type": "color", "$value": "{Primitives.color.BOM.muted.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a light grey background use this token. Note: this token replaces the current Light colour style. Do not use this token as a screen background." }, "background-primary": { "$type": "color", "$value": "{Primitives.color.BOM.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" }, "background-hero": { "$type": "color", "$value": "{Primitives.color.BOM.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" } }, "surface": { "surface-muted-vivid": { "$type": "color", "$value": "{Primitives.color.BOM.hero.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for surfaces that need to be the same colour as body text (icons, arrows etc)." }, "surface-muted": { "$type": "color", "$value": "{Primitives.color.BOM.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Muted colour style." }, "surface-muted-strong": { "$type": "color", "$value": "{Primitives.color.BOM.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-mild": { "$type": "color", "$value": "{Primitives.color.BOM.muted.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-soft": { "$type": "color", "$value": "{Primitives.color.BOM.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-pale": { "$type": "color", "$value": "{Primitives.color.BOM.muted.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Background colour style. Tip: In light mode this colour is the same as background-pale however they behave differently in dark mode." }, "surface-muted-faint": { "$type": "color", "$value": "{Primitives.color.BOM.muted.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Light colour style. Tip: In light mode this colour is the same as background-faint however they each behave differently in dark mode." }, "surface-primary": { "$type": "color", "$value": "{Primitives.color.BOM.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Primary colour style." }, "surface-primary-faint": { "$type": "color", "$value": "{Primitives.color.BOM.primary.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-hero": { "$type": "color", "$value": "{Primitives.color.BOM.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Hero colour style." }, "surface-hero-faint": { "$type": "color", "$value": "{Primitives.color.BOM.hero.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-pop": { "$type": "color", "$value": "{Primitives.color.BOM.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-pop-faint": { "$type": "color", "$value": "{Primitives.color.BOM.pop.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop Light colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-holler": { "$type": "color", "$value": "{Primitives.color.BOM.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-holler-faint": { "$type": "color", "$value": "{Primitives.color.BOM.holler.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else." }, "surface-success-faint": { "$type": "color", "$value": "{color.reserved.success.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else. Note: this surface should always be used with border-success-mild as shown here." }, "surface-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else." }, "surface-info-faint": { "$type": "color", "$value": "{color.reserved.info.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else. Note: this surface should always be used with border-info-mild as shown here." }, "surface-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else." }, "surface-warning-faint": { "$type": "color", "$value": "{color.reserved.warning.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else. Note: this surface should always be used with border-warning-mild as shown here." }, "surface-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else." }, "surface-danger-faint": { "$type": "color", "$value": "{color.reserved.danger.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else. Note: this surface should always be used with border-danger-mild as shown here." }, "surface-system-error": { "$type": "color", "$value": "{color.reserved.system.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-system-error-dark": { "$type": "color", "$value": "{color.reserved.system.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "White in light mode and black in dark mode. Use with caution, black often creates too much contrast which defeats the object of reducing glare. Tip: Use background-white. This will provide the same results with less contrast in dark mode." }, "surface-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Always white. Use with caution, in Dark Mode white often creates too much contrast which defeats the object of reducing glare. Tip: Use surface-mono or background-white as these tokens are designed to work in dark mode." } }, "text": { "text-body": { "$type": "color", "$value": "{Primitives.color.BOM.hero.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for paragraph text and UI elements - labels, buttons, inputs etc" }, "text-heading": { "$type": "color", "$value": "{Primitives.color.BOM.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for headings only. Note: Using text-heading on anything other than headings may produce unexpected results in multi-brand applications." }, "text-muted": { "$type": "color", "$value": "{Primitives.color.BOM.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires less emphasis like hint text etc." }, "text-primary": { "$type": "color", "$value": "{Primitives.color.BOM.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution and in accordance with the brand guidelines. Tip: If your text is a link always use the text-link token." }, "text-hero": { "$type": "color", "$value": "{Primitives.color.BOM.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc." }, "text-holler": { "$type": "color", "$value": "{Primitives.color.BOM.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "text-link": { "$type": "color", "$value": "{Primitives.color.BOM.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text links only. Note: In Westpac this colour is exactly the same as text-primary however this may not be the case in other brands." }, "text-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-system-error": { "$type": "color", "$value": "{color.reserved.system.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for system error alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, text-mono is white in light mode and black in dark mode. It’s typically used for UI elements like buttons, tabs, panel heading etc." }, "text-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-reversed, text-reversed is always white. Use with caution, in dark mode white creates too much contrast which defeats the object of reducing glare. Tip: Try using text-mono" } }, "border": { "border-muted": { "$type": "color", "$value": "{Primitives.color.BOM.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-muted-strong": { "$type": "color", "$value": "{Primitives.color.BOM.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border Dark colour style. Use for UI components that require accessible contrast ratios eg. Inputs, Selects etc" }, "border-muted-mild": { "$type": "color", "$value": "{Primitives.color.BOM.muted.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "border-muted-soft": { "$type": "color", "$value": "{Primitives.color.BOM.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border colour style. Use for UI components and page elements that don’t require accessible borders - Selectors, Flexi-cell, Tabs, section dividers etc" }, "border-hero": { "$type": "color", "$value": "{Primitives.color.BOM.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-primary": { "$type": "color", "$value": "{Primitives.color.BOM.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-pop": { "$type": "color", "$value": "{Primitives.color.BOM.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-holler": { "$type": "color", "$value": "{Primitives.color.BOM.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "border-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-success-mild": { "$type": "color", "$value": "{color.reserved.success.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info-mild": { "$type": "color", "$value": "{color.reserved.info.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success info messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning-mild": { "$type": "color", "$value": "{color.reserved.warning.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Must only be used for the Danger alert component." }, "border-danger-mild": { "$type": "color", "$value": "{color.reserved.danger.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, border-mono is white in light mode and black in dark mode." }, "border-focus": { "$type": "color", "$value": "{Primitives.color.BOM.holler.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use with focus state keyboard navigation." } }, "data": { "data-a-solid": { "$type": "color", "$value": "{Primitives.color.BOM.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-tint": { "$type": "color", "$value": "{Primitives.color.BOM.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-opacity": { "$type": "color", "$value": "{Primitives.color.BOM.primary.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-solid": { "$type": "color", "$value": "{Primitives.color.BOM.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-tint": { "$type": "color", "$value": "{Primitives.color.BOM.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-opacity": { "$type": "color", "$value": "{Primitives.color.BOM.hero.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-solid": { "$type": "color", "$value": "{Primitives.color.BOM.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-tint": { "$type": "color", "$value": "{Primitives.color.BOM.pop.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-opacity": { "$type": "color", "$value": "{Primitives.color.BOM.pop.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-solid": { "$type": "color", "$value": "{Primitives.color.BOM.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-tint": { "$type": "color", "$value": "{Primitives.color.BOM.holler.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-opacity": { "$type": "color", "$value": "{Primitives.color.BOM.holler.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-solid": { "$type": "color", "$value": "{Primitives.color.BOM.sing.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-tint": { "$type": "color", "$value": "{Primitives.color.BOM.sing.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-opacity": { "$type": "color", "$value": "{Primitives.color.BOM.sing.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-solid": { "$type": "color", "$value": "{Primitives.color.BOM.dance.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-tint": { "$type": "color", "$value": "{Primitives.color.BOM.dance.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-opacity": { "$type": "color", "$value": "{Primitives.color.BOM.dance.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." } }, "pictogram": { "surface-pictogram-base": { "$type": "color", "$value": "{Primitives.color.BOM.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." }, "surface-pictogram-accent": { "$type": "color", "$value": "{Primitives.color.BOM.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." } }, "state": { "surface-hover-primary": { "$type": "color", "$value": "{Primitives.color.BOM.primary.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary": { "$type": "color", "$value": "{Primitives.color.BOM.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-hero": { "$type": "color", "$value": "{Primitives.color.BOM.hero.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-hero": { "$type": "color", "$value": "{Primitives.color.BOM.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-primary-faint": { "$type": "color", "$value": "{Primitives.color.BOM.primary.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary-faint": { "$type": "color", "$value": "{Primitives.color.BOM.primary.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-hero-faint": { "$type": "color", "$value": "{Primitives.color.BOM.hero.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-active-hero-faint": { "$type": "color", "$value": "{Primitives.color.BOM.hero.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-muted-pale": { "$type": "color", "$value": "{Primitives.color.BOM.muted.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-muted-pale": { "$type": "color", "$value": "{Primitives.color.BOM.muted.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-mono": { "$type": "color", "$value": "{Primitives.color.BOM.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." } } }, "border": { "radius": { "rounded-none": { "$type": "float", "$value": "{border.radius.0px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-sm": { "$type": "float", "$value": "{border.radius.3px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-md": { "$type": "float", "$value": "{border.radius.4px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-lg": { "$type": "float", "$value": "{border.radius.5px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-xl": { "$type": "float", "$value": "{border.radius.6px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-2xl": { "$type": "float", "$value": "{border.radius.8px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-3xl": { "$type": "float", "$value": "{border.radius.12px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-4xl": { "$type": "float", "$value": "{border.radius.16px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-5xl": { "$type": "float", "$value": "{border.radius.24px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-full": { "$type": "float", "$value": "{border.radius.999px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } }, "misc": { "multi-brand": { "$type": "string", "$value": "Bank of Melbourne", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "brand-font": { "$type": "string", "$value": "Brown", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "mode": { "$type": "string", "$value": "Light mode", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } }, "dark-mode": { "color": { "background": { "background-white": { "$type": "color", "$value": "{Primitives.color.BOM.muted.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a white background use this token" }, "background-pale": { "$type": "color", "$value": "{Primitives.color.BOM.muted.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a grey background use this token. Note: this token replaces the current Background colour style." }, "background-faint": { "$type": "color", "$value": "{Primitives.color.BOM.muted.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a light grey background use this token. Note: this token replaces the current Light colour style. Do not use this token as a screen background." }, "background-primary": { "$type": "color", "$value": "{Primitives.color.BOM.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" }, "background-hero": { "$type": "color", "$value": "{Primitives.color.BOM.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" } }, "surface": { "surface-muted-vivid": { "$type": "color", "$value": "{Primitives.color.BOM.muted.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for surfaces that need to be the same colour as body text (icons, arrows etc)." }, "surface-muted": { "$type": "color", "$value": "{Primitives.color.BOM.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Muted colour style." }, "surface-muted-strong": { "$type": "color", "$value": "{Primitives.color.BOM.muted.600}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-mild": { "$type": "color", "$value": "{Primitives.color.BOM.muted.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-soft": { "$type": "color", "$value": "{Primitives.color.BOM.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-pale": { "$type": "color", "$value": "{Primitives.color.BOM.muted.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Background colour style. Tip: In light mode this colour is the same as background-pale however they behave differently in dark mode." }, "surface-muted-faint": { "$type": "color", "$value": "{Primitives.color.BOM.muted.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Light colour style. Tip: In light mode this colour is the same as background-faint however they each behave differently in dark mode." }, "surface-primary": { "$type": "color", "$value": "{Primitives.color.BOM.primary.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Primary colour style." }, "surface-primary-faint": { "$type": "color", "$value": "{Primitives.color.BOM.primary.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-hero": { "$type": "color", "$value": "{Primitives.color.BOM.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Hero colour style." }, "surface-hero-faint": { "$type": "color", "$value": "{Primitives.color.BOM.hero.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-pop": { "$type": "color", "$value": "{Primitives.color.BOM.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-pop-faint": { "$type": "color", "$value": "{Primitives.color.BOM.pop.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop Light colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-holler": { "$type": "color", "$value": "{Primitives.color.BOM.holler.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-holler-faint": { "$type": "color", "$value": "{Primitives.color.BOM.holler.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-success": { "$type": "color", "$value": "{color.reserved.success.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else." }, "surface-success-faint": { "$type": "color", "$value": "{color.reserved.success.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else. Note: this surface should always be used with border-success-mild as shown here." }, "surface-info": { "$type": "color", "$value": "{color.reserved.info.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else." }, "surface-info-faint": { "$type": "color", "$value": "{color.reserved.info.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else. Note: this surface should always be used with border-info-mild as shown here." }, "surface-warning": { "$type": "color", "$value": "{color.reserved.warning.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else." }, "surface-warning-faint": { "$type": "color", "$value": "{color.reserved.warning.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else. Note: this surface should always be used with border-warning-mild as shown here." }, "surface-danger": { "$type": "color", "$value": "{color.reserved.danger.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else." }, "surface-danger-faint": { "$type": "color", "$value": "{color.reserved.danger.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else. Note: this surface should always be used with border-danger-mild as shown here." }, "surface-system-error": { "$type": "color", "$value": "{color.reserved.system.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-system-error-dark": { "$type": "color", "$value": "{color.reserved.system.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "White in light mode and black in dark mode. Use with caution, black often creates too much contrast which defeats the object of reducing glare. Tip: Use background-white. This will provide the same results with less contrast in dark mode." }, "surface-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Always white. Use with caution, in Dark Mode white often creates too much contrast which defeats the object of reducing glare. Tip: Use surface-mono or background-white as these tokens are designed to work in dark mode." } }, "text": { "text-body": { "$type": "color", "$value": "{Primitives.color.BOM.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for paragraph text and UI elements - labels, buttons, inputs etc" }, "text-heading": { "$type": "color", "$value": "{Primitives.color.BOM.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for headings only. Note: Using text-heading on anything other than headings may produce unexpected results in multi-brand applications." }, "text-muted": { "$type": "color", "$value": "{Primitives.color.BOM.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires less emphasis like hint text etc." }, "text-primary": { "$type": "color", "$value": "{Primitives.color.BOM.primary.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution and in accordance with the brand guidelines. Tip: If your text is a link always use the text-link token." }, "text-hero": { "$type": "color", "$value": "{Primitives.color.BOM.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc." }, "text-holler": { "$type": "color", "$value": "{Primitives.color.BOM.holler.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "text-link": { "$type": "color", "$value": "{Primitives.color.BOM.primary.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text links only. Note: In Westpac this colour is exactly the same as text-primary however this may not be the case in other brands." }, "text-success": { "$type": "color", "$value": "{color.reserved.success.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-info": { "$type": "color", "$value": "{color.reserved.info.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-warning": { "$type": "color", "$value": "{color.reserved.warning.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-danger": { "$type": "color", "$value": "{color.reserved.danger.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-system-error": { "$type": "color", "$value": "{color.reserved.system.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for system error alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, text-mono is white in light mode and black in dark mode. It’s typically used for UI elements like buttons, tabs, panel heading etc." }, "text-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-reversed, text-reversed is always white. Use with caution, in dark mode white creates too much contrast which defeats the object of reducing glare. Tip: Try using text-mono" } }, "border": { "border-muted": { "$type": "color", "$value": "{Primitives.color.BOM.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-muted-strong": { "$type": "color", "$value": "{Primitives.color.BOM.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border Dark colour style. Use for UI components that require accessible contrast ratios eg. Inputs, Selects etc" }, "border-muted-mild": { "$type": "color", "$value": "{Primitives.color.BOM.muted.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "border-muted-soft": { "$type": "color", "$value": "{Primitives.color.BOM.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border colour style. Use for UI components and page elements that don’t require accessible borders - Selectors, Flexi-cell, Tabs, section dividers etc" }, "border-hero": { "$type": "color", "$value": "{Primitives.color.BOM.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-primary": { "$type": "color", "$value": "{Primitives.color.BOM.primary.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-pop": { "$type": "color", "$value": "{Primitives.color.BOM.pop.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-holler": { "$type": "color", "$value": "{Primitives.color.BOM.holler.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "border-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-success-mild": { "$type": "color", "$value": "{color.reserved.success.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info-mild": { "$type": "color", "$value": "{color.reserved.info.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success info messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning-mild": { "$type": "color", "$value": "{color.reserved.warning.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Must only be used for the Danger alert component." }, "border-danger-mild": { "$type": "color", "$value": "{color.reserved.danger.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, border-mono is white in light mode and black in dark mode." }, "border-focus": { "$type": "color", "$value": "{Primitives.color.BOM.holler.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use with focus state keyboard navigation." } }, "data": { "data-a-solid": { "$type": "color", "$value": "{Primitives.color.BOM.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-tint": { "$type": "color", "$value": "{Primitives.color.BOM.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-opacity": { "$type": "color", "$value": "{Primitives.color.BOM.primary.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-solid": { "$type": "color", "$value": "{Primitives.color.BOM.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-tint": { "$type": "color", "$value": "{Primitives.color.BOM.hero.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-opacity": { "$type": "color", "$value": "{Primitives.color.BOM.hero.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-solid": { "$type": "color", "$value": "{Primitives.color.BOM.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-tint": { "$type": "color", "$value": "{Primitives.color.BOM.pop.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-opacity": { "$type": "color", "$value": "{Primitives.color.BOM.pop.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-solid": { "$type": "color", "$value": "{Primitives.color.BOM.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-tint": { "$type": "color", "$value": "{Primitives.color.BOM.holler.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-opacity": { "$type": "color", "$value": "{Primitives.color.BOM.holler.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-solid": { "$type": "color", "$value": "{Primitives.color.BOM.sing.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-tint": { "$type": "color", "$value": "{Primitives.color.BOM.sing.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-opacity": { "$type": "color", "$value": "{Primitives.color.BOM.sing.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-solid": { "$type": "color", "$value": "{Primitives.color.BOM.dance.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-tint": { "$type": "color", "$value": "{Primitives.color.BOM.dance.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-opacity": { "$type": "color", "$value": "{Primitives.color.BOM.dance.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." } }, "pictogram": { "surface-pictogram-base": { "$type": "color", "$value": "{Primitives.color.BOM.hero.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." }, "surface-pictogram-accent": { "$type": "color", "$value": "{Primitives.color.BOM.pop.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." } }, "state": { "surface-hover-primary": { "$type": "color", "$value": "{Primitives.color.BOM.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary": { "$type": "color", "$value": "{Primitives.color.BOM.primary.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-hero": { "$type": "color", "$value": "{Primitives.color.BOM.hero.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-hero": { "$type": "color", "$value": "{Primitives.color.BOM.hero.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-primary-faint": { "$type": "color", "$value": "{Primitives.color.BOM.primary.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary-faint": { "$type": "color", "$value": "{Primitives.color.BOM.primary.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-hero-faint": { "$type": "color", "$value": "{Primitives.color.BOM.hero.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-active-hero-faint": { "$type": "color", "$value": "{Primitives.color.BOM.hero.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-muted-pale": { "$type": "color", "$value": "{Primitives.color.BOM.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-muted-pale": { "$type": "color", "$value": "{Primitives.color.BOM.muted.600}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-mono": { "$type": "color", "$value": "{Primitives.color.BOM.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." } } }, "border": { "radius": { "rounded-none": { "$type": "float", "$value": "{border.radius.0px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-sm": { "$type": "float", "$value": "{border.radius.3px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-md": { "$type": "float", "$value": "{border.radius.4px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-lg": { "$type": "float", "$value": "{border.radius.5px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-xl": { "$type": "float", "$value": "{border.radius.6px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-2xl": { "$type": "float", "$value": "{border.radius.8px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-3xl": { "$type": "float", "$value": "{border.radius.12px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-4xl": { "$type": "float", "$value": "{border.radius.16px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-5xl": { "$type": "float", "$value": "{border.radius.24px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-full": { "$type": "float", "$value": "{border.radius.999px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } }, "misc": { "multi-brand": { "$type": "string", "$value": "Bank of Melbourne", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "brand-font": { "$type": "string", "$value": "Brown", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "mode": { "$type": "string", "$value": "Dark mode", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } } }, "StGeorge": { "light-mode": { "color": { "background": { "background-white": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a white background use this token" }, "background-pale": { "$type": "color", "$value": "{Primitives.color.STG.muted.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a grey background use this token. Note: this token replaces the current Background colour style." }, "background-faint": { "$type": "color", "$value": "{Primitives.color.STG.muted.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a light grey background use this token. Note: this token replaces the current Light colour style. Do not use this token as a screen background." }, "background-primary": { "$type": "color", "$value": "{Primitives.color.STG.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" }, "background-hero": { "$type": "color", "$value": "{Primitives.color.STG.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" } }, "surface": { "surface-muted-vivid": { "$type": "color", "$value": "{Primitives.color.STG.hero.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for surfaces that need to be the same colour as body text (icons, arrows etc)." }, "surface-muted": { "$type": "color", "$value": "{Primitives.color.STG.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Muted colour style." }, "surface-muted-strong": { "$type": "color", "$value": "{Primitives.color.STG.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-mild": { "$type": "color", "$value": "{Primitives.color.STG.muted.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-soft": { "$type": "color", "$value": "{Primitives.color.STG.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-pale": { "$type": "color", "$value": "{Primitives.color.STG.muted.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Background colour style. Tip: In light mode this colour is the same as background-pale however they behave differently in dark mode." }, "surface-muted-faint": { "$type": "color", "$value": "{Primitives.color.STG.muted.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Light colour style. Tip: In light mode this colour is the same as background-faint however they each behave differently in dark mode." }, "surface-primary": { "$type": "color", "$value": "{Primitives.color.STG.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Primary colour style." }, "surface-primary-faint": { "$type": "color", "$value": "{Primitives.color.STG.primary.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-hero": { "$type": "color", "$value": "{Primitives.color.STG.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Hero colour style." }, "surface-hero-faint": { "$type": "color", "$value": "{Primitives.color.STG.hero.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-pop": { "$type": "color", "$value": "{Primitives.color.STG.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-pop-faint": { "$type": "color", "$value": "{Primitives.color.STG.pop.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop Light colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-holler": { "$type": "color", "$value": "{Primitives.color.STG.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-holler-faint": { "$type": "color", "$value": "{Primitives.color.STG.holler.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else." }, "surface-success-faint": { "$type": "color", "$value": "{color.reserved.success.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else. Note: this surface should always be used with border-success-mild as shown here." }, "surface-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else." }, "surface-info-faint": { "$type": "color", "$value": "{color.reserved.info.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else. Note: this surface should always be used with border-info-mild as shown here." }, "surface-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else." }, "surface-warning-faint": { "$type": "color", "$value": "{color.reserved.warning.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else. Note: this surface should always be used with border-warning-mild as shown here." }, "surface-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else." }, "surface-danger-faint": { "$type": "color", "$value": "{color.reserved.danger.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else. Note: this surface should always be used with border-danger-mild as shown here." }, "surface-system-error": { "$type": "color", "$value": "{color.reserved.system.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-system-error-dark": { "$type": "color", "$value": "{color.reserved.system.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "White in light mode and black in dark mode. Use with caution, black often creates too much contrast which defeats the object of reducing glare. Tip: Use background-white. This will provide the same results with less contrast in dark mode." }, "surface-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Always white. Use with caution, in Dark Mode white often creates too much contrast which defeats the object of reducing glare. Tip: Use surface-mono or background-white as these tokens are designed to work in dark mode." } }, "text": { "text-body": { "$type": "color", "$value": "{Primitives.color.STG.hero.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for paragraph text and UI elements - labels, buttons, inputs etc" }, "text-heading": { "$type": "color", "$value": "{Primitives.color.STG.hero.600}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for headings only. Note: Using text-heading on anything other than headings may produce unexpected results in multi-brand applications." }, "text-muted": { "$type": "color", "$value": "{Primitives.color.STG.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires less emphasis like hint text etc." }, "text-primary": { "$type": "color", "$value": "{Primitives.color.STG.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution and in accordance with the brand guidelines. Tip: If your text is a link always use the text-link token." }, "text-hero": { "$type": "color", "$value": "{Primitives.color.STG.hero.600}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc." }, "text-holler": { "$type": "color", "$value": "{Primitives.color.STG.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "text-link": { "$type": "color", "$value": "{Primitives.color.STG.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text links only. Note: In Westpac this colour is exactly the same as text-primary however this may not be the case in other brands." }, "text-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-system-error": { "$type": "color", "$value": "{color.reserved.system.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for system error alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, text-mono is white in light mode and black in dark mode. It’s typically used for UI elements like buttons, tabs, panel heading etc." }, "text-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-reversed, text-reversed is always white. Use with caution, in dark mode white creates too much contrast which defeats the object of reducing glare. Tip: Try using text-mono" } }, "border": { "border-muted": { "$type": "color", "$value": "{Primitives.color.STG.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-muted-strong": { "$type": "color", "$value": "{Primitives.color.STG.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border Dark colour style. Use for UI components that require accessible contrast ratios eg. Inputs, Selects etc" }, "border-muted-mild": { "$type": "color", "$value": "{Primitives.color.STG.muted.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "border-muted-soft": { "$type": "color", "$value": "{Primitives.color.STG.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border colour style. Use for UI components and page elements that don’t require accessible borders - Selectors, Flexi-cell, Tabs, section dividers etc" }, "border-hero": { "$type": "color", "$value": "{Primitives.color.STG.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-primary": { "$type": "color", "$value": "{Primitives.color.STG.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-pop": { "$type": "color", "$value": "{Primitives.color.STG.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-holler": { "$type": "color", "$value": "{Primitives.color.STG.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "border-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-success-mild": { "$type": "color", "$value": "{color.reserved.success.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info-mild": { "$type": "color", "$value": "{color.reserved.info.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success info messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning-mild": { "$type": "color", "$value": "{color.reserved.warning.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Must only be used for the Danger alert component." }, "border-danger-mild": { "$type": "color", "$value": "{color.reserved.danger.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, border-mono is white in light mode and black in dark mode." }, "border-focus": { "$type": "color", "$value": "{Primitives.color.STG.holler.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use with focus state keyboard navigation." } }, "data": { "data-a-solid": { "$type": "color", "$value": "{Primitives.color.STG.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-tint": { "$type": "color", "$value": "{Primitives.color.STG.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-opacity": { "$type": "color", "$value": "{Primitives.color.STG.primary.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-solid": { "$type": "color", "$value": "{Primitives.color.STG.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-tint": { "$type": "color", "$value": "{Primitives.color.STG.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-opacity": { "$type": "color", "$value": "{Primitives.color.STG.hero.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-solid": { "$type": "color", "$value": "{Primitives.color.STG.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-tint": { "$type": "color", "$value": "{Primitives.color.STG.pop.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-opacity": { "$type": "color", "$value": "{Primitives.color.STG.pop.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-solid": { "$type": "color", "$value": "{Primitives.color.STG.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-tint": { "$type": "color", "$value": "{Primitives.color.STG.holler.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-opacity": { "$type": "color", "$value": "{Primitives.color.STG.holler.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-solid": { "$type": "color", "$value": "{Primitives.color.STG.sing.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-tint": { "$type": "color", "$value": "{Primitives.color.STG.sing.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-opacity": { "$type": "color", "$value": "{Primitives.color.STG.sing.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-solid": { "$type": "color", "$value": "{Primitives.color.STG.dance.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-tint": { "$type": "color", "$value": "{Primitives.color.STG.dance.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-opacity": { "$type": "color", "$value": "{Primitives.color.STG.dance.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." } }, "pictogram": { "surface-pictogram-base": { "$type": "color", "$value": "{Primitives.color.STG.hero.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." }, "surface-pictogram-accent": { "$type": "color", "$value": "{Primitives.color.STG.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." } }, "state": { "surface-hover-primary": { "$type": "color", "$value": "{Primitives.color.STG.primary.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary": { "$type": "color", "$value": "{Primitives.color.STG.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-hero": { "$type": "color", "$value": "{Primitives.color.STG.hero.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-hero": { "$type": "color", "$value": "{Primitives.color.STG.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-primary-faint": { "$type": "color", "$value": "{Primitives.color.STG.primary.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary-faint": { "$type": "color", "$value": "{Primitives.color.STG.primary.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-hero-faint": { "$type": "color", "$value": "{Primitives.color.STG.hero.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-active-hero-faint": { "$type": "color", "$value": "{Primitives.color.STG.hero.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-muted-pale": { "$type": "color", "$value": "{Primitives.color.STG.muted.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-muted-pale": { "$type": "color", "$value": "{Primitives.color.STG.muted.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-mono": { "$type": "color", "$value": "{Primitives.color.STG.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." } } }, "border": { "radius": { "rounded-none": { "$type": "float", "$value": "{border.radius.0px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-sm": { "$type": "float", "$value": "{border.radius.3px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-md": { "$type": "float", "$value": "{border.radius.4px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-lg": { "$type": "float", "$value": "{border.radius.5px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-xl": { "$type": "float", "$value": "{border.radius.6px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-2xl": { "$type": "float", "$value": "{border.radius.8px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-3xl": { "$type": "float", "$value": "{border.radius.12px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-4xl": { "$type": "float", "$value": "{border.radius.16px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-5xl": { "$type": "float", "$value": "{border.radius.24px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-full": { "$type": "float", "$value": "{border.radius.999px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } }, "misc": { "multi-brand": { "$type": "string", "$value": "StGeorge", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "brand-font": { "$type": "string", "$value": "Dragon Bold", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "mode": { "$type": "string", "$value": "Light mode", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } }, "dark-mode": { "color": { "background": { "background-white": { "$type": "color", "$value": "{Primitives.color.STG.muted.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a white background use this token" }, "background-pale": { "$type": "color", "$value": "{Primitives.color.STG.muted.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a grey background use this token. Note: this token replaces the current Background colour style." }, "background-faint": { "$type": "color", "$value": "{Primitives.color.STG.muted.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a light grey background use this token. Note: this token replaces the current Light colour style. Do not use this token as a screen background." }, "background-primary": { "$type": "color", "$value": "{Primitives.color.STG.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" }, "background-hero": { "$type": "color", "$value": "{Primitives.color.STG.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" } }, "surface": { "surface-muted-vivid": { "$type": "color", "$value": "{Primitives.color.STG.muted.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for surfaces that need to be the same colour as body text (icons, arrows etc)." }, "surface-muted": { "$type": "color", "$value": "{Primitives.color.STG.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Muted colour style." }, "surface-muted-strong": { "$type": "color", "$value": "{Primitives.color.STG.muted.600}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-mild": { "$type": "color", "$value": "{Primitives.color.STG.muted.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-soft": { "$type": "color", "$value": "{Primitives.color.STG.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-pale": { "$type": "color", "$value": "{Primitives.color.STG.muted.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Background colour style. Tip: In light mode this colour is the same as background-pale however they behave differently in dark mode." }, "surface-muted-faint": { "$type": "color", "$value": "{Primitives.color.STG.muted.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Light colour style. Tip: In light mode this colour is the same as background-faint however they each behave differently in dark mode." }, "surface-primary": { "$type": "color", "$value": "{Primitives.color.STG.primary.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Primary colour style." }, "surface-primary-faint": { "$type": "color", "$value": "{Primitives.color.STG.primary.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-hero": { "$type": "color", "$value": "{Primitives.color.STG.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Hero colour style." }, "surface-hero-faint": { "$type": "color", "$value": "{Primitives.color.STG.hero.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-pop": { "$type": "color", "$value": "{Primitives.color.STG.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-pop-faint": { "$type": "color", "$value": "{Primitives.color.STG.pop.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop Light colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-holler": { "$type": "color", "$value": "{Primitives.color.STG.holler.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-holler-faint": { "$type": "color", "$value": "{Primitives.color.STG.holler.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-success": { "$type": "color", "$value": "{color.reserved.success.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else." }, "surface-success-faint": { "$type": "color", "$value": "{color.reserved.success.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else. Note: this surface should always be used with border-success-mild as shown here." }, "surface-info": { "$type": "color", "$value": "{color.reserved.info.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else." }, "surface-info-faint": { "$type": "color", "$value": "{color.reserved.info.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else. Note: this surface should always be used with border-info-mild as shown here." }, "surface-warning": { "$type": "color", "$value": "{color.reserved.warning.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else." }, "surface-warning-faint": { "$type": "color", "$value": "{color.reserved.warning.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else. Note: this surface should always be used with border-warning-mild as shown here." }, "surface-danger": { "$type": "color", "$value": "{color.reserved.danger.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else." }, "surface-danger-faint": { "$type": "color", "$value": "{color.reserved.danger.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else. Note: this surface should always be used with border-danger-mild as shown here." }, "surface-system-error": { "$type": "color", "$value": "{color.reserved.system.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-system-error-dark": { "$type": "color", "$value": "{color.reserved.system.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "White in light mode and black in dark mode. Use with caution, black often creates too much contrast which defeats the object of reducing glare. Tip: Use background-white. This will provide the same results with less contrast in dark mode." }, "surface-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Always white. Use with caution, in Dark Mode white often creates too much contrast which defeats the object of reducing glare. Tip: Use surface-mono or background-white as these tokens are designed to work in dark mode." } }, "text": { "text-body": { "$type": "color", "$value": "{Primitives.color.STG.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for paragraph text and UI elements - labels, buttons, inputs etc" }, "text-heading": { "$type": "color", "$value": "{Primitives.color.STG.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for headings only. Note: Using text-heading on anything other than headings may produce unexpected results in multi-brand applications." }, "text-muted": { "$type": "color", "$value": "{Primitives.color.STG.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires less emphasis like hint text etc." }, "text-primary": { "$type": "color", "$value": "{Primitives.color.STG.primary.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution and in accordance with the brand guidelines. Tip: If your text is a link always use the text-link token." }, "text-hero": { "$type": "color", "$value": "{Primitives.color.STG.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc." }, "text-holler": { "$type": "color", "$value": "{Primitives.color.STG.holler.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "text-link": { "$type": "color", "$value": "{Primitives.color.STG.primary.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text links only. Note: In Westpac this colour is exactly the same as text-primary however this may not be the case in other brands." }, "text-success": { "$type": "color", "$value": "{color.reserved.success.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-info": { "$type": "color", "$value": "{color.reserved.info.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-warning": { "$type": "color", "$value": "{color.reserved.warning.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-danger": { "$type": "color", "$value": "{color.reserved.danger.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-system-error": { "$type": "color", "$value": "{color.reserved.system.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for system error alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, text-mono is white in light mode and black in dark mode. It’s typically used for UI elements like buttons, tabs, panel heading etc." }, "text-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-reversed, text-reversed is always white. Use with caution, in dark mode white creates too much contrast which defeats the object of reducing glare. Tip: Try using text-mono" } }, "border": { "border-muted": { "$type": "color", "$value": "{Primitives.color.STG.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-muted-strong": { "$type": "color", "$value": "{Primitives.color.STG.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border Dark colour style. Use for UI components that require accessible contrast ratios eg. Inputs, Selects etc" }, "border-muted-mild": { "$type": "color", "$value": "{Primitives.color.STG.muted.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "border-muted-soft": { "$type": "color", "$value": "{Primitives.color.STG.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border colour style. Use for UI components and page elements that don’t require accessible borders - Selectors, Flexi-cell, Tabs, section dividers etc" }, "border-hero": { "$type": "color", "$value": "{Primitives.color.STG.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-primary": { "$type": "color", "$value": "{Primitives.color.STG.primary.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-pop": { "$type": "color", "$value": "{Primitives.color.STG.pop.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-holler": { "$type": "color", "$value": "{Primitives.color.STG.holler.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "border-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-success-mild": { "$type": "color", "$value": "{color.reserved.success.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info-mild": { "$type": "color", "$value": "{color.reserved.info.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success info messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning-mild": { "$type": "color", "$value": "{color.reserved.warning.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Must only be used for the Danger alert component." }, "border-danger-mild": { "$type": "color", "$value": "{color.reserved.danger.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, border-mono is white in light mode and black in dark mode." }, "border-focus": { "$type": "color", "$value": "{Primitives.color.STG.holler.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use with focus state keyboard navigation." } }, "data": { "data-a-solid": { "$type": "color", "$value": "{Primitives.color.STG.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-tint": { "$type": "color", "$value": "{Primitives.color.STG.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-opacity": { "$type": "color", "$value": "{Primitives.color.STG.primary.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-solid": { "$type": "color", "$value": "{Primitives.color.STG.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-tint": { "$type": "color", "$value": "{Primitives.color.STG.hero.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-opacity": { "$type": "color", "$value": "{Primitives.color.STG.hero.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-solid": { "$type": "color", "$value": "{Primitives.color.STG.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-tint": { "$type": "color", "$value": "{Primitives.color.STG.pop.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-opacity": { "$type": "color", "$value": "{Primitives.color.STG.pop.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-solid": { "$type": "color", "$value": "{Primitives.color.STG.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-tint": { "$type": "color", "$value": "{Primitives.color.STG.holler.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-opacity": { "$type": "color", "$value": "{Primitives.color.STG.holler.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-solid": { "$type": "color", "$value": "{Primitives.color.STG.sing.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-tint": { "$type": "color", "$value": "{Primitives.color.STG.sing.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-opacity": { "$type": "color", "$value": "{Primitives.color.STG.sing.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-solid": { "$type": "color", "$value": "{Primitives.color.STG.dance.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-tint": { "$type": "color", "$value": "{Primitives.color.STG.dance.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-opacity": { "$type": "color", "$value": "{Primitives.color.STG.dance.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." } }, "pictogram": { "surface-pictogram-base": { "$type": "color", "$value": "{Primitives.color.STG.hero.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." }, "surface-pictogram-accent": { "$type": "color", "$value": "{Primitives.color.STG.pop.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." } }, "state": { "surface-hover-primary": { "$type": "color", "$value": "{Primitives.color.STG.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary": { "$type": "color", "$value": "{Primitives.color.STG.primary.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-hero": { "$type": "color", "$value": "{Primitives.color.STG.hero.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-hero": { "$type": "color", "$value": "{Primitives.color.STG.hero.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-primary-faint": { "$type": "color", "$value": "{Primitives.color.STG.primary.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary-faint": { "$type": "color", "$value": "{Primitives.color.STG.primary.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-hero-faint": { "$type": "color", "$value": "{Primitives.color.STG.hero.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-active-hero-faint": { "$type": "color", "$value": "{Primitives.color.STG.hero.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-muted-pale": { "$type": "color", "$value": "{Primitives.color.STG.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-muted-pale": { "$type": "color", "$value": "{Primitives.color.STG.muted.600}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-mono": { "$type": "color", "$value": "{Primitives.color.STG.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." } } }, "border": { "radius": { "rounded-none": { "$type": "float", "$value": "{border.radius.0px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-sm": { "$type": "float", "$value": "{border.radius.3px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-md": { "$type": "float", "$value": "{border.radius.4px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-lg": { "$type": "float", "$value": "{border.radius.5px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-xl": { "$type": "float", "$value": "{border.radius.6px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-2xl": { "$type": "float", "$value": "{border.radius.8px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-3xl": { "$type": "float", "$value": "{border.radius.12px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-4xl": { "$type": "float", "$value": "{border.radius.16px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-5xl": { "$type": "float", "$value": "{border.radius.24px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-full": { "$type": "float", "$value": "{border.radius.999px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } }, "misc": { "multi-brand": { "$type": "string", "$value": "StGeorge", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "brand-font": { "$type": "string", "$value": "Dragon Bold", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "mode": { "$type": "string", "$value": "Dark mode", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } } }, "Bank SA": { "light-mode": { "color": { "background": { "background-white": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a white background use this token" }, "background-pale": { "$type": "color", "$value": "{Primitives.color.BSA.muted.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a grey background use this token. Note: this token replaces the current Background colour style." }, "background-faint": { "$type": "color", "$value": "{Primitives.color.BSA.muted.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a light grey background use this token. Note: this token replaces the current Light colour style. Do not use this token as a screen background." }, "background-primary": { "$type": "color", "$value": "{Primitives.color.BSA.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" }, "background-hero": { "$type": "color", "$value": "{Primitives.color.BSA.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" } }, "surface": { "surface-muted-vivid": { "$type": "color", "$value": "{Primitives.color.BSA.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for surfaces that need to be the same colour as body text (icons, arrows etc)." }, "surface-muted": { "$type": "color", "$value": "{Primitives.color.BSA.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Muted colour style." }, "surface-muted-strong": { "$type": "color", "$value": "{Primitives.color.BSA.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-mild": { "$type": "color", "$value": "{Primitives.color.BSA.muted.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-soft": { "$type": "color", "$value": "{Primitives.color.BSA.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-pale": { "$type": "color", "$value": "{Primitives.color.BSA.muted.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Background colour style. Tip: In light mode this colour is the same as background-pale however they behave differently in dark mode." }, "surface-muted-faint": { "$type": "color", "$value": "{Primitives.color.BSA.muted.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Light colour style. Tip: In light mode this colour is the same as background-faint however they each behave differently in dark mode." }, "surface-primary": { "$type": "color", "$value": "{Primitives.color.BSA.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Primary colour style." }, "surface-primary-faint": { "$type": "color", "$value": "{Primitives.color.BSA.primary.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-hero": { "$type": "color", "$value": "{Primitives.color.BSA.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Hero colour style." }, "surface-hero-faint": { "$type": "color", "$value": "{Primitives.color.BSA.hero.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-pop": { "$type": "color", "$value": "{Primitives.color.BSA.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-pop-faint": { "$type": "color", "$value": "{Primitives.color.BSA.pop.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop Light colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-holler": { "$type": "color", "$value": "{Primitives.color.BSA.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-holler-faint": { "$type": "color", "$value": "{Primitives.color.BSA.holler.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else." }, "surface-success-faint": { "$type": "color", "$value": "{color.reserved.success.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else. Note: this surface should always be used with border-success-mild as shown here." }, "surface-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else." }, "surface-info-faint": { "$type": "color", "$value": "{color.reserved.info.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else. Note: this surface should always be used with border-info-mild as shown here." }, "surface-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else." }, "surface-warning-faint": { "$type": "color", "$value": "{color.reserved.warning.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else. Note: this surface should always be used with border-warning-mild as shown here." }, "surface-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else." }, "surface-danger-faint": { "$type": "color", "$value": "{color.reserved.danger.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else. Note: this surface should always be used with border-danger-mild as shown here." }, "surface-system-error": { "$type": "color", "$value": "{color.reserved.system.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-system-error-dark": { "$type": "color", "$value": "{color.reserved.system.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "White in light mode and black in dark mode. Use with caution, black often creates too much contrast which defeats the object of reducing glare. Tip: Use background-white. This will provide the same results with less contrast in dark mode." }, "surface-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Always white. Use with caution, in Dark Mode white often creates too much contrast which defeats the object of reducing glare. Tip: Use surface-mono or background-white as these tokens are designed to work in dark mode." } }, "text": { "text-body": { "$type": "color", "$value": "{Primitives.color.BSA.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for paragraph text and UI elements - labels, buttons, inputs etc" }, "text-heading": { "$type": "color", "$value": "{Primitives.color.BSA.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for headings only. Note: Using text-heading on anything other than headings may produce unexpected results in multi-brand applications." }, "text-muted": { "$type": "color", "$value": "{Primitives.color.BSA.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires less emphasis like hint text etc." }, "text-primary": { "$type": "color", "$value": "{Primitives.color.BSA.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution and in accordance with the brand guidelines. Tip: If your text is a link always use the text-link token." }, "text-hero": { "$type": "color", "$value": "{Primitives.color.BSA.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc." }, "text-holler": { "$type": "color", "$value": "{Primitives.color.BSA.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "text-link": { "$type": "color", "$value": "{Primitives.color.BSA.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text links only. Note: In Westpac this colour is exactly the same as text-primary however this may not be the case in other brands." }, "text-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-system-error": { "$type": "color", "$value": "{color.reserved.system.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for system error alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, text-mono is white in light mode and black in dark mode. It’s typically used for UI elements like buttons, tabs, panel heading etc." }, "text-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-reversed, text-reversed is always white. Use with caution, in dark mode white creates too much contrast which defeats the object of reducing glare. Tip: Try using text-mono" } }, "border": { "border-muted": { "$type": "color", "$value": "{Primitives.color.BSA.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-muted-strong": { "$type": "color", "$value": "{Primitives.color.BSA.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border Dark colour style. Use for UI components that require accessible contrast ratios eg. Inputs, Selects etc" }, "border-muted-mild": { "$type": "color", "$value": "{Primitives.color.BSA.muted.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "border-muted-soft": { "$type": "color", "$value": "{Primitives.color.BSA.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border colour style. Use for UI components and page elements that don’t require accessible borders - Selectors, Flexi-cell, Tabs, section dividers etc" }, "border-hero": { "$type": "color", "$value": "{Primitives.color.BSA.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-primary": { "$type": "color", "$value": "{Primitives.color.BSA.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-pop": { "$type": "color", "$value": "{Primitives.color.BSA.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-holler": { "$type": "color", "$value": "{Primitives.color.BSA.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "border-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-success-mild": { "$type": "color", "$value": "{color.reserved.success.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info-mild": { "$type": "color", "$value": "{color.reserved.info.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success info messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning-mild": { "$type": "color", "$value": "{color.reserved.warning.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Must only be used for the Danger alert component." }, "border-danger-mild": { "$type": "color", "$value": "{color.reserved.danger.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, border-mono is white in light mode and black in dark mode." }, "border-focus": { "$type": "color", "$value": "{Primitives.color.BSA.holler.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use with focus state keyboard navigation." } }, "data": { "data-a-solid": { "$type": "color", "$value": "{Primitives.color.BSA.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-tint": { "$type": "color", "$value": "{Primitives.color.BSA.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-opacity": { "$type": "color", "$value": "{Primitives.color.BSA.primary.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-solid": { "$type": "color", "$value": "{Primitives.color.BSA.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-tint": { "$type": "color", "$value": "{Primitives.color.BSA.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-opacity": { "$type": "color", "$value": "{Primitives.color.BSA.hero.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-solid": { "$type": "color", "$value": "{Primitives.color.BSA.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-tint": { "$type": "color", "$value": "{Primitives.color.BSA.pop.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-opacity": { "$type": "color", "$value": "{Primitives.color.BSA.pop.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-solid": { "$type": "color", "$value": "{Primitives.color.BSA.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-tint": { "$type": "color", "$value": "{Primitives.color.BSA.holler.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-opacity": { "$type": "color", "$value": "{Primitives.color.BSA.holler.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-solid": { "$type": "color", "$value": "{Primitives.color.BSA.sing.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-tint": { "$type": "color", "$value": "{Primitives.color.BSA.sing.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-opacity": { "$type": "color", "$value": "{Primitives.color.BSA.sing.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-solid": { "$type": "color", "$value": "{Primitives.color.BSA.dance.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-tint": { "$type": "color", "$value": "{Primitives.color.BSA.dance.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-opacity": { "$type": "color", "$value": "{Primitives.color.BSA.dance.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." } }, "pictogram": { "surface-pictogram-base": { "$type": "color", "$value": "{Primitives.color.BSA.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." }, "surface-pictogram-accent": { "$type": "color", "$value": "{Primitives.color.BSA.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." } }, "state": { "surface-hover-primary": { "$type": "color", "$value": "{Primitives.color.BSA.primary.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary": { "$type": "color", "$value": "{Primitives.color.BSA.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-hero": { "$type": "color", "$value": "{Primitives.color.BSA.hero.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-hero": { "$type": "color", "$value": "{Primitives.color.BSA.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-primary-faint": { "$type": "color", "$value": "{Primitives.color.BSA.primary.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary-faint": { "$type": "color", "$value": "{Primitives.color.BSA.primary.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-hero-faint": { "$type": "color", "$value": "{Primitives.color.BSA.hero.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-active-hero-faint": { "$type": "color", "$value": "{Primitives.color.BSA.hero.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-muted-pale": { "$type": "color", "$value": "{Primitives.color.BSA.muted.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-muted-pale": { "$type": "color", "$value": "{Primitives.color.BSA.muted.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-mono": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-mono": { "$type": "color", "$value": "{Primitives.color.BSA.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." } } }, "border": { "radius": { "rounded-none": { "$type": "float", "$value": "{border.radius.0px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-sm": { "$type": "float", "$value": "{border.radius.3px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-md": { "$type": "float", "$value": "{border.radius.4px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-lg": { "$type": "float", "$value": "{border.radius.5px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-xl": { "$type": "float", "$value": "{border.radius.6px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-2xl": { "$type": "float", "$value": "{border.radius.8px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-3xl": { "$type": "float", "$value": "{border.radius.12px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-4xl": { "$type": "float", "$value": "{border.radius.16px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-5xl": { "$type": "float", "$value": "{border.radius.24px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-full": { "$type": "float", "$value": "{border.radius.999px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } }, "misc": { "multi-brand": { "$type": "string", "$value": "Bank SA", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "brand-font": { "$type": "string", "$value": "Aller", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "mode": { "$type": "string", "$value": "Light mode", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } }, "dark-mode": { "color": { "background": { "background-white": { "$type": "color", "$value": "{Primitives.color.BSA.muted.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a white background use this token" }, "background-pale": { "$type": "color", "$value": "{Primitives.color.BSA.muted.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a grey background use this token. Note: this token replaces the current Background colour style." }, "background-faint": { "$type": "color", "$value": "{Primitives.color.BSA.muted.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "If you need a light grey background use this token. Note: this token replaces the current Light colour style. Do not use this token as a screen background." }, "background-primary": { "$type": "color", "$value": "{Primitives.color.BSA.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" }, "background-hero": { "$type": "color", "$value": "{Primitives.color.BSA.hero.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed" } }, "surface": { "surface-muted-vivid": { "$type": "color", "$value": "{Primitives.color.BSA.muted.50}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for surfaces that need to be the same colour as body text (icons, arrows etc)." }, "surface-muted": { "$type": "color", "$value": "{Primitives.color.BSA.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Muted colour style." }, "surface-muted-strong": { "$type": "color", "$value": "{Primitives.color.BSA.muted.600}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-mild": { "$type": "color", "$value": "{Primitives.color.BSA.muted.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-soft": { "$type": "color", "$value": "{Primitives.color.BSA.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-muted-pale": { "$type": "color", "$value": "{Primitives.color.BSA.muted.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Background colour style. Tip: In light mode this colour is the same as background-pale however they behave differently in dark mode." }, "surface-muted-faint": { "$type": "color", "$value": "{Primitives.color.BSA.muted.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Light colour style. Tip: In light mode this colour is the same as background-faint however they each behave differently in dark mode." }, "surface-primary": { "$type": "color", "$value": "{Primitives.color.BSA.primary.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Primary colour style." }, "surface-primary-faint": { "$type": "color", "$value": "{Primitives.color.BSA.primary.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-hero": { "$type": "color", "$value": "{Primitives.color.BSA.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Hero colour style." }, "surface-hero-faint": { "$type": "color", "$value": "{Primitives.color.BSA.hero.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "surface-pop": { "$type": "color", "$value": "{Primitives.color.BSA.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-pop-faint": { "$type": "color", "$value": "{Primitives.color.BSA.pop.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Pop Light colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines." }, "surface-holler": { "$type": "color", "$value": "{Primitives.color.BSA.holler.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-holler-faint": { "$type": "color", "$value": "{Primitives.color.BSA.holler.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "surface-success": { "$type": "color", "$value": "{color.reserved.success.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else." }, "surface-success-faint": { "$type": "color", "$value": "{color.reserved.success.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for success alert components, do not use for anything else. Note: this surface should always be used with border-success-mild as shown here." }, "surface-info": { "$type": "color", "$value": "{color.reserved.info.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else." }, "surface-info-faint": { "$type": "color", "$value": "{color.reserved.info.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for info alert components, do not use for anything else. Note: this surface should always be used with border-info-mild as shown here." }, "surface-warning": { "$type": "color", "$value": "{color.reserved.warning.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else." }, "surface-warning-faint": { "$type": "color", "$value": "{color.reserved.warning.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for warning alert components, do not use for anything else. Note: this surface should always be used with border-warning-mild as shown here." }, "surface-danger": { "$type": "color", "$value": "{color.reserved.danger.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else." }, "surface-danger-faint": { "$type": "color", "$value": "{color.reserved.danger.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for danger alert components, do not use for anything else. Note: this surface should always be used with border-danger-mild as shown here." }, "surface-system-error": { "$type": "color", "$value": "{color.reserved.system.950}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-system-error-dark": { "$type": "color", "$value": "{color.reserved.system.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only use for system alert components, do not use for anything else." }, "surface-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "White in light mode and black in dark mode. Use with caution, black often creates too much contrast which defeats the object of reducing glare. Tip: Use background-white. This will provide the same results with less contrast in dark mode." }, "surface-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Always white. Use with caution, in Dark Mode white often creates too much contrast which defeats the object of reducing glare. Tip: Use surface-mono or background-white as these tokens are designed to work in dark mode." } }, "text": { "text-body": { "$type": "color", "$value": "{Primitives.color.BSA.muted.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for paragraph text and UI elements - labels, buttons, inputs etc" }, "text-heading": { "$type": "color", "$value": "{Primitives.color.BSA.hero.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for headings only. Note: Using text-heading on anything other than headings may produce unexpected results in multi-brand applications." }, "text-muted": { "$type": "color", "$value": "{Primitives.color.BSA.muted.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires less emphasis like hint text etc." }, "text-primary": { "$type": "color", "$value": "{Primitives.color.BSA.primary.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use with caution and in accordance with the brand guidelines. Tip: If your text is a link always use the text-link token." }, "text-hero": { "$type": "color", "$value": "{Primitives.color.BSA.hero.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc." }, "text-holler": { "$type": "color", "$value": "{Primitives.color.BSA.holler.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text that requires more emphasis, call outs, quotes etc. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "text-link": { "$type": "color", "$value": "{Primitives.color.BSA.primary.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Use for text links only. Note: In Westpac this colour is exactly the same as text-primary however this may not be the case in other brands." }, "text-success": { "$type": "color", "$value": "{color.reserved.success.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-info": { "$type": "color", "$value": "{color.reserved.info.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-warning": { "$type": "color", "$value": "{color.reserved.warning.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-danger": { "$type": "color", "$value": "{color.reserved.danger.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-system-error": { "$type": "color", "$value": "{color.reserved.system.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for system error alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "text-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, text-mono is white in light mode and black in dark mode. It’s typically used for UI elements like buttons, tabs, panel heading etc." }, "text-reversed": { "$type": "color", "$value": "{color.mono.white}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-reversed, text-reversed is always white. Use with caution, in dark mode white creates too much contrast which defeats the object of reducing glare. Tip: Try using text-mono" } }, "border": { "border-muted": { "$type": "color", "$value": "{Primitives.color.BSA.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-muted-strong": { "$type": "color", "$value": "{Primitives.color.BSA.muted.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border Dark colour style. Use for UI components that require accessible contrast ratios eg. Inputs, Selects etc" }, "border-muted-mild": { "$type": "color", "$value": "{Primitives.color.BSA.muted.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved do not use." }, "border-muted-soft": { "$type": "color", "$value": "{Primitives.color.BSA.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Replaces the current Border colour style. Use for UI components and page elements that don’t require accessible borders - Selectors, Flexi-cell, Tabs, section dividers etc" }, "border-hero": { "$type": "color", "$value": "{Primitives.color.BSA.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-primary": { "$type": "color", "$value": "{Primitives.color.BSA.primary.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-pop": { "$type": "color", "$value": "{Primitives.color.BSA.pop.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Use with caution and in accordance with the brand guidelines." }, "border-holler": { "$type": "color", "$value": "{Primitives.color.BSA.holler.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "For borders that require more emphasis. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands." }, "border-success": { "$type": "color", "$value": "{color.reserved.success.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-success-mild": { "$type": "color", "$value": "{color.reserved.success.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info": { "$type": "color", "$value": "{color.reserved.info.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-info-mild": { "$type": "color", "$value": "{color.reserved.info.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for success info messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning": { "$type": "color", "$value": "{color.reserved.warning.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-warning-mild": { "$type": "color", "$value": "{color.reserved.warning.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-danger": { "$type": "color", "$value": "{color.reserved.danger.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Must only be used for the Danger alert component." }, "border-danger-mild": { "$type": "color", "$value": "{color.reserved.danger.700}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components." }, "border-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Similar to surface-mono, border-mono is white in light mode and black in dark mode." }, "border-focus": { "$type": "color", "$value": "{Primitives.color.BSA.holler.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use with focus state keyboard navigation." } }, "data": { "data-a-solid": { "$type": "color", "$value": "{Primitives.color.BSA.primary.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-tint": { "$type": "color", "$value": "{Primitives.color.BSA.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-a-opacity": { "$type": "color", "$value": "{Primitives.color.BSA.primary.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-solid": { "$type": "color", "$value": "{Primitives.color.BSA.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-tint": { "$type": "color", "$value": "{Primitives.color.BSA.hero.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-b-opacity": { "$type": "color", "$value": "{Primitives.color.BSA.hero.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-solid": { "$type": "color", "$value": "{Primitives.color.BSA.pop.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-tint": { "$type": "color", "$value": "{Primitives.color.BSA.pop.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-c-opacity": { "$type": "color", "$value": "{Primitives.color.BSA.pop.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-solid": { "$type": "color", "$value": "{Primitives.color.BSA.holler.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-tint": { "$type": "color", "$value": "{Primitives.color.BSA.holler.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-d-opacity": { "$type": "color", "$value": "{Primitives.color.BSA.holler.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-solid": { "$type": "color", "$value": "{Primitives.color.BSA.sing.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-tint": { "$type": "color", "$value": "{Primitives.color.BSA.sing.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-e-opacity": { "$type": "color", "$value": "{Primitives.color.BSA.sing.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-solid": { "$type": "color", "$value": "{Primitives.color.BSA.dance.500}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-tint": { "$type": "color", "$value": "{Primitives.color.BSA.dance.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." }, "data-f-opacity": { "$type": "color", "$value": "{Primitives.color.BSA.dance.opacity}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "This is a reserved colour. It must only be used for data visualisation - graphs and charts." } }, "pictogram": { "surface-pictogram-base": { "$type": "color", "$value": "{Primitives.color.BSA.hero.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." }, "surface-pictogram-accent": { "$type": "color", "$value": "{Primitives.color.BSA.pop.300}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$description": "Reserved. Only for use on Pictograms." } }, "state": { "surface-hover-primary": { "$type": "color", "$value": "{Primitives.color.BSA.primary.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary": { "$type": "color", "$value": "{Primitives.color.BSA.primary.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-hero": { "$type": "color", "$value": "{Primitives.color.BSA.hero.200}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-hero": { "$type": "color", "$value": "{Primitives.color.BSA.hero.100}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-primary-faint": { "$type": "color", "$value": "{Primitives.color.BSA.primary.900}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-primary-faint": { "$type": "color", "$value": "{Primitives.color.BSA.primary.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-hero-faint": { "$type": "color", "$value": "{Primitives.color.BSA.hero.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-active-hero-faint": { "$type": "color", "$value": "{Primitives.color.BSA.hero.400}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true }, "surface-hover-muted-pale": { "$type": "color", "$value": "{Primitives.color.BSA.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-muted-pale": { "$type": "color", "$value": "{Primitives.color.BSA.muted.600}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-hover-mono": { "$type": "color", "$value": "{color.mono.black}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." }, "surface-active-mono": { "$type": "color", "$value": "{Primitives.color.BSA.muted.800}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ], "$hiddenFromPublishing": true, "$description": "This token is for hover states." } } }, "border": { "radius": { "rounded-none": { "$type": "float", "$value": "{border.radius.0px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-sm": { "$type": "float", "$value": "{border.radius.3px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-md": { "$type": "float", "$value": "{border.radius.4px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-lg": { "$type": "float", "$value": "{border.radius.5px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-xl": { "$type": "float", "$value": "{border.radius.6px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-2xl": { "$type": "float", "$value": "{border.radius.8px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-3xl": { "$type": "float", "$value": "{border.radius.12px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-4xl": { "$type": "float", "$value": "{border.radius.16px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-5xl": { "$type": "float", "$value": "{border.radius.24px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "rounded-full": { "$type": "float", "$value": "{border.radius.999px}", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } }, "misc": { "multi-brand": { "$type": "string", "$value": "Bank SA", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "brand-font": { "$type": "string", "$value": "Aller", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] }, "mode": { "$type": "string", "$value": "Dark mode", "$collectionName": "Primitives", "$scopes": [ "ALL_SCOPES" ] } } } } } } } ]