Visual Language

Create attractive and consistent interfaces

Our visual language ensures that information is well organized and consistent with principles of good visual design. Your product should look pleasant on the screen, even when viewed for a long time

Keep graphics simple, and use them only when they truly enhance usability. Don’t overload your user interface with text or with dozens of icons and buttons. Don’t use arbitrary symbols to represent concepts; they may confuse or distract users. The overall layout of your views and design of user interface elements should reflect the user’s mental model of the task your product performs. See “Reflect User’s Mental Model” from Core Principles.

🌈 Color

Color is a great way to impart vitality, provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualize data.

Use color judiciously for communication

The power color has to call attention to important information is heightened when used sparingly. For example, if tinted buttons are displayed repeatedly on the screen, color becomes less effective and users may have a difficult time focusing on the primary action.

Using color to indicate interactivity throughout your user interface

The Cornershop UI color should be used as a key color to identify interactivity on user interfaces. Make sure other colors don’t compete with it.

Avoid using the same color for interactive and non-interactive elements

If interactive and non-interactive elements have the same color, it’s hard for people to know where to interact.

☀️ Icons

Icons can represent common tasks and different types of content.

Application icons should be attractive and inviting

Application icons can be seen many times a day on your users’ home screens and bookmarks, even when the apps are not running. Embrace simplicity and memorability. Don’t include the Cornershop mark. Instead, design a recognizable icon that users can relate with the functionality of your application. Don’t place application icons throughout the user interface.

Embrace built-in system icons

In iOS 13 or later, use SF Symbols to represent task and modes in the user interface. On Android, use icons from Google’s Material Design System. Don’t mix and match icons between platforms.

For web apps, use existing icons that were designed for iOS.

Custom icons

To see guidelines on creating custom icons, see “Creating custom icons” from Icons.

🕹 Buttons

Buttons initiate app-specific actions, and include a title or an icon.

Naming buttons

Use verbs. An action-specific label says exactly what happens when you tap it.

Use title-case. Capitalize every word except articles, coordinating conjunctions, and prepositions of four or fewer letters.

Use system names. Use names used by the system where applicable. For example, close buttons on iOS are labeled “Done” instead of “Close” or “Dismiss”.

Avoid ambiguous names when changes can be lost. When performing an interaction that requires saving or discarding edited data, don’t use ambiguous names like “Close” that don’t convey whether data will be lost or not.

Keep titles short. Overly long text can crowd your interface and may get truncated on smaller screens.

Use the ellipsis character. An ellipsis character (…) can imply that there is more text than there is room to display or that an action (such as Open…) requires additional information before it can be performed. An ellipsis character after a menu item or button label indicates to the user that additional information is required to complete an action. You should use them in the following cases:

  • An action that requires further user input to complete or presents an alert allowing the user to cancel the action. Examples include Find, Open, Page Setup, and Print.
  • An action that opens a settings window. The main function of settings windows is to allow the user to change some aspect of the product, not the editing content. Examples include Preferences, and Options.

Visual style

Consider adding a border or a background when necessary. Sometimes, a key color can be used to denote the primary action for a screen.

Use colored backgrounds sparingly. Using buttons with colored backgrounds repeatedly can diminish the impact of the color and confuse users.

Use rounded corners. Use at least 8px of radius for rounded corners of buttons. These help users focus on what’s inside the button shape.

If the system allows it, use affordances like soft drop shadows. These help users understand the buttons can be interacted with.

🚨 Alerts

Alerts display messages to inform users about notable situations or potentially dangerous actions.

Elements of an alert

An alert should contain only the following elements:

Alert message text. This text, in emphasized (bold) system font, provides a short, simple summary of the error or condition that summoned the alert. Alerts should be a complete sentence and often will be presented as a question.

Informative text. This text appears in a smaller system font and provides a fuller description of the situation, the consequences, and ways to get out of it. For example, a warning that an action cannot be undone is an appropriate use of informative text.

Buttons for addressing the alert. Button names should correspond to the action the user performs when pressing the button—for example, Erase, Save, or Delete. The rightmost button in the dialog, the action button, is the button that confirms the alert message text. The action button is usually, but not always, the default button.

  • Include a default button. The default button should be the button that represents the action that the user is most likely to perform if that action isn’t potentially dangerous.
  • It’s a good idea to include a Cancel button. This button returns the user interface to the state it was in before the dialog appeared. It means “never mind”.
  • Never include a “Yes” or “No” button. These buttons don’t represent actions and are potentially ambiguous.

Writing Good Alert Messages

A good alert message states clearly what caused the alert to appear and what the user can do about it. Express everything in the user’s vocabulary.

To make an alert useful, provide a suggestion about what the user can do about the current situation. Even if the alert serves as a notification to the user and no further action is required, provide as much information as needed to describe the situation.

📤 Modals

