Foundation

Shape

This section details the categories of shape in the Dropbox ecosystem and how they can be paired to create visual cohesion and/or contrast.


Buy

All three shape categories are used within Buy, but square elements are the most commonly used. From the Tab to planes to composition, square elements work best to create harmony across our many surfaces.

Consistent shape builds recognition and trust

The squared Tab anchors the page, which drives layout on our webpages. It creates a natural frame for navigation and main content on the page. Consistency in this structure creates a recognizable pattern across the user’s experiences which builds trust with our customer.

Example of shape used in the Buy experience

Shape helps organize content

Square planes establish hierarchy and organize content. Each plane should contain one type of content (examples: text, customer photo, customer file). Multiple planes together form a module. For more, see Layout and Planes.

Example of shape used in the Buy experience

Shape drives clear action

In combination with color, shape helps reveal possible paths for our customer. As the customer moves down the purchase funnel, the experience becomes closer to Use in look and feel. Using square shapes and planes allows the user to focus on the specific task at hand, while continuing to maintain brand cohesion.

An example showing how shape is used in selecting a Dropbox plan
An example showing how shape is used in a Dropbox plan pricing table
Shape usage on the Dropbox checkout screen

Non-square shapes

Within Buy, we rarely use non-square shapes. When we do, they are primarily used in the form of our Global Icons and small UI elements to draw focus and attention. We most frequently use them in conjunction with Customer Content and Product Visuals.

Example of non-square shapes in the Buy experience

Don'ts

An example showing how not to use navigation patterns that aren't DWG Universal Navigation

Don’t use navigational patterns besides DWG Universal Navigation

An example showing how not to use rounded corners on form fields, buttons or notification bars

Don't use rounded corners on form fields, buttons or notification bars