Brand Colors

Used for highliting important elements on a page, such as buttons and navigation states. Each color contains color variations, used for different states and elements laying upon the main color.

--ox-color-primary

#ff0000
--ox-color-primary--dark-80 #380C0D
--ox-color-primary--dark-60 #6A090A
--ox-color-primary--dark-40 #9B0606
--ox-color-primary--dark-20 #CD0303
--ox-color-primary--light-20 #FF3333
--ox-color-primary--light-40 #FF6666
--ox-color-primary--light-60 #FF9999
--ox-color-primary--light-80 #FFCCCC

--ox-color-secondary

#97A6A7
--ox-color-secondary--dark-80 #232D2E
--ox-color-secondary--dark-60 #404B4C
--ox-color-secondary--dark-40 #5D6A6B
--ox-color-secondary--dark-20 #7A8889
--ox-color-secondary--light-20 #ACB8B9
--ox-color-secondary--light-40 #C1CACA
--ox-color-secondary--light-60 #D5DBDC
--ox-color-secondary--light-80 #EAEDED

--ox-color-white

#ffffff

UI colors

Used for interface elements.

--ox-color-grey--dark-80 #2C3738
--ox-color-grey--dark-60 #536060
--ox-color-grey--dark-40 #798889
--ox-color-grey--dark-20 #A0B1B1
--ox-color-grey #C6D9D9
--ox-color-grey--light-20 #D1E1E1
--ox-color-grey--light-40
#DDE8E8
--ox-color-grey--light-60
#E8F0F0
--ox-color-grey--light-80
#F4F7F7

Functional colors

Functional colors are used as the main colors in various messages accross our applications and websites. Usally as the font color, as a background a lighter variation will be used.

--ox-color-success
#32800C
--ox-color-warning
#957814
--ox-color-error
#A82A46
--ox-color-update
#22547c

Available as Custom Properties

Each color is exposed as an CSS variable (custom property) on the root, so you can use them in your own styles. You can use them by using the var() statement, for example: color: var(--ox-color-primary).