Colors
The color palette for the Atomia applications can be divided in different categories depending on purpose.
The colors below are the default colors. They are defined in _settings.colors.scss.
You can override the default colors in your theme config file.
Brand colors
These are used on elements like navigation bars, tabs and invoices.
$color-brand
#d8005b
$color-accent
#c22042
Action colors
These are used primarily on buttons and other action items.
$color-primary
#8dc640
$color-secondary
#fba621
$color-caution
#e23434
$color-neutral
#e5e3e0
Gray scale
These are used mainly for text color, background color and icons.
$color-dark
.u-bg-color-dark
$color-dusk
.u-bg-color-dusk
$color-twilight
.u-bg-color-twilight
$color-midday
.u-bg-color-midday
$color-dawn
.u-bg-color-dawn
$color-sunrise
.u-bg-color-sunrise
$color-black
.u-bg-color-black
$color-light
.u-bg-color-light
Specific colors
These are colors with explicit names.
Do not use these colors in other than special circumstances. Prefer using the functional colors above instead.
$color-blue-x-dark
.u-bg-color-blue-x-dark
$color-blue-dark
.u-bg-color-blue-dark
$color-blue
.u-bg-color-blue
$color-blue-medium
.u-bg-color-blue-medium
$color-blue-light
.u-bg-color-blue-light
$color-blue-x-light
.u-bg-color-blue-x-light
$color-green-x-dark
.u-bg-color-green-x-dark
$color-green-dark
.u-bg-color-green-dark
$color-green
.u-bg-color-green
$color-green-medium
.u-bg-color-green-medium
$color-green-light
.u-bg-color-green-light
$color-green-x-light
.u-bg-color-green-x-light
$color-yellow-x-dark
.u-bg-color-yellow-x-dark
$color-yellow-dark
.u-bg-color-yellow-dark
$color-yellow
.u-bg-color-yellow
$color-yellow-medium
.u-bg-color-yellow-medium
$color-yellow-light
.u-bg-color-yellow-light
$color-yellow-x-light
.u-bg-color-yellow-x-light
$color-red-x-dark
.u-bg-color-red-x-dark
$color-red-dark
.u-bg-color-red-dark
$color-red
.u-bg-color-red
$color-red-medium
.u-bg-color-red-medium
$color-red-light
.u-bg-color-red-light
$color-red-x-light
.u-bg-color-red-x-light