Style

Glass has a unique style, so we provide standard card templates, a color pallete, typography, and writing guidelines for you to follow whenever possible.

Metrics and Grids

The Glass user interface has standard layout and margin guidelines for different types of timeline cards. Cards normally have the following general regions, and we've laid out some guidelines for you to follow for a general set of cards.

Card regions

Glass defines dimensions for a set of common regions to make it easy to design and display different cards consistently.

Main Content

The main text content of the card is in Roboto Thin and is bounded by padding.

Glass dynamically resizes the font size based on the amount of content.

Full-bleed image

Images work best when full-bleed and do not require the 40px of padding that text requires.

Footer

The footer shows supplementary information about the card, such as the source of the card or a timestamp. Footer text is usually 26 pixels, Roboto Light, white (#ffffff) in color, and centered.

Status bar

The status bar has 3 states. Slider shows the current location in a set of cards. Progress or grace period shows progress or time to cancel an action. Candy cane animates in a loop while processing.

Left image or column

Left image or columns require modifications to padding and text content. See the left image and column templates for the complete grid.

Padding

Timeline cards have 40 pixels of padding on all sides for the text content. This allows most people to see your content clearly.

Layout templates

The following layouts show you how some common layout grids and cards that implement the layout. See the Mirror API playground for full implementation details.

Main layout



Full bleed with text

Author and content

Left image or column

List

Color

Glass displays most text in white and uses the following standard colors to denote urgency or importance. You can make use of these colors for your timeline cards as well:

CSS Class RGB Value
white #ffffff
gray #808080
blue #34a7ff
red #cc3333
green #99cc33
yellow #ddbb11

The following examples use colors to denote important information such as train lines and flight status.

Typography

Glass displays all system text in either Roboto Thin (primary) or Roboto Light (secondary) depending on font size. If you're creating live cards or immersions, feel free to use different typography to convey your own branding.

Primary - Roboto Thin

Glass displays most text in this font.

ABCDEFGHIJKLMN OPQRSTUVWXYZa bcdefghijklmnopq rstuvwxyz123456 7890!?/+-=()[]#@$ %^&*<>:;”

Secondary - Roboto Light

Glass displays 26 px text in this font.

ABCDEFGHIJKLMNOPQRST UVWXYZabcdefghijklmnopq rstuvwxyz123456789 0!?/+-=()[]#@$%^& *<>:;”

Dynamic text resizing

Glass displays most timeline cards with the largest font size possible, based on the amount of content. The following cards show examples of the typography characteristics of text based on the amount of text.

Writing

You have limited space for text, so follow these guidelines when writing text for Glassware.

Keep it brief. Be concise, simple and precise. Look for alternatives to long text such as reading the content aloud, showing images or video, or removing features.

Keep it simple. Pretend you're speaking to someone who's smart and competent, but doesn't know technical jargon and may not speak English very well. Use short words, active verbs, and common nouns.

Be friendly. Use contractions. Talk directly to the reader using second person ("you"). If your text doesn't read the way you'd say it in casual conversation, it's probably not the way you should write it.

Put the most important thing first. The first two words (around 11 characters, including spaces) should include at least a taste of the most important information in the string. If they don't, start over. Describe only what's necessary, and no more. Don't try to explain subtle differences. They will be lost on most users.

Avoid repetition. If a significant term gets repeated within a screen or block of text, find a way to use it just once.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.