XFINITY

DESIGN STANDARDS

The XFINITY Design Standards define our approach to creating distinct experiences.

Developed specifically for our partner agencies, designers and writers, these standards ensure that all of our experiences work together to embody our brand vision, tone and voice.

Simple

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.

Smart

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.

Delightful

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

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.

Font Size

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.

Weight

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

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.

Measuring Text

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.

Display Text

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.

UI Text

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.

Color

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

Cool Greyscale

Much of our experiences leverage our greyscale palette. They are slightly tinted to feel distinct and fresh.

  • Black
  • 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
  • White
  • 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.

Action Blue

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

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.

  • Watermelon
  • HEX# FB543F
  • Haute
  • HEX# FF5A5A
  • Tangerine
  • HEX# FF9271
  • Pumpkin
  • HEX# FFA700
  • Lemon
  • HEX# FFD871
  • Berry
  • HEX# FF638D
  • Turq
  • HEX# 4AB1C1
  • Lagoon
  • HEX# 1BCFE1
  • Green Tea
  • HEX# 1EE2C9
  • Minty
  • HEX# 65D0A7
  • Sea Foam
  • HEX# 47C684
  • Bramble
  • 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
  • Smolder
  • HEX# 1F232E

Iconography

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.

Stroke Styles

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
Angles

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.

Inner Shapes

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.

Fills

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.

Status Indication

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.

EXAMPLES

App Icon Framework

Our app icons follow a specific framework to maintain consistency while representing the functions of the application itself.

Common Attributes

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.