Last updated January 31, 2025

Heroku is a Salesforce company and also an independent product and brand.

The Heroku brand name is trademarked, so please handle it with care. We’ve got a few rules to help you get started.

If you have any questions about the Heroku brand, get in touch by emailing brand@heroku.com.

Usage

In general, don’t use the Heroku name, logos, or graphics in ways that can confuse, mislead, or suggest our sponsorship, endorsement, or affiliation.

Names

• The Heroku trademark is a proper adjective. Don’t modify the spelling or structure. For example, don’t use “Heroku’s” or “Heroku-ish.” 
• Don’t use a domain name containing “Heroku” or any similar words. 
• Don’t use “Heroku” as a part of your name or incorporate the Heroku logo into yours. See Logos for logo and logotype files and info. 

Promotional Materials

Contact brand@heroku.com before using the Heroku logo on websites, products, packaging, manuals, or for other commercial or product use.

Linking to Heroku

You can use the Heroku logo or name to link to our site as long as your usage meets the guidelines on this webpage. For text links, capitalize “Heroku” and use “heroku.com” when referring to our URL. 

Merchandise and Swag

While we do produce t-shirts and other items with the Heroku logo and artwork, we don’t generally allow third parties to make, sell, or give away anything with our name or logo on it.

Education and Instructional

You can use Heroku branded materials for educational and instructional purposes. Remember that they must not confuse, mislead, or suggest our sponsorship.

Logos

Download the full logo kit to see all the options.

Style Options

Primary Logo - Horizontal

The horizontal version of the primary logo should be your first choice and should be used whenever possible. However, when the space is too small and misses minimum requirements, move over to our vertically stacked version. 

Secondary Logo - Vertical

The vertical of the primary logo should only be used when the minimum space of the primary horizontal logo is exceeded.

Mark

The mark should only be used in context where the Heroku or Salesforce brand is obvious. For instance, the avatar on social media or the Salesforce product dial. 

Clear Space

The ideal clear space is equal to the mark on each side. Reference this diagram when placing the primary logo, secondary logo, and mark within compositions. 

Logo Misuse Examples

Heroku encourages creative application development, not creative use of lens flare.

Placing any graphic or logo can prove challenging in some layouts or designs. If you encounter any instances of misuse, contact brand@heroku.com.

Our logo should be applied consistently to promote brand awareness.

• Don’t skew our logo or place it at an angle 
• Don’t use background colors that obscure or reduce legibility for the mark, logotype, or full lockup 
• Don’t mask or layer anything on top of the logo or change the color of the mark 
• Don’t change the placement or scale of the Salesforce lockup 

Color

Our brand colors span from warm to cool, vibrant to deep, reflecting the rich environments where our developers work their magic. There are separate palettes for digital and print. 

Digital (Screens)

When designing in a digital space, only use hues designated for digital use (HEX or RBG). The Digital Primary palette consists of Purple and Cloud Blue. These colors may be used in all digital applications.

Primary Heroku Colors

• Heroku Purple Purple - 30 HEX: #5A1BA9 RGB: 90 27 169
• Dark Purple Purple - 15 HEX: #300b60 RGB: 48 11 96
• Light Purple Purple - 80 HEX: #D7BFF2 RGB: 215 191 242
• Salesforce Blue HEX: #0176D3 RGB: 1 118 211

Purple

• Purple - 95 HEX: #F6F2FB RGB: 246 242 251
• Purple - 90 HEX: #ECE1F9 RGB: 236 225 249
• Purple - 80 HEX: #D7BFF2 RGB: 215 191 242
• Purple - 70 HEX: #C29EF1 RGB: 194 158 241
• Purple - 65 HEX: #B78DEF RGB: 183 141 239
• Purple - 60 HEX: #AD7BEE RGB: 173 123 238
• Purple - 50 HEX: #9050E9 RGB: 144 80 233
• Purple - 40 HEX: #7526E3 RGB: 117 38 227
• Purple - 30 HEX: #5A1BA9 RGB: 90 27 169
• Purple - 20 HEX: #401075 RGB: 64 16 117
• Purple - 15 HEX: #300b60 RGB: 48 11 96
• Purple - 10 HEX: #240643 RGB: 36 6 67

Cloud Blue

• Cloud Blue - 95 HEX: #EAF5FE RGB: 234 245 254
• Cloud Blue - 90 HEX: #CFE9FE RGB: 207 233 254
• Cloud Blue - 80 HEX: #90D0FE RGB: 144 208 254
• Cloud Blue - 70 HEX: #1AB9FF RGB: 26 185 255
• Cloud Blue - 65 HEX: #08ABED RGB: 8 171 237
• Cloud Blue - 60 HEX: #0D9DDA RGB: 13 157 218
• Cloud Blue - 50 HEX: #107CAD RGB: 16 124 173
• Cloud Blue - 40 HEX: #05628A RGB: 5 98 138
• Cloud Blue - 30 HEX: #084968 RGB: 8 73 104
• Cloud Blue - 20 HEX: #023248 RGB: 2 50 72
• Cloud Blue - 15 HEX: #0A2636 RGB: 10 38 54
• Cloud Blue - 10 HEX: #001A28 RGB: 0 26 40

“White”

Although white doesn’t appear as its own color lane, it is part of our color palette and given the numerical value “White - 100.” 

Print (Ink)

Print Palette

The Print Primary palette consists of Purple and Cloud Blue. These colors may be used in all print applications. If you are designing for print or physical media, only use hues designated for print (CMYK or PMS). Colors from digital and print palettes may not be merged or swapped. 

Purple

Cloud Blue

Color Accessibility

When pairing colors, the numerical value must be 50 points away to ensure AA+ accessibility. 

Gradients (Background)

Designs can be composed with a background gradient paired with a subtle glow effect.

Dos - Gradients should appear as a subtle background element  - Feature two colors in a gradient per design - Make gradient direction decisions based on canvas orientation, visual hierarchy, and balance  - Ensure that any gradients enhance readability and visibility

Don’ts  - Don’t overuse gradients and overwhelm the design - Don’t use intense colors that detract from the design or cause accessibility issues - Don’t use harsh color breaks and break up smooth transitions of color - Don’t use gradients in type - Don’t use circular gradients as backgrounds

For the background, it’s recommended to use linear gradients that transition from 100% Purple 15 to 100% Purple 30. The gradient can be positioned horizontally, vertically, or at an angle—whatever best suits your design.

To enhance your elements and draw focus, you can also add a glow effect by placing a radial gradient that fades from 50% to 0% transparency on top of the background.

Type

We have two fonts that we use for all digital and print use cases. For headlines, we use the classic, friendly, Avant Garde typeface. In body copy, we use Salesforce Sans. 

Next Generation

Avant Garde

We use Avant Garde for Salesforce and Demi Weight. The geometric sans serif is great for display purposes, and its circular nature is rich with personality.

Primary Use: Headlines

Salesforce Sans

A custom font designed for long-form messaging. We use Salesforce Sans, Regular, for all body copy and captions.

Primary Use: Body

Type Stack

Maintain a clear hierarchy using headline and body font in the correct order. It is important to avoid pairing type styles that are too similar in size. 

Contact

If you have any questions about the Heroku brand, get in touch by emailing brand@heroku.com.