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.
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.
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.
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.
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.
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.
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.
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
The type scale makes use of the variety of weights available by using six weights of Work Sans: Light, Regular, Medium, SemiBold, and Bold.
Iconography
Reply’s iconography has subtle styling, which expresses brand while focusing on icon recognition and functionality.
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
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.
Extended FAB
On desktop and tablet, Reply uses a custom extended FAB that is paired with a navigation drawer.
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.
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.
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.
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.
Navigation transitions
Reply uses shorter durations and standard easing to focus on efficiency.
Reply uses shorter durations and standard easing to focus on efficiency.
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..