Introduction
Note to developers:
Never use a hardcoded color value — always use an abstracted variable from the color palette. Never use a color that does not exist in the palette. If you need a color that doesn’t exist in the palette, ask the designer to update the design to use an existing color.
Note to designers:
Use the color styles in the Anatomy - Foundations library. Refer to the Getting started section in Resources for access to the Sketch libraries.
Color ranges
Brand
BSC-blue is our brand blue and should only be used for the Boston Scientific logo.
| Swatch | Name | Hex value | Sass |
|---|---|---|---|
| Brand primary | #003c71 |
$brand-primary |
Primary
Our primary ranges are neutral and action-primary ranges. These ranges are used the most. They are the basis of our color system.
Neutral
Use for text, borders, background colors, and general interface elements.
| Swatch | Name | Hex value | Sass |
|---|---|---|---|
| Neutral 00 | #000000 |
$neutral-00 |
|
| Neutral 20 | #333333 |
$neutral-20 |
|
| Neutral 40 | #666666 |
$neutral-40 |
|
| Neutral 60 | #999999 |
$neutral-60 |
|
| Neutral 80 | #cccccc |
$neutral-80 |
|
| Neutral 95 | #f2f2f2 |
$neutral-95 |
|
| Neutral 100 | #ffffff |
$neutral-100 |
Action-primary
Use only for actionable elements such as buttons, links, and hover states.
| Swatch | Name | Hex value | Sass |
|---|---|---|---|
| Action primary 10 | #001433 |
$action-primary-10 |
|
| Action primary 20 | #012965 |
$action-primary-20 |
|
| Action primary 40 | #0153cc |
$action-primary-40 |
|
| Action primary 60 | #3485fe |
$action-primary-60 |
|
| Action primary 80 | #9ac2fe |
$action-primary-80 |
|
| Action primary 95 | #e6f0ff |
$action-primary-95 |
|
| Action primary 97 | #f2f7ff |
$action-primary-97 |
Accent
Our accent ranges are used to provide pops of color. They are applied purposefully and should not be overused.
Accent-primary
Accent-primary should be used first. If a color from the accent-primary range has already been used, then a color from the accent-secondary range should be applied.
| Swatch | Name | Hex value | Sass |
|---|---|---|---|
| Accent primary 20 | #440066 |
$accent-primary-20 |
|
| Accent primary 30 | #660099 |
$accent-primary-30 |
|
| Accent primary 40 | #8800cc |
$accent-primary-40 |
|
| Accent primary 60 | #bb33ff |
$accent-primary-60 |
|
| Accent primary 80 | #dd99ff |
$accent-primary-80 |
|
| Accent primary 95 | #f7e6ff |
$accent-primary-95 |
Accent-secondary
Accent-secondary should be used second. This range was designed to accompany accent-primary.
| Swatch | Name | Hex value | Sass |
|---|---|---|---|
| Accent secondary 20 | #005f66 |
$accent-secondary-20 |
|
| Accent secondary 40 | #00becc |
$accent-secondary-40 |
|
| Accent secondary 60 | #00eeff |
$accent-secondary-60 |
|
| Accent secondary 80 | #99f8ff |
$accent-secondary-80 |
|
| Accent secondary 95 | #e6fdff |
$accent-secondary-95 |
Feedback
Our feedback ranges are used for messaging to the user. Success and warning ranges are coming soon.
Error
Only use colors from this range for error messaging.
| Swatch | Name | Hex value | Sass |
|---|---|---|---|
| Error 20 | #590d11 |
$feedback-error-20 |
|
| Error 40 | #b31921 |
$feedback-error-40 |
|
| Error 60 | #e64d54 |
$feedback-error-60 |
|
| Error 80 | #f2a6aa |
$feedback-error-80 |
|
| Error 95 | #fce9ea |
$feedback-error-95 |
Gradients
Gradients should be used sparingly and only after careful consideration. They can quickly become overwhelming and diminish the experience.
Brand
The brand gradient is used only at a high level and sparingly. This is to preserve the brand gradient’s impact and meaning. The brand gradient is made up of the “advancing arrow mark” three base colors.
| Swatch | Name | Degree | Colors | Sass |
|---|---|---|---|---|
| Brand gradient | 90° | $brand-primary, $accent-primary-60, $accent-secondary-60 |
$gradient-brand |
Decorative
Our decorative gradients provide more intense pops of color. Try not to use more than one gradient on the page.
Primary
The primary gradient is used for decorative purposes only.
| Swatch | Name | Degree | Colors | Sass |
|---|---|---|---|---|
| Primary gradient | 90° | $accent-secondary-60, $action-primary-40 |
$gradient-primary |
Secondary
The secondary gradient is used for decorative purposes only.
| Swatch | Name | Degree | Colors | Sass |
|---|---|---|---|---|
| Secondary gradient | 90° | $accent-primary-60, $action-primary-20 |
$gradient-secondary |
Accent
The accent gradient is used for decorative purposes only.
| Swatch | Name | Degree | Colors | Sass |
|---|---|---|---|---|
| Accent gradient | 90° | $action-primary-60, $accent-primary-60 |
$gradient-accent |
Background
These gradients are used for background colors only.
Subtle
Use with default text.
| Swatch | Name | Degree | Colors | Sass |
|---|---|---|---|---|
| Subtle gradient | 322° | $neutral-100, $neutral-95 |
$gradient-subtle |
Assertive
Use with ghost text.
| Swatch | Name | Degree | Colors | Sass |
|---|---|---|---|---|
| Assertive gradient | 36° | $neutral-00, $action-primary-20 |
$gradient-assertive |
Accent border
Add an accent border to emphasize the container’s importance on the page. Do not overuse the accent border.
| Swatch | Name | Degree | Colors | Sass |
|---|---|---|---|---|
| Accent border | 270° | $action-primary-60, $accent-primary-60 |
@include border-gradient-accent |
Shadows
Shadows are used to add depth between surfaces. Depth can help users understand the priority, relationship, or purpose of a UI element.
Primary
Used only for the Anatomy primary navigation.
| Swatch | Name | Property values | Sass |
|---|---|---|---|
| Primary shadow | 0 0 0.75rem 0 rgba($neutral-00, 0.2) |
$box-shadow-primary |
Secondary
Used for dropdowns.
| Swatch | Name | Property values | Sass |
|---|---|---|---|
| Secondary shadow | 0 0.125rem 1rem 0 rgba($neutral-00, 0.1) |
$box-shadow-secondary |
Tertiary
Used for the wizard navigation component.
| Swatch | Name | Property values | Sass |
|---|---|---|---|
| Tertiary shadow | 0 0.125rem 0.625rem 0 rgba($neutral-00, 0.2) |
$box-shadow-tertiary |
Accessibility best practices
Refer to the Color usage section in Accessibility for color best practices.
Accessible color combinations
There is no way to make a blanket statement on whether or not a color is compliant because it depends on each individual application. Each application of color should be validated against accessibility standards throughout the design process.