The primary typeface used in all of our experiences is XFINITY Standard. XFINITY Standard was designed specifically to support a wide set of uses across digital and physical platforms. It embodies simplicity yet still maintains a light touch of personality and sophistication.
Typography for XFINITY products should be light and airy where possible, but particularly when using larger type sizes. We've created a typography scale for each platform to optimize readability while remaining optically consistent.
Choosing text weight is a balancing act between lightness and legibility. The scale of the text is meant to maintain a similar weight whether the text is small or large.
In order to maintain legibility, text should always be set in a color that provides sufficient color contrast with its background color based on W3C guidelines.
Leading in typography should be carefully considered to maintain legibility and readability. Two instances where leading will be affected are in the title and body copy.
As a general rule, we state that standard title copy leading is 1.2x the type size, with .1x wiggle room on both sides, if necessary. Standard body copy leading is 1.5x the type size with .1x wiggle room on both sides, if necessary.
In order to deliver accurate specs to developers, the distance between a block of text and another graphic element or text should be measured from the text field’s bounding box, as opposed to the text itself.
When typesetting display text, opt for an airy layout with ample leading. The distance between the header and the body copy should maintain similar proportions and allow for generous breathing room.
Text that lives within UI elements, as well as lengthy blocks of text, should be set with tighter leading. Headers and body text should also maintain a closer distance.
Our products and experiences leverage color to draw the eye to action, make information digestible, and inject personality.
Core Product Palette
Our core color palette is derived from the secondary colors from the brand color palette. To learn more about the XFINITY brand and color palette, visit the Comcast Store.
- XFINITY Blue
- Pantone 299c
- C0 M0 Y0 K0
- R43 G156 B216
- HEX# 2B9CD8
- Charcoal Grey
- Pantone CG 11C
- C0 M0 Y0 K0
- R83 G86 B90
- HEX# 5A5A5C
Much of our experiences leverage our greyscale palette. They are slightly tinted to feel distinct and fresh.
- HEX# 000000
- Cool Grey 14
- HEX# 191919
- Cool Grey 13
- HEX# 2A2C2D
- Cool Grey 12
- HEX# 44484C
- Cool Grey 11
- HEX# 646A70
- Cool Grey 10
- HEX# 868F96
- Cool Grey 9
- HEX# 9BA4AA
- Cool Grey 8
- HEX# B1B9BF
- Cool Grey 7
- HEX# C7CDD2
- Cool Grey 6
- HEX# DDE2E6
- Cool Grey 5
- HEX# E6EAED
- Cool Grey 4
- HEX# EBEEF0
- Cool Grey 3
- HEX# EEF1F3
- Cool Grey 2
- HEX# F2F4F5
- Cool Grey 1
- HEX# FBFCFC
- HEX# FFFFFF
USING GREYSCALE BACKGROUNDS
All of our color choices are meant to pass accessibility requirements. When using greyscale backgrounds, we advise leveraging the following for light and dark themes.
To draw the eye to what is actionable in our experiences, we leverage the color blue. In digital experiences, we’ve modified our blue palette in order to meet AA accessibility contrast requirements.
When the use of blue is required in light and dark-themed experiences, we have to alter our blues slightly. Working with the accessibility team, we’ve identified 3 colors that pass contrast requirements, while appearing optically identical when used correctly.
- Blue Ocean
- HEX# 00619A
- Blue Sky
- HEX# 0272B6
- Blue Deep
- HEX# 0B7DBB
- Blue Genes
- HEX# 2B9CD8
On Light Themes
@blue-sky is used when serving as a background for white text along with text links and actionable graphics.
On Dark Themes
@blue-deep is used when serving as a background for white text @blue-genie is used for text links and actionable graphics.
Secondary colors are used sparingly in our experience and should be applied to information graphics, illustrations, and call outs. This palette should complement our core colors and not compete or overtake the experience. Our secondary colors have versions that can be used when contrast requirements are necessary.
- HEX# FB543F
- HEX# FF5A5A
- HEX# FF9271
- HEX# FFA700
- HEX# FFD871
- HEX# FF638D
- HEX# 4AB1C1
- HEX# 1BCFE1
- Green Tea
- HEX# 1EE2C9
- HEX# 65D0A7
- Sea Foam
- HEX# 47C684
- HEX# BC43D3
Accessible Color Variations
While our secondary colors are bright and vibrant, many of them don't meet contrast requirements when using light themes. We've done a full color spectrum test to ensure that our recommendations pass on our greyscale. We recommend only using these colors on text or stroke glyphs so that they meet contrast requirements.
High Contrast Alternates
- Berry 2
- HEX# B10030
- Haute 2
- HEX# D9003A
- Tangerine 2
- HEX# BF2C00
- Lemon 2
- HEX# 895A00
- Minty 2
- HEX# 24744A
- Green Tea 2
- HEX# 0E695D
- Lagoon 2
- HEX# 0C5E66
- Bramble 2
- HEX# 8E26A2
- HEX# 1F232E
Icons are the work horses of our experiences. They are used to convey status, action and navigation. Icons are clear, single-color shapes that can be stroked or filled in to convey on/off status. The intent is always to be easily identifiable and as clear as possible.
The Anatomy of an Icon
To ensure that all of our icons are simple and consistent, we utilize the following rules when creating them.
Use the Grid
The foundation kit uses a grid system to ensure that elements are consistent and balanced with themselves and as a system. The icon system is created at a 24x24 size and can be scaled in even increments up to 72x72. Scaling one of the system icons to this size is discouraged and you should consider using a representational illustration instead.
To ensure that our glyphs and icons look consistent, we employ the following styles:
- Strokes should be 1px
- Ends should be capped
- Joins should be rounded
Core angles should follow our grid, which features a 45º angle, but offers flexibility as well. Knowing that we work in a world that's not comprised of exact angles, we strive toward readability instead.
As a general rule, having strokes within strokes makes the icon harder to understand so should be avoided. When adding an extra shape, fill the inner shape to increase readability and reduce complexity.
All of our icons and glyphs have a stroked and filled state. This allows for on / off states, and makes shapes more readable at reduced sizes.
A status indication icon is the most simplistic icon that we create and should be comprised of a few stroke lines. It is meant to live at an extra small size of 24 pixels. These icons are usually accompanied by a circle shape and color to reinforce the status.
Actions and Navigation
Actionable items are common in both our digital experiences and physical hardware. Their main purpose is to convey an action, task or function. Actions have a wider range of size, starting at 24x24 and can go up to 72x72, based on hierarchy and platform. For print and physical, use your discretion. These glyphs are drawn to have a stroke or filled state that can be leveraged for on / off indication.
App Icon Framework
Our app icons follow a specific framework to maintain consistency while representing the functions of the application itself.
Based on the thematic approach of the app, these icons leverage four main attributes. Experiences that are more lifestyle-oriented or leverage a light theme should use the light app icon, while entertainment and immersive experiences can leverage the dark.
App Icon Starter Kit
We've developed a starter kit with recommendations for both iOS and Android to make it easier to create icons within our design system.
Across all Xfinity products, we use a set of patterns to keep our experiences consistent. This consistency is essential to creating a unified approach and experience across platforms.
Custom patterns are used consistently across platforms and are integral to fostering familiarity and ease of use across the experience. As a rule, we should understand the goal that the product is trying to solve and consider what interactions best serve that goal.
Empty and Error States
Empty and error states need to be thoughtfully designed to avoid confusion and the feeling of an incomplete experience.
At times, content areas may lack their intended elements due to unknown or unavailable data, either intentionally or beyond our control. For example, when a personalized feature hasn’t been set up. Designing for that state allows us to support, educate, and connect with customers—encouraging them along an ideal journey.
Empty states can apply to a null screen or an inactive component. Either way, the affected area should be addressed.
Designing for Empty States
Clearly describe the feature, focusing on the benefits. Use personality and brand elements to be relatable. Sell the lifestyle we provide. Be different. Be unique. We utilize the following rules to keep our empty states consistent across platforms and products.
A heading is to be used to call the users attention to the empty state. It should describe the reason for the empty state.
This should elaborate on the heading, explaining the situation in clear detail. If appropriate, offer the user suggestions to fix the empty state.
Illustration / Iconography
An illustration or icon help ground the design of the empty state. These can be aligned with the heading or body copy, or can take over the affected area completely.
Illustration / Iconography
An illustration or icon help to design an empty state. This can be in line with the heading or body copy, or can take over the affected area fully. Illustrations can add humor and playfulness when appropriate but should also be sensitive to the greater context of the scenario.
Inactive components may appear for a variety of reasons— the action may not be available, or the user may need to complete other forms or actions before the button is usable.
Components should appear visually unavailable but not as if the user has caused an error.
It's important to note that inactive components don't need to meet accessibility contrast requirements.
Designing for Error States
At times our services may fail for reasons that are beyond our control. Error states can create a critical support structure against weak points in the experience. An error is a type of empty state, so all the rules for empty states should apply here too, with additional considerations.
All the content should be aimed at helping the customer to better understand and resolve the issue. Extranious detail/images should be removed. Be transparent about the current system status. Channel frustration into constructive action by always including steps to resolution. Whenever possible, the user should be able to proactively self-heal.
Do be consice when the errors have a severe impact to the user experience.
Don't use humor during stressful situations such as a security system failure.
Reserve humor for infrequent errors that have a low impact on the customer experience (e.g., page not found). Imagery can help set a positive tone and lighten the mood, however use sparingly and with caution. Keep in mind the user is in a potentially distressing situation, so the tone should be thoughful and helpful.
Don’t brand an error; this can degrade a logo. Use voice, tone, and imagery to reflect the brand.
Depth, Not Overload
Experiences should have less actions per page and push users to dive deep into their experiences as opposed to a bunch of actions on one page. All actions presented on one screen should only be two–three button presses away.
A Sense of Place
Focused and unfocused states should be ultra explicit to give the user a sense of place and to know what they can interact with at all times. Using scale, color, and transparency can greatly increase the user's understanding of what they are highlighted on.
While device inputs are evolving, television's baseline is simple and primitive. To help improve predictable and simple interactions, we leverage cross-hair techniques. By using column or row stacks in a consistent manner, sense of place and learning curve are reduced.
Stay in the Box
TV is designed using a 16:9 aspect ratio. Graphics will scale across screens of different sizes and resolutions—including standard definition—without adjusting content, meaning that what is seen on a 720p will be the same on a 4K television. There is a minimum amount of padding (safety) on all screens to prevent design elements from being cropped off of the edges of the screen.
Type Scale for TV
Typography for XFINITY products should be light and airy where possible, but particularly when using larger type sizes. We’ve specifically crafted a typographic scale for each platform, to optimize readability while remaining optically consistent.
Our television experiences leverage three primary templates: Media View, L-View, and Full screen.
Tablet and mobile manufacturers use a variety of platforms, the most popular being Android and iOS. The visual language and overall terminology varies from platform to platform, but the general principles and interactions are similar. The design of an XFINITY product should not differ drastically from platform to platform, but should make use of the various patterns and frameworks available for each.
Designed for Touch
Designs should leverage gestures for the majority of navigation, reserving taps for intent, to reduce friction and simplify the experience.
Establishing outside margins maintains alignment and prevents key functions from touching up against the screen's edge. Always provide a comfortable touch target around actionable elements so they can be tapped without error.
Base Line Grid
Unlike responsive web design, native apps have a relatively fixed amount of real estate so it's essential to establish consistent grids and spacing across devices.
Type aligns to a 4pt baseline grid
Padding of typographical elements are based on increments of 4. While the grid should always be used to determine line height, it doesn’t always align to the text bounding box. As such, there may be reason to deviate from the 4pt increments when considering space between text blocks.
Components align to an 8pt square grid
Padding of components are based on increments of 8. Because mobile screens are a fixed size, padding should always be measured relative to surroundings.
Type Scale for Mobile
The following type scale was developed specifically for native apps and is intended to create hierarchy while balancing lightness and legibility.
Common Size Relationships
It's important to note that in native app development, developers associate the class name to the font weight and all other attributes can be changed accordingly. For example, Body2 can be size 14 and @coolgrey-11 or Body2 can be size 14 and @coolgrey-13.
When designing for mobile, we must strike a balance between a custom layout, branded elements and the native patterns that users are most accustomed to.
As a rule, we should understand the goal that the app is trying to solve and consider what components and interactions best serve that goal. It's also helpful to consider what makes a product unique so you can focus design attention around those elements.
The iOS and Android platforms bolster usability through consistency within their own operating systems. Common tasks should default towards native behaviors and what user’s expect. Some of these may include: filling out forms, core navigation, or sign in behavior. Leveraging native components within apps is what makes an experience feel at home inside of an operating system. It also adds efficiency and consistency between products as all states, animations and accessibility requirements are already accounted for. Each platform offers different ways to customize native components so that they feel inherent of the brand.
When leveraing native components, there's still an opportunity to style them so that they feel cohesive and align to our brand.
Modals and Overlays
Custom elements are used consistently across platforms and are integral to fostering familiarity and ease of use across the experience. While it is advantegous to leverage native components for efficiency and usability, at times native components may not achieve the goals or the desired brand impact that the experience requires. When thinking through experiences, we ask every designer to be conscious of our design principles, how design decisions impact our holistic system, and to leverage our design process.
To help ensure consistency and reduce effort across platforms and experiences, we've started to compile custom components to share across all touchpoints. This will make for a more usable and friendly ecosystem while strengthening our brand presence across devices and platforms.
2 button sizes are used:
Best used for full screen takeovers and screens where the button is the main call to action.
Best used on screens that may contain multiple actions or where the button does not take precedent as the main call to action.
Button Styles and States
Toast notifications display temporary information such as an error or confirmation message. They can be persistent, self-dismissing or dismissed by the user. In some cases, they may contain actionable or tappable elements.
A card is a UI component that serves as a summary about a single subject and an entry point to more detailed information.
Cards may contain a photo, text, link, or other actionable controls related to a single object.
They’re typically used in a collection as a way of displaying contextually relevant subjects that contain variations in data and content. Cards should act as a secondary entry point to detailed subject matter and support a primary entry point to the subject, such as primary navigatio
Cards should share styling as closely as possible across clients (iOS, Android and web).
Cards offer a convenient way to display different forms of content that require summarization. They’re also well-suited for showcasing elements of varying size and dimension, like a series of images with captions of variable lengths, video feeds, or notifications.
When to use:
Use a card layout when displaying content that:
- As a collection, comprises multiple data types, such as images, movies, and text
- Does not require direct comparison (a user is not directly comparing images or text)
- Supports content of highly variable length, such as descriptions
- Contains interactive content, such as switches or action buttons
- Is a subject that has to include additional content in order to summarize status
- Has an order or hierarchy to organize individual topics that relate to a single subject
- When order or hierarchy needs to be enforced among individual subjects that relate to a single context
Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. Cards within a card collection can each contain a unique data set, such as a list with an action, a notification about a service with an action, multiple images in a series, and an image with an action.
Don't overload cards with extraneous information or actions. A card’s purpose to summarize a subject matter.
Use hierarchy within the card to direct a users attention to the most important information. For example, place primary content at the top of the card, or use typography to emphasize primary content.
Images can reinforce other content in a card (video, posters, photographs, illustrations, etc). However, their size and placement within the card depends on whether images are the primary content or are being used to supplement other content on the card. This is especially important when designing cards with content that represents video feeds, photographs, and movie/TV posters that are common subject matter in the Xfinity family of products.
Cards have a constant width and variable height. The maximum height is limited to the height of the available space on a platform, but it can temporarily expand (for example, to display a comment field).
Cards do not flip over to reveal information on the back, rather they should allow the user entrance to other areas of an application with more detailed information. A card should never navigate a user to a duplicated data set that was previously viewed within the card, further supporting a card’s purpose to summarize a subject matter.
Card gestures should be consistently implemented with the supported gestures of the controls and other UI components used within the card.
For example, a card using a gallery row may use the same gestural behaviors as a gallery row that exists elsewhere in the UI outside of a card.
A general rule; when traversing through focus points on a card, all focusable elements are visited before moving to the next card.
The specific behavior of access focal points should be defined by the native client.
Card collections should only scroll vertically.
Card content that exceeds the maximum card height is truncated and does not scroll, but the card can be expanded. Once expanded, the card may exceed the maximum height of the view. In this case, the card will scroll with the card collection.
Anatomy of a Card
A card is constructed using blocks of content. These blocks can be organized to promote different types of content. For example, numbers may be emphasized by increasing their typographic scale.
The header of the card indicates what the card represents and any other contextual data that is associated with the card.
The header is flexible and can adjust based on the needs and data that your experience offers.
The primary action in a card is typically the subject of the card itself. Supplemental actions can vary from card to card in a collection, depending on the content type and expected outcome; for example, playing a movie versus acting on a notification. Within cards in a collection, position actions consistently.
Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
Try to limit supplemental actions to two actions, in addition to an overflow menu.
UI controls, like a slider, placed inline with primary content can modify the view of the primary content. For example, a slider to choose a day, stars to rate content, or a segmented button to select a date range. UI controls are typically placed at the bottom of the card.
Limit UI controls to one per card.
Overflow Menu or Settings (Optional)
An overflow menu or settings access should be placed in the upper-right corner of a card.
Take care not to overload an overflow menu with too many actions.
The web is optimized for performance and flexibility, and leverages a foundation of standards that users expect.
Responsiveness is the ability for elements to adapt to a canvas width without compromising the balance of the overall layout. Elements designed to be responsive should be flexible in appearance and functionality.
When designing an XFINITY product, it is highly important to consider the platforms and devices the design may live on. A well-designed product should easily adapt to the various canvas sizes it may live.
Type Scale for Web
To create a consistent experience for customers, all text follows a specific structure in size and weight. Each style was assigned a simple label to help avoid confusion across products and platforms.
Variations in size, weight, color and space are used to convey hierarchy and focus. All fonts are in pixels, which should be used when communicating font sizes to development. When positioning type within an object, padding should bump up to the text bounding box.
Variations in size, weight, color and space are used to convey hierarchy and focus.
In order to convey a unified appearance across platforms and products, we leverage the same common grid across our web experiences. While you shouldn't let grids dictate all design decisions, they can be very helpful when creating responsive elements.
- Max Width 1024px
- Grid: 12 columns
- Gutters: 12px
- Outside Margins: 24px
- Max Width 768px
- Grid: 12 columns
- Gutters: 6px
- Outside Margins: 24px
- Max Width: 375px
- Grid: 12 columns
- Gutters: 6px
- Outside Margins: 12px
Plus/Minus is paramount to maintaining the XFINITY brand by linking these premium design styles to our digital experiences.
Dark devices embody a luxurious, premium look and feel. They are meant to recede and not compete with the TV. Materials include matte, plasticized coatings and metal reveals, highlighted by LED lighting and fabrics.
Consumer-facing entertainment and whole home services.
TV, Internet, Phone, Voice
Light devices blend with surroundings without compromising on style or function.
Consumer and employee-facing tools, such as customer support, file management, and account settings.
All platforms deliver a premium, high-end experience matched only by the quality and craftsmanship of our devices.
Since the longevity of equipment varies between customers, we must design with timeless simplicity in mind. Primary TV Boxes are usually placed within entertainment centers, often with a collection of other devices. Secondary units are often in a bedroom, on top of a dresser. Overuse of lighting is challenging in this environment. TV Boxes should be designed for flat placement or mounting behind a TV.
XFINITY TV Box
XFINITY Wireless TV Box
As TV Boxes become smaller, the remote interface continues to be the most common interaction with XFINITY, but it must also be comfortable for many different types of users. Furthermore, as voice becomes a more popular way for users to control their XFINITY experience, the number and types of buttons and controls will change.
Wireless Gateways and Extenders streamline and optimize the process of setting up and maintaining the in-home network. These devices roll multiple components into one. To get the best performance, these devices need to be visible and centrally located. Thoughtful design can significantly impact placement, thus improving overall network performance.
Advanced Wireless Gateway
XFINITY Home devices serve to meet the needs of both a traditional home security system and an "Internet of Things" connected home.
Customers use keypads, touchscreens, mobile devices, PCs, or their TV to control and monitor their connected homes. Because of this, XFINITY Home devices have varying levels of design interactions.
XFINITY Home Touchscreen
Easy activation of our products and services starts with clear, straight-forward language. Care is taken to outline the step-by-step process which often includes a shift from paper directions to a digital experience.
The packaging process is highly collaborative involving Xfinity Experience designers, business units, research, brand, legal, operations, logistics, procurement, and vendors. Preparation, Design, Production, and Execution are the four stages of the process. Altogether, there are twenty steps are involved from start to finish, typically requiring 32 weeks.