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 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,...

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...

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...

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...

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 expand and contract upon interaction.

Reply’s grid system, scaled down to 50%

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...

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 grey.

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 grey background of the app.

Color

Color theme

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

Reply’s color theme uses a primary color (dark blue-grey) 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 Reply’s content. The type scale makes...

Reply’s uses Work Sans as the typeface. All items in the type scale provide the typographic variety necessary for Reply’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. To create consistency, all of Reply’s icons share the same underlying grid structure
2. A collection of Reply’s icons

Shape

Categories

Components are grouped into shape categories based on their size. Shape categories let you set multiple component values at once. Shape categories include:

Components are grouped into shape categories based on their size. Shape categories let you set multiple component values at once. Shape categories include:

  • Small components
  • Medium components
  • Large components
Reply’s shape categories
1. Small components
2. Medium components
3. Large components

Small components

Extended floating action buttons have rounded corners with a 50% corner radius. Component Category Attribute Value Extended FAB Small components Family Size Rounded 50%

Extended floating action buttons have rounded corners with a 50% corner radius.

Component Category Attribute Value
Extended FAB Small components Family
Size
Rounded
50%

Medium components

Cards have rounded corners with a 0dp corner radius. Component Category Attribute Value Cards Medium components Family Size Rounded 0dp;0dp;0dp;0dp

Cards have rounded corners with a 0dp corner radius.

Component Category Attribute Value
Cards Medium components Family
Size
Rounded
0dp;0dp;0dp;0dp

Large components

Bottom sheets have rounded corners with a 12dp corner radius. Component Category Attribute Value Bottom sheets Large components Family Size Rounded 12dp;12dp;n/a;n/a* *Bottom sheets can...

Bottom sheets have rounded corners with a 12dp corner radius.

Component Category Attribute Value
Bottom sheets Large components Family
Size
Rounded
12dp;12dp;n/a;n/a*

*Bottom sheets can only shape the top-left and top-right corners.


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...

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...

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

1. 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...

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 deleting an email.
When a card is swiped to the left, it reveals the action of highlighting 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...

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 that’s inspired by a curling piece of paper.

Reply’s logo animation traces a path that’s 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.

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 finishing every item in one’s inbox..

Animated illustrations create a connection at key points in a user journey, such as finishing every item in one’s inbox..

The two remaining emails are archived, triggering a celebratory animation.
Reply’s logo animation loops during a pull to refresh the loading sequence.

Up next