Color concept
Surface colors
Colors to be used as background color for large, non-interactive surfaces like page background, sections, teasers.
Default
Page or section background.
Accent
For setting specific highlights on sections or teasers. Should be used sparingly because it draws a lot of attention and is confusing when used more than once in one view.
Alternate
For alternating section backgrounds.
Accent
For setting specific highlights on sections or teasers. Should be used sparingly because it draws a lot of attention and is confusing when used more than once in one view.
Default
Page or section background.
Brand
For brand colored sections or teasers.
Palette accent
Default
Page or section background.
Accent
For setting specific highlights on sections or teasers. Should be used sparingly because it draws a lot of attention and is confusing when used more than once in one view.
Alternate
For alternating section backgrounds.
Default
Page or section background.
Brand
For brand colored sections or teasers.
Accent
For setting specific highlights on sections or teasers. Should be used sparingly because it draws a lot of attention and is confusing when used more than once in one view.
Accent
For setting specific highlights on sections or teasers. Should be used sparingly because it draws a lot of attention and is confusing when used more than once in one view.
Default
Page or section background.
Brand
For brand colored sections or teasers.
Interactive colors
Colors to be used as background color for interactive elements, supporting various states that these elements can be in.
post.palettes.[color].[state].background- Background color for default, hover, active, focused, disabled.
post.palettes.[color].[state].foreground- Text color for all states
post.palettes.[color].[state].border-color- Optional border color, border style and width to be defined by the component.
post.palettes.[color].[state].scheme- Either light or dark, depending on the currently resolved background color value
Default
Page or section background.
Alternate
For alternating section backgrounds.
Accent
For setting specific highlights on sections or teasers. Should be used sparingly because it draws a lot of attention and is confusing when used more than once in one view.
Default
Page or section background.
Brand
For brand colored sections or teasers.