Effects and styles
Components in Spor use different styles and effects to distinguish between functions, importance and location. The variants are defined as design tokens and can be used when designing new elements.
Rounding
We use largely rounded components to create a softer user interface. The rounding usually follows the size of the component. Small components have little rounding, and large components have larger rounding. There are few cases where we do not round components or design elements and states. But you have exceptions like full-screen elements, images, image galleries or where two elements meet as in open search fields.
An easy way to see which rounding you should use is to follow the rule of thumb: components with 1-2 lines of text or very compact elements will always have rounding of 12 px. When there are more lines horizontally, such as cards or boxes, we use rounding of 18 px. In addition, 24 px rounding is used on drawers, 30-36px rounding on components that are to be completely rounded such as buttons.
Outlines
Spor uses outlines to structure content, define components or distinguish between states. Components always retain the same border-width between different sizes. While states can change border-width based on interaction. An example of this is Hover and Focus state on components with outline, such as the add button.
1px outline
Spor-components usually use 1px outline in default state. This is standard for all boxes, dividers and form elements.
2-3px outline
Used as weighting on components for different forms of interaction. To make it easier to distinguish between keyboard focus and hover, changing the outline will help the user.
Dash
Dotted line is only used to separate content within a component. It should not be used as a divider between content or as an outline on components.
Shadow
Most components in Spor use some form of contrast against the background, whether it is color, outlines or shadow. Shadow is used to lift something from the background, whether it lies over an element or just for contrast. We also use shadow to clarify that something is clickable.
Not all clickable elements have shadow, such as input fields and buttons. Sometimes shadow is only used in certain states of components, to clarify an action. Components with strong colors or outline do not need shadow. We have three levels of shadow: Elevation 1, Elevation 2 and Elevation 3. Different levels of shadow can be used to create a hierarchy of importance.
