Skeletons

Skeletons are used when content is loading, somewhat like a loading bar but per component layout.

There are two types of skeletons, productive and emotive.

Productive skeletons are used for generic content load, whilst emotive is used to load more important components that require attention.

Light theme skeletons

Productive

Productive light theme that are used for generic content load uses two types of greys for the skeleton load bars.

When components are involved, the background that groups the components together uses a $grey-3 background color.

Visual example	Type	Colour
	Text	$grey-2 - $grey-3
	Component	$grey-3 background

Emotive

Emotive light theme that are used for important content load (or content that needs to catch the users’ attention) uses gradients that can be found in colours for the skeleton load bars.

When components are involved, the background that groups the components together uses a $color-primary background color.

Visual example	Type	Colour
	Text	Gradient rotation
	Component	$color-primary background