Visual language New

Along with the other elements in our Style guide, these are some general systems that help explain how our visual language is built and created.

Shape

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, and signifies a presentational element that is not interactive. It is used on our smallest shapes to maximize usage of real estate. Use on larger shapes is reserved for presentational or informative patterns and visual aids.
• A 2px radius is used on smaller elements when a hint of softness improves the look and feel, but no interactivity is suggested.
• A 4px radius implies interactive affordance on medium-size shapes.
• A 6px radius implies 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

1. Chiu, Dave. “You Need a Shape System.” Medium. 28 Nov. 2018. Web.

Depth

(Coming soon)

Motion

Coming soon. In the meantime, check out our Motion principles.

Style

Previously unwritten rules about the general style and tone in our visual language.

Function

Coming soon: When to use one patter over another - despite seemingly similar function - and why

Eg. When to use buttons instead of links, and vice-versa.