Colors
When working with colors we highly recommend to use the provided color abstractions (variables). They are the foundation for efficient color management and ensure compatibility across our themes.
Remember to base your color decision on the abstraction and purpose and not entirely on the color value itself. These values can change based on the theme (Example: Do not use “ui-primary-color” to indicate “success”, because the value for this variable is a completely different in other themes; use “success-color” instead).
UI
Colors that are mainly used to highlight elements the user can interact with. Not to be mixed up with Brand colors (they can be similar)! UI colors should follow accessibility and readability standards.
--flix-primary-ui-color
#31a100
--flix-primary-ui-light-color
#5cc500
--flix-primary-ui-dark-color
#187d00
--flix-ui-primary-color
#31a100
--flix-ui-primary-light-color
#5cc500
--flix-ui-primary-dark-color
#187d00
Fonts-Icons
Colors that can be applied on text or icons. For icons there is a default defined, but others (i.e. Brand or UI colors can be applied) based on the use case.
--flix-content-primary-color
#353535
--flix-content-secondary-color
#646464
--flix-heading-font-color
#353535
--flix-link-color
#0047de
--flix-primary-icon-color
#8b8b8b
--flix-secondary-icon-color
#31a100
--flix-icon-primary-color
#8b8b8b
--flix-icon-secondary-color
#31a100
Background
Colors that can be used for the background of a page.
--flix-primary-bg-color
#fff
--flix-secondary-bg-color
#f7f7f7
Grayscale
Grayscale colors to use for custom elements in your layout.
--flix-grayscale-0-color
#fff
--flix-grayscale-10-color
#f7f7f7
--flix-grayscale-30-color
#e1e1e1
--flix-grayscale-50-color
#c8c8c8
--flix-grayscale-70-color
#646464
--flix-grayscale-90-color
#444
--flix-grayscale-100-color
#353535
State colors
Colors that communicate a specific state. The color is ideally shown next to another visual difference (i.e. an icon) to foster the state communication in an accessible way.
--flix-neutral-color
#016ae7
--flix-success-color
#228f00
--flix-success-dark-color
#136b00
--flix-warning-color
#ff5704
--flix-warning-dark-color
#c42d00
--flix-danger-color
#dd2828
--flix-danger-dark-color
#b31414
Brand colors
Colors that present the brand in a direct way. Not to be mixed up with UI colors (they can be similar)! Brand colors do not necessarily have to follow accessibility and readability standards.
--flix-primary-brand-color
#73d700
--flix-secondary-brand-color
#ffad00
