Spark Design System
STYLE-GUIDE
Shape system
Visual language for communicating state, directing attention, and identifying brand.
Usage
Corner radius is used to denote interactivity. Rounded shapes invite the touch (or click) and express that an element is more than static.
In general, the softer the radius, the more likely a shape is perceived as interactive.
Exceptions include interactive containers (like Cards) which don’t require rounded corners.
- A 0px radius creates a 90° corner. It is used on our smallest shapes to maximize usage of real estate, and on larger shapes that serve as backgrounds or containers.
- A 4px radius offers interactive affordance on medium-size shapes.
- A 6px radius offers interactive affordance on large-size shapes. Reserved for buttons and form fields.
- A 50% radius removes the appearance of corners altogether; the look is one of pure roundness (circle, or “pill” shapes). Reserved for icon buttons and toggles.
Examples
Supportive research
External research
- Chiu, Dave. “You Need a Shape System.” Medium. 28 Nov. 2018. Web.