We design with simplicity in mind, creating experiences that are easy to understand and easy to use.
Making simple experiences requires focusing the user’s attention on what is most important, presenting choices that are clear and concise, and ensuring user actions are consistent and intuitive in how they work and what they do.
Our designs demonstrate an understanding of preferences, behaviors, needs and history.
Smart design is personalized based on behaviors, context, and preferences, while anticipating needs to help guide the user to the right content or activity. Experiences and interfaces are optimized for each platform and interface.
We strive to create designs that excel on the both the functional and aesthetic level, fostering a sense of delight whenever possible.
Designs that are vibrant and dynamic make our products more fun and approachable. This thoughtful use of design to inspire delight is essential to creating satisfying experiences.
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 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.
Much of our experiences leverage our greyscale palette. They are slightly tinted to feel distinct and fresh.
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-sky is used when serving as a background for white text along with text links and actionable graphics.
@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.
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.
To ensure that all of our icons are simple and consistent, we utilize the following rules when creating them.
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:
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.
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.
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.
We've developed a starter kit with recommendations for both iOS and Android to make it easier to create icons within our design system.