Modality is a design technique that presents content in a temporary mode that’s separate from the user’s previous current context and requires an explicit action to exit.

Use modality when it makes sense

Create a modal experience only when it’s critical to focus people’s attention on making a choice or performing a task that’s different from their current task. A modal experience takes people out of their current context and requires an action to dismiss, so it’s essential to use it only when it provides a clear benefit.

Reserve alerts for delivering essential—and ideally actionable—information

Typically, an alert appears because something has gone wrong. Because an alert interrupts the experience and requires a tap to dismiss, it’s important for people to feel that the intrusion is warranted.

Always include a button that dismisses the modal view

For example, you might use Done or Cancel. Including a button ensures that the modal view is accessible to assistive technologies and provides an alternative to dismissal gestures.

Display a title that identifies the modal task

When people enter a modal task, they switch away from their previous context, so it’s a good idea to make the new context clear. You might also provide text in other parts of the view that more fully describes the task or provides guidance.

Use animation when presenting the modal view

Use a transition style that coordinates with your app and enhances the awareness of the temporary context shift. A preferred transition should vertically slide the modal view up from the bottom of the screen and back down when it’s dismissed. Use consistent modal transition styles throughout your app.

🌁 Cards

Use cards only when it makes sense

When possible, opt for built-in views from the system—like grouped tables on iOS.

Use standard metrics and an elevated appearance

Use consistent rounded corners, and spacing inside and outside the card. Include soft drop shadows to add depth, so users can differentiate the card from the background.

Be aware of interactions with the card itself

Users may expect to be able to interact with the card itself directly, like a if it was a button. Keep this in mind to enable appropriate actions.

🏂 Animations

Beautiful and subtle animations throughout your interface build a visual sense of connection between screens and content on-screen.

Animations reinforce your user interface’s mental model

When used sparingly, animation is one of the best ways to show a user that a requested action is being carried out. Don’t use animation for the sake of using animation.

For example, when an user taps “Add to Cart”, the image preview of the product flies directly into their Cart button and it bounces. This way users get immediate feedback about where to complete their purchase.

Animation isn’t an opportunity for artistic expression

Think of animation as a tool to convey status, provide feedback, enhance the sense of direct manipulation, and help users visualize the results of their actions. Excessive or gratuitous animation can make people feel disconnected or distracted.

Use animation to subtly but clearly communicate with the user

Think of animation as a tool to convey status, provide feedback, enhance the sense of direct manipulation, and help users visualize the results of their actions. Excessive or gratuitous animation can make people feel disconnected or distracted.

Strive for realism and credibility

People tend to accept artistic license, but they can feel disoriented when movement doesn’t make sense or appears to defy physical laws. If someone reveals a view by sliding it down from the top of the screen, for example, they should be able to dismiss the view by sliding it back up.

Make animations optional

When the option to reduce motion is enabled in their accessibility preferences, your interface should minimize or eliminate certain animations.

✏️ Text

Although graphics are primary means of user-computer interaction, text is prevalent throughout the interface for such things as button names, menu labels, alert messages, and more.

Using text consistently and clearly is a critical component of interface design

Your product development team should include a skilled writer who is responsible for reviewing all user-visible on-screen text as well as the instructional documentation. The writer should refer to this documentation and the complete User Interface Guidelines.

Use standard fonts

Whenever your application specifies a font, use system-defined constants; avoid using a specific font and point size. Using the system constants ensures that your user interface always displays the appropriate fonts regardless of changes to the platform.

Use appropriate font features

Most system’s font families include mono-spaced numeric characters and variably-spaced alphabetics. This is particularly useful when displaying quantities for products on custom controls.

🌑 Empty states

Be mindful about content being loaded

Use appropriate feedback for potentially lengthy operations, like fetching content using a cellular connection. Display a pleasant animated activity indicator or a shimmering effect over the content layers. Do not display written progress such as “4 seconds remaining” or “Loading…”.

Be prepared to inform users about failure

Because of adverse conditions such as an intermittent or unreliable network connection, content may fail to load. Don’t display a modal alert, these are displayed over the content and aren’t permanent. Use an appropriate placeholder in place of the content. Consider displaying an appropriate title and informative message about the error.

Provide a way for users to retry the task at hand, such as with a prominent button right after your placeholder. Don’t rely on gestures such as “Pull to refresh”, because not all people are familiar with them and it can be difficult to figure out.

Ease state transitions using animation

Use subtle animation, such as a quick cross-fade to ease transitioning between loading, error, loaded or empty states. Otherwise, users may perceive an unpleasant flash between states of your user interface.

Application launch screens

On some platforms such as iOS, a launch screen appears instantly when your app starts up. This screen quickly replaced with the app’s first screen, giving the impression that your app is fast and responsive. The launch screen isn’t an opportunity for artistic expression. Don’t include any branding, logos, or artwork. Design a launch screen that’s nearly identical to the first screen of your app to quickly ease users into your app.