Primary Button Style |
Default / Hover / Pressed |
Inactive |
|---|---|---|
|
Background: #FFFFFF XFINITY Standard Medium, 14px |
#256CEE / #225AC1 / #003FB3 Primary Button | #E8E8E8 Primary Button Text: #757575 |
Secondary Button Styles |
Default / Hover / Pressed |
Inactive |
|---|---|---|
|
Background: #FFFFFF XFINITY Standard Medium, 14px |
#256CEE / #225AC1 / #003FB3 Secondary Button | #8C8C8C Secondary Button |
|
Often, secondary buttons appear only as text when paired with the Primary Button Style. |
#256CEE / #225AC1 / #003FB3 Secondary Button | #8C8C8C Secondary Button |
|
Background: #F2F2F2 XFINITY Standard Medium, 14px |
#191919 / #225AC1 / #003FB3 Secondary Button | #8C8C8C Secondary Button |
|
Background: #F8F8F8 XFINITY Standard Medium, 14px |
#191919 / #225AC1 / #003FB3 Secondary Button | #8C8C8C Secondary Button |
|
Background: #256CEE XFINITY Standard Medium, 14px |
#FFFFFF / #FFFFFF / #003FB3 Secondary Button Hover Text: #256CEE | #8BAEEF Secondary Button |
|
Background: #303030 XFINITY Standard Medium, 14px |
#FFFFFF / #FFFFFF / #003FB3 Secondary Button Hover Text: #191919 | #8C8C8C Secondary Button |
Link Style A |
Default / Hover / Pressed |
|---|---|
|
Found primarily in body copy Background: #FFFFFF XFINITY Standard Regular, 16px |
#256CEE / #225AC1 / #003FB3 Link Style A |
Link Style B |
Default / Hover / Pressed |
|---|---|
|
CTA used to navigate to a new page or tab, when a pill button is not appropriate. Background: #FFFFFF XFINITY Standard Regular, 16px |
#256CEE / #225AC1 / #003FB3 Link Style B > |
|
Background: #256CEE XFINITY Standard Medium, 16px |
#FFFFFF / #17F5FD / #17F5FD Link Style B > |
|
Background: #303030 XFINITY Standard Medium, 16px |
#FFFFFF / #17F5FD / #17F5FD Link Style B > |
Link Style C: Labels |
Default / Hover / Pressed |
|---|---|
|
Used sparingly, as needed for data viz or icon-based CTAs Background: #FFFFFF XFINITY Standard Medium, 12px ALL CAPS, letter-space +1 (in sketch) |
#256CEE / #225AC1 / #003FB3 Link Style C |