Radius and shapes

Inspired by the dot and pill shapes found in the S in the Schibsted logo, we tuned up the presence of rounded corners in objects and surfaces.

The exact measurements for rounded corners relate to tap areas and column usage, but there are also some general recommendations.

Radius

Primitive elements

Elements that are self-contained, such as avatars, buttons and labels should be visually perceived as pills, therefore making full use of rounded corners. Elements that accommodate user input such as checkboxes, radio buttons, steppers, text inputs, search fields and dropdowns should be visually perceived as rounded rectangles.

Radius in container elements

Interactive containers ending with CTA buttons in the content flow should mimic the roundness of the buttons in order to visually wrap and call attention to the task at hand.

 

Shapes

There are six shapes at play in our systems and we have some simple thoughts and principles for choosing the right one.

Dot
You will find dots in:
• Circular containers such as avatars
• Status lights in buttons and labels
• Inputs such as radio buttons, steppers
• Toggle states in switch buttons

Pill
• Buttons
• Labels
• Most editorial containers of the card type

Rounded squares
• 6-column square card

Rounded rectangles
• 6-column square card

Bubble
• The editorial container called “Bubble”
• Form field validation alerts
• 2-column cards

Split
• Hero containers
• Interactive containers
• Social media templates

Dot/Pill mix
• Our brand descriptor lines consists of a mix of dots and pills

Download our basic shapes

Content  containers

The shapes and pillars in our design are also an inspiration for creating content containers. As of now, we only have templates for social media in use, but below are some examples that can inspire content creation and design on different communication platforms, documents or in ads. We use some of these shapes in our presentation templates.