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
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.
