Shape

Use

DIG components have been intentionally designed with unique container shapes that work together across product experiences.

Shape directs focus

When rounded components are paired with square components, they stand out visually and can guide the user’s attention to certain areas of the screen.

Intentional shape pairings creates visual contrast, as seen below when a round Facepile component sits above a grid of square images.

Another example of a component that directs the user’s focus is the Floating Action button, or FAB and is used in the native app experience. This type of button has an elevation applied, allowing it to sit above page content.

While other buttons in DIG are square, the FAB has a rounded shape to help it to stand out visually, naturally drawing the user’s attention to perform the most important or common action on a screen.

Don'ts

Shape enhances discoverability and usability

Shape provides a way for users to recognize common elements and actions across screens in Dropbox products.

For instance, filter chips are always rounded, therefore easily recognizable, regardless of where they are used in the product.

When users can easily identify common actions across the product—such as filtering using the chip component—our product ultimately becomes easier and more seamless to use.

Component shapes work harmoniously together

Menus have square shaped containers. Because of this, they naturally pair well with elements that trigger their visibility such as icon buttons.

Don'ts