Colors

Spor uses 2 different background colors that should be used both in app and on web. Background color is used to group components, to separate different types of content or to lift something from the background to highlight something that is clickable. It is important that we are consistent in the use of background color. Look at the whole of a flow and how the content is connected. It is important that similar elements get the same design and this also applies to background color.

Components have more room for color use, but there should always be a focus on readability and contrast. Specific components use, for example, different colored backgrounds to signal a difference in importance. You can also use specific colors to highlight an element, or to hide it.

When using colors other than white and gray, it is important to check the use of the colors you want. Are these signal colors that are used for alerts, will it compete with navigation or user choices?

Icons come standard in “Dark grey”, but can be used in other colors in special cases.

• On dark backgrounds, a light color and preferably the “filled” version of the icon should be used. Here it is natural to use white if you want the highest contrast.
• Highlighted icons can use a different color than dark gray if it helps to distinguish it from the rest.
• Some components need icons in colors other than standard. This is to adapt to the underlying design. Choice Chips use two shades of green to give a softer expression.
• Icons that belong to a product can be used in the product color.

Spor-components have a systematic use of design-tokens to show interactive states. We want the user to be able to recognise similar interaction regardless of whether they are on the web or in app or whether they press a button or add a document.

For example, most of the buttons use a darker color value on hover, before they get a lighter color value when you press down on the button. Except for the Add button, which often complements other types of buttons and can be used where you want more buttons together that have equal weighting. Disabled button state will be the same across all types of buttons so that the user can recognise it.

Don't use custom colors:

You should not use other colors than those that are already in a component or that are derived from design tokens and are based on existing design.

Don't have low color contrast:

Text, icons and components must follow the WCAG requirements for minimum contrast. You can check this through plugins, or online tools.

Don't use just colors:

It is not good enough to only use color on it's own to give feedback to the user. There should always be a label or icon to give the color the right context.