Util Colors | Default

Skip to main content

Suggestions title

Global styles

Component styles

Util colors

Description

This page demonstrates color categories ....

Identity colors

Background colors

Primary

Secondary

Primary Decorative

Secondary Decorative

Header

Footer

Text, icon & arrow colors

Icons

Arrows

Link

Tag

Buttons

Primary button

Primary buttons on .bg--primary

Button filled Button outlined

Primary buttons on .bg--secondary

Button filled Button outlined

Article element colors

Description

Article colors are only used for components/elements on article pages that have multiple background-color options.
The article color har 3 color levels, these are used to sperate content in components that have multiple layers.
The first level has a text-color variable, so the text-color is accessible. Level 2 & level 3 have enough opacity, so the text color always can be black with no accessibility issues.

Article color 0

Level 1

Level 2

Level 3

Article color 1

Level 1

Level 2

Level 3

Article color 2

Level 1

Level 2

Level 3

Article color 3

Level 1

Level 2

Level 3

Article color 4

Level 1

Level 2

Level 3

Article color 5

Level 1

Level 2

Level 3

Base colors

Body (Backgrounds: Page, sections & components)

White (Backgrounds: Page, sections & components)

Black (Text color: Global)

Grey base colors

Grey colors are used for forms, captions and list dividers

Grey light (Backgrounds)

Grey medium (Borders)

Grey dark (Text)

Overlay colors

Overlay

Overlay 45deg

Overlay 0deg

System colors

Green

Yellow

Orange

Red

Buttons

Button on .bg--primary

Button on .bg--secondary

Background color use case examples

Component background colors

Default

Crap ambushed gods a and for hasnt the for into console the and collection not

Transparent

Crap ambushed gods a and for hasnt the for into console the and collection not

Primary

Crap ambushed gods a and for hasnt the for into console the and collection not

Secondary

Crap ambushed gods a and for hasnt the for into console the and collection not

Article component background colors

Link box icon arrow in article-warpper

Primary (full width): for components that look like sections

<section> Primary Decorative: only used for sections

Default

Crap ambushed gods a and for hasnt the for into console the and collection not

Transparent

Crap ambushed gods a and for hasnt the for into console the and collection not

Primary

Crap ambushed gods a and for hasnt the for into console the and collection not

Secondary

Crap ambushed gods a and for hasnt the for into console the and collection not

<section> Secondary Decorative: only used for sections

Default

Crap ambushed gods a and for hasnt the for into console the and collection not

Transparent

Crap ambushed gods a and for hasnt the for into console the and collection not

Primary

Crap ambushed gods a and for hasnt the for into console the and collection not

Secondary

Crap ambushed gods a and for hasnt the for into console the and collection not

<section> White/body (Invert bg main): only used for sections. Color changes depending on the page background color.

Default

Crap ambushed gods a and for hasnt the for into console the and collection not

Transparent

Crap ambushed gods a and for hasnt the for into console the and collection not

Primary

Crap ambushed gods a and for hasnt the for into console the and collection not

Secondary

Crap ambushed gods a and for hasnt the for into console the and collection not

<main> Body: page color

Default: Inverts page color

Crap ambushed gods a and for hasnt the for into console the and collection not

Transparent

Crap ambushed gods a and for hasnt the for into console the and collection not

Primary

Crap ambushed gods a and for hasnt the for into console the and collection not

Secondary

Crap ambushed gods a and for hasnt the for into console the and collection not

<main> White : page color

Default: Inverts page color

Crap ambushed gods a and for hasnt the for into console the and collection not

Transparent

Crap ambushed gods a and for hasnt the for into console the and collection not

Primary

Crap ambushed gods a and for hasnt the for into console the and collection not

Secondary

Crap ambushed gods a and for hasnt the for into console the and collection not

Tag

Default: Inverts page color

Morbi tincidunt augue interdum velit euismod in pellentesque. Adipiscing tristique risus nec feugiat in fermentum. Orci nulla pellentesque dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo.This is a link.

Tag

Transparent

Morbi tincidunt augue interdum velit euismod in pellentesque. Adipiscing tristique risus nec feugiat in fermentum. Orci nulla pellentesque dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo.This is a link.

Tag

Primary

Morbi tincidunt augue interdum velit euismod in pellentesque. Adipiscing tristique risus nec feugiat in fermentum. Orci nulla pellentesque dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo.This is a link.

Tag

Secondary

Morbi tincidunt augue interdum velit euismod in pellentesque. Adipiscing tristique risus nec feugiat in fermentum. Orci nulla pellentesque dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo.This is a link.