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


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.

Example of contrasting shapes in the Dropbox mobile app

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.

Example of a floating action button in the Dropbox mobile app


An example showing not to use more than one floating action button on a screen

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.

Example of various shapes within the Dropbox search experience

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.

Example showing how a dropdown menu has the same shape as the text field above it


An example showing that corners shouldn't be rounded on the menu component
An example showing that corners shouldn't be partially rounded on the menu component