What can we help you with?

See a problem with the code? Need a new component? Have feedback? We'd love to hear it all! The success of the Bluemix Design System relies on great people like yourself. Fill out the form below to submit your issue to our GitHub repo.

A member of the Bluemix Design System's team will be in touch within 48 hours.

Please describe your issue in depth, with as much clarity, detail, and imagery as necessary.

  • Write
  • Preview
  • A A
Close Icon

Thank you!

Your issue, , is now in the bluemix-components repo. Click the issue number to track the progress or make edits to your issue.

We will get back to you within 48 hours. Feel free to reach out to us on one of our slack channels if you have additional questions:

#bluemix-components
#bluemix-design-system

Brand is the unified experience the Bluemix identity and purpose. It is more than what Bluemix looks like, it is who we are. Brand is how Bluemix users perceive it and what it feels like when they interact with the product.

Bluemix logo



The Bluemix logo is the most prominent visual element associated with our identity. The logo is a combination of the icon and wordmark. We are proud of our logo and recommend the following guidelines on this page.

Bluemix logo assets

Wordmark

When using the workmark as a stand alone element, "IBM" should always be typeset in Helvetica Neue Light and "Bluemix" should always be typeset in Helvetica Neue Bold.

Wordmark Color On:

Dark Background

White, #ffffff

Light Background

Blue 80, #1d3649

Icon

The Bluemix icon may be used on its own in cases where the Bluemix brand has already been established. Use the primary version when possible. However, use one of the following alternative icons if there are technical restraints:

Primary icon

Light background

Primary icon

Dark background

Decorative icon

Light background

Decorative icon

Dark background

One-color solid

Light background

One-color solid

Dark background

Logo usage

Exclusion zone

No content is allowed in the exclusion zone. Note that the icon and wordmark are associated together. The exclusion zone is equal to the height of the “B” in the wordmark shown above as the magenta border around the logo.

Space between icon and wordmark

The space between the icon and wordmark is determined by the trajectory of the outer angles of the right edges of top and bottom hexagons. It is demonstrated in the above image by the dotted lines that make an "X".

Minimum sizing

ICON TYPE

MINIMUM SIZE

Primary Icon

24px

Decorative Icon

72px

One-color Solid

24px

Logo misusage

In order to maintain consistency, the logo should never be modified, transformed or reinterpreted. Below are examples of what not to do:

Do not use the old wordmark with a capital "M".

Do not change the general appearance of the logo (no drop-shadows, feather, glow or other effects).

Do not change the wordmark typeface or font weight.

Do not skew or disproportionally scale the logo.

Do not change the size relationship of the icon and wordmark.

Do not invert the positioning of the icon and wordmark.

Do not use any other colors in the logo or icon other than the ones defined.

Do not place the logo on busy backgrounds that make it hard to distinguish.

Bluemix brand colors

Primary Bluemix brand colors are IBM Design Blue 30, Blue 80 and Teal 30. These colors directly correlate with the Bluemix identity. While we have other colors in our broader UI and communication palette, these three colors should be the most prominent outward-facing brand colors.

IBM Blue 30

#5aaafa

RGB 90 170 250

IBM Blue 80

#1d3649

RGB 29 54 73

IBM Teal 30

#41d6c3

RGB 65 214 195

Best practices:

  • Use color with purpose.
  • Use color, spacing, and sizing to create hierarchy and focus.
  • If a brand color does not establish proper page hierarchy, evaluate all the visual elements (size, padding, spacing) before selecting a non-brand color.
  • Use contrast to influence the legibility of a design.
  • Understand visual deficiencies such as low vision and color blindness.
  • Avoid eye strain (such as incompatible color combinations).
  • Accommodate for visual deficiencies such as low vision and color blindness.
  • Understand color associations across cultures.

Bluemix brand fonts

Helvetica Neue is the official Bluemix font as well as one of the official fonts of the greater IBM Brand. Helvetica Neue should be used whenever possible.

Helvetica Neue Bold


Helvetica Neue Roman


Helvetica Neue Light

Parent brands

Bluemix falls under two parent brands, IBM Cloud and IBM Design. IBM Cloud is the product and business ecosystem in which Blumeix lives. IBM Design is the greater design language and practices we use to design and develop Bluemix.

Thank You

Thank you for respecting and correctly using the Bluemix brand. If you have any questions or feedback, please contact the Carbon Design System team through our GitHub repo.