Reply

Reply is an email app that uses Material Design components and Material Theming to create an on-brand communication experience.


About Reply

Reply is an app that helps individuals and groups communicate. It’s designed for clarity, legibility, intuition, and ease-of-use.

Reply’s brand projects friendliness, competence, and a hint of quirkiness.

Functional aesthetic

Reply’s brand emphasizes communication. As a result, the design of the app prioritizes functional qualities, placing ease-of-use over design elements that don’t have a functional...

Read More

Reply’s brand emphasizes communication. As a result, the design of the app prioritizes functional qualities, placing ease-of-use over design elements that don’t have a functional purpose.

Reply’s branding is often paired with user actions, such as the navigation drawer being accessed from the brand logo.


Product architecture

Reply uses a product architecture similar to other email apps: an inbox that contains new and archived messages, and a UI structured around organizing and taking actions related to those messages. Messages can be starred, sent, deleted, marked as spam, or organized in custom ways set up by the user.

A focus on user tasks

Because user tasks mostly involve content generation and consumption, screen space is dedicated to content over other UI elements. To ensure there is enough space for both content and navigation, Reply uses different navigation patterns for desktop, tablet, and mobile.

Reply uses different navigation patterns on tablet (rail), mobile (bottom app bar), and desktop (navigation drawer).


Navigation drawer

On desktop, Reply uses a standard navigation drawer. Drawer destinations are represented using both icons and text. The top of the navigation drawer incorporates settings,...

Read More

On desktop, Reply uses a standard navigation drawer.

Drawer organization

Drawer destinations are represented using both icons and text. The top of the navigation drawer incorporates settings, an account switcher, and a caret (or arrow) paired with the Reply logo.

Drawer interactions

When tapped, the logo collapses the drawer into a rail.

Reply’s standard navigation drawer gives access to navigation items, an account switcher, and settings. When the Reply logo is tapped, the drawer collapses into a rail.

Bottom app bar

On mobile, Reply uses a bottom app bar to launch navigation. When the Reply logo is tapped, it reveals a bottom navigation drawer with a...

Read More

On mobile, Reply uses a bottom app bar to launch navigation.

Bottom app bar interactions

When the Reply logo is tapped, it reveals a bottom navigation drawer with a settings icon and account avatar (which can be tapped to switch accounts).

When the Reply logo is tapped again, the navigation closes and the bottom app bar returns to its default state.

Reply’s bottom app bar

Rail navigation

On tablet, Reply uses rail navigation, in which each destination is represented by an icon. The rail can open to a standard navigation drawer by...

Read More

On tablet, Reply uses rail navigation, in which each destination is represented by an icon.

Rail interactions

The rail can open to a standard navigation drawer by tapping the Reply logo. An arrow displayed next to the logo makes it clear that the logo is interactive.

Rail navigation is ideal for use on tablet because it can show a large number of destinations while taking up very little space. Customized folders are shown when the rail navigation has been opened, allowing the user to read the folder title text.

When collapsed, the rail doesn’t include customized folders created by the user. This is because customized folders all use the same icon, so they can’t be distinguished by icon alone.

Reply’s rail navigation reveals a navigation drawer upon tapping the Reply logo.


Layout



Grid system

Reply uses a responsive grid, allowing padding and column size to change across mobile, tablet, and desktop. Content is placed in a column, where messages...

Read More

Elevation

Reply uses color to create distinction between components. For example, the container of a card is visible because cards have a white surface color, while...

Read More

Reply uses color to create distinction between components. For example, the container of a card is visible because cards have a white surface color, while the app background is gray.

Denser layout

Because Reply sometimes displays dense content, removing shadows helps decrease visual complexity. It also allows items to have smaller padding between each other, leaving more space for content.

The containers of cards in Reply have white surfaces, which stand out against the gray background of the app.




Color

Color theme

Reply’s color theme uses a primary color (dark blue-gray) and a secondary color (orange). Because the secondary color is rarely used, Reply’s UI is often...

Read More

Reply’s color theme uses a primary color (dark blue-gray) and a secondary color (orange).

Because the secondary color is rarely used, Reply’s UI is often monochromatic, using variations of its primary color. This subtle color theme allows content to be easily read without distraction, and photographic avatars to be easily seen.

Whenever Reply’s secondary color is used, it has a pronounced impact.

Color theme


Typography

Type scale

Reply’s uses Work Sans as the typeface. All items in the type scale provide the typographic variety necessary for an app’s content. The type scale...

Read More

Reply’s uses Work Sans as the typeface. All items in the type scale provide the typographic variety necessary for an app’s content.

The type scale makes use of the variety of weights available by using six weights of Work Sans: Light, Regular, Medium, SemiBold, and Bold.

Reply’s type scale

Work Sans’ letterforms

Work Sans compared to Roboto


Iconography

Reply’s iconography has subtle styling, which expresses brand while focusing on icon recognition and functionality.

1. Reply’s icons share the same grid structure, 2. A collection of Reply’s icons


Components



Floating action button

On mobile, Reply nests a custom FAB in a bottom app bar. On desktop and tablet, Reply uses a custom extended FAB that is paired...

Read More

On mobile, Reply nests a custom FAB in a bottom app bar.

Reply’s custom FAB nested in a bottom app bar

A FAB that hasn’t been customized

Reply’s FAB uses custom color and iconography.

Extended FAB

On desktop and tablet, Reply uses a custom extended FAB that is paired with a navigation drawer.

Reply’s custom extended FAB inside a navigation drawer

An extended FAB that hasn’t been customized

Reply’s extended FAB uses custom color and typography.

Bottom app bar, bottom sheet

On mobile, Reply uses a custom bottom app bar for navigation and important actions. On mobile, Reply’s bottom app bar is the primary way to...

Read More

On mobile, Reply uses a custom bottom app bar for navigation and important actions.

1. This is a default bottom app bar.

2. Reply’s bottom app bar uses custom iconography, color, and shape. The Reply logo is incorporated into the component, functioning as the menu icon. A custom shape in the bar holds the floating action button.

Bottom app bar

On mobile, Reply’s bottom app bar is the primary way to perform navigation and actions.

Contextual action bar

When the user wishes to select and apply actions to multiple items, the bottom action bar transforms into a contextual action bar.

Bottom navigation drawer

Upon pressing the Reply logo, the bottom app bar reveals a bottom navigation drawer that holds navigation items and an account switcher.

Floating action button

The bottom app bar moves off-screen on scroll, though the FAB remains.

Cards

Reply displays emails on cards that have been customized with square corners. Padding between the cards is very small because color indicates boundaries of each...

Read More

Reply displays emails on cards that have been customized with square corners. Padding between the cards is very small because color indicates boundaries of each card (no indication of elevation is given).

This small padding allows more content to fit on-screen.

When a card is swiped to the right, it reveals the action of highlighting an email.

When a card is swiped to the left, it reveals the action of deleting an email.

Chips

Reply entry chips apply customized typography, color, and image sizing. Cards contain content and links about a single subject. Related Article arrow_downward Chips are compact...

Read More

Reply entry chips apply customized typography, color, and image sizing.

Adjustments to the layout, typography, and color help the chip component feel visually similar to Reply’s brand.

A default entry chip

Reply’s entry chips use custom color and typography. The avatar imagery is customized to be larger, completing the chip shape instead of being inset.




Motion

Launch screen

Reply’s logo animation traces a path inspired by a curling piece of paper.

Read More

Reply’s logo animation traces a path inspired by a curling piece of paper.

Launching Reply for the first time displays an animated launch screen.

Navigation transitions

Reply uses shorter durations and standard easing to focus on efficiency.

Read More

Reply uses shorter durations and standard easing to focus on efficiency.

These navigation transitions use 250ms instead of the standard 300ms.

Icons & illustrations

Animated illustrations create a connection at key points in a user journey, such as reaching inbox zero.

Read More

Animated illustrations create a connection at key points in a user journey, such as reaching inbox zero.

The two remaining emails are archived, triggering a celebratory animation.

Reply’s logo animation loops during a pull to refresh the loading sequence.