Shapes
How to use
Shapes
- Semi-squircle: for call-outs, inserts, and content highlighting. Use sparingly.
- Lozenge: for call-outs, inserts, and content highlighting. Use sparingly.
- Soft polygon: for cards, tiles, and other containers.
- Circle: for special accent buttons (e.g. search)
- Leaf: for primary CTA, and large single-instance cards. Not for use on objects in an array.
Semi-squircle
Circle
Lozenge
Leaf
Soft polygon
Corners
- To soften containers, and mirror various graphic forms, the corners of objects are rounded.
- There are four base corner variations:
- small (form elements)
- medium and large (cards and containers),
- X-large (buttons and CTAs),
- XX-large (leafs and lozenge shapes).
- In an array of shapes (such as an image gallery grid), corners may apply to each individual item in the array, or to the array as a single object.
- Depending on the effect required, not all corners of an object are required to be rounded.
Small
Radius: 5px
Medium
Radius: 10px
Large
Radius: 15px
Can’t find what you’re looking for? Get in touch