Toptal Brand Guidelines

The Toptal brand includes the Toptal name, logo, graphics, colors, etc. Follow the guidelines on this page when creating Toptal content or using the Toptal brand for marketing purposes.

Colors

The Toptal color scheme features 5 colors: blue is used for headers, green is used for buttons, white is used in background spaces, and gray and black are used for text.

Main colors

  • Blue
    RGB
    #3863A0
  • Green
    RGB
    #3DBE8B
  • Gray
    RGB
    #A9A9A9
  • White
    RGB
    #FFFFFF
  • Black
    RGB
    #303030

Color policy

Not allowed

  • Do not use slight variations of these colors.
  • Do not use completely different colors.
  • Do not swap color purposes (e.g., no green headers).

Allowed

  • Use these colors for all material on the Toptal.com site.
  • Use these colors for any Toptal flyers, ads, or other company materials.
  • Colors should be used as intended (blue headers, green buttons, etc.).

Typography

We use two fonts: Proxima Nova for headers, sub-headers, and main body texts, and Helvetica Neue, which is used sparingly when a secondary font is called for.

Primary font

Proxima Nova
abcdefghijklmnopqrstuvwxyz1234567890
Page title
55px light
Title
45px regular
Subtitle
18px regular
Note
15px regular italic
Body text
15px regular
Foot notes
13px regular

Get the font

Using Proxima Nova

  • Toptal.com uses both the light and regular versions of the font.
  • Check the graphic to the left for proper usage.
  • Click the button below to visit the font page.

Secondary font

Helvetica Neue
abcdefghijklmnopqrstuvwxyz1234567890
Page title
55px light
Title
45px regular
Subtitle
18px regular
Note
15px regular italic
Body text
15px regular
Foot notes
13px regular

Get the font

Using Helvetica Neue

  • Toptal.com uses both the light and regular versions of the font.
  • Check the graphic to the left for proper usage and remember that it only is to be used as a secondary font.
  • Click the button below to visit the font page.

Toptal font policy

Not allowed

  • Do not use different fonts for pages in the Toptal.com domain.
  • Do not use Helvetica Neue as the primary font.
  • Do not use Helvetica Neue for headers, sub-headers, or main body texts.

Allowed

  • Acquire the fonts using the above links.
  • Use both fonts when creating Toptal pages.
  • Use Helvetica Neue sparingly, primarily for capitalized links.

Toptal name

The Toptal name should always be spelled with only the first “T” capitalized. Note the examples below of correct and incorrect ways to spell Toptal.

Toptal name spelling examples

Correct way to spell Toptal
This is the correct way to spell Toptal.
Incorrect way to spell Toptal - the second T must not be capitalized
The second “T” must not be capitalized.
Incorrect way to spell Toptal - the first T must be capitalized
The first “T” must be capitalized.

Naming rules

  • Correct spelling is mandatory each time the name is used.
  • Use Proxima Nova for the name on Toptal.com, unless it's embedded in Helvetica Neue text.

Toptal name policy

Not allowed

  • Do not use the incorrect spellings of the Toptal name anywhere.
  • Do not use alternate spellings not shown above.

Allowed

  • Use the one correct spelling of the Toptal name in all places.
  • These rules apply to all text. The Toptal logo is distinct.
The Toptal logo consists of the blue text and graphic on a white background. Follow the guidelines below when using the logo for any purpose.

Logo

Get the logo

What will you get?

  • AI version of the logo
  • EPS version of the logo

Logo spacing

Toptal logo spacing guides

Spacing

Rules for spacing

  • The border must be at least 50% of the logo height on all sides.
  • The border must be white space.

Logo policy

Not allowed

  • Do not cut, adjust, rotate, flip, reflect, or manipulate the logo.
  • Do not change the color of the logo.
  • Do not use less than the specified border width.
  • Do not use the logo for non-Toptal material.

Allowed

  • Use the logo to market any Toptal material.
  • Use the logo for both print and web content.
  • Use the 300DPI version of the logo for print.

Watermarking

The watermark is added to any graphics created for Toptal blog posts, events, or other company material. Using the watermarking template is the easiest way to properly watermark Toptal graphics.

Correct watermarking

Correct toptal logo watermarking

Get the watermarking template

What will you get?

  • A Photoshop template
  • A text layer and a logo layer
  • A safety area layer

Incorrect watermarking

Incorrect toptal logo watermarking

Rules for watermarking

  • Use a safety area as specified.
  • Position the watermark in a corner.
  • Use the correct Toptal logo to watermark.

Watermarking policy

Not allowed

  • Do not use modified versions of the watermark.
  • Do not resize the watermark.
  • Do not have parts of the watermark in the safety area.
  • Do not watermark non-Toptal material.

Allowed

  • Watermark all graphics created for Toptal materials.
  • Only watermark one corner of the graphic.
  • Adjust the opacity of the watermark as aesthetically needed.

Business cards

As ambassadors of the Toptal brand, you may use your Toptal business card to refer potential new clients, developers, or anyone interested in the company.

Front

Front side of toptal business card

Get business cards

What will you get?

  • A customized business card containing all relevant contact information
  • Email-friendly file format
You will need to specify your contact information.

Back

Back side of toptal business card

Business card tips

  • Include your business card in emails to new clients/developers.
  • Bring sample business cards to any conference or Toptal event.
  • Only list your Toptal email address on your business card.

Business cards policy

Not allowed

  • Do not list non-Toptal emails or non-personal phone numbers.
  • Do not list personal websites.
  • Do not alter the business card design.

Allowed

  • Use your business cards to develop professional relationships.
  • Use your business cards to grow the Toptal brand.

Roll ups, posters, and stickers

These resources are great to use when representing Toptal at conferences, community events, and more.

Roll ups

Toptal roll up
285 cm x 80 cm
Toptal roll up
285 cm x 80 cm

Get the roll ups

What will you get?

  • Printer-friendly files
  • Both roll up designs are available

Posters

Toptal poster
A3
A4
A5
Toptal poster
A3
A4
A5

Get the posters

What will you get?

  • Printer-friendly files
  • Both posters are available

Stickers

Toptal sticker
5cm
Toptal sticker
5cm
Toptal sticker
5cm

Get the stickers

What will you get?

  • Printer-friendly files
  • All 3 stickers are available

Letter head

Toptal letter cover
Toptal letter inside

Get the letter head

What will you get?

  • Printer-friendly files
  • Front and back letter head templates
You will need to specify your contact information.

Global resources policy

Not allowed

  • Do not cut or adjust any of the resources.
  • Do not add any mark ups to the resources.
  • Do not use the resources for events in which Toptal is not officially involved.

Allowed

  • Use the resources to aid any Toptal presentation or event.
  • Use the resources at conferences to represent Toptal.

T-shirts

Aside from providing superior style and comfort, Toptal T-shirts are a great way to spread the Toptal brand at conferences, Toptal community events, etc.

Toptal T-shirts

Toptal T-shirts

Order a T-shirt

Ordering guidelines

  • T-shirts are for Toptal members only.
  • Contact your Community Leader for T-shirts for events and conferences.
You will need to specify T-shirt size, delivery address, and phone number.

Toptal T-shirt policy

Not allowed

  • Do not deface or alter the design of the T-shirts.

Allowed

  • Bring the T-shirts to your next Toptal community event or conference.
  • Give the T-shirts to friends interested in Toptal.
  • Use the T-shirts to grow the Toptal brand.

Questions? Ask our Design Team!

The Toptal Design Team works hard to make sure all Toptal materials look great and perform well. If you have any questions about proper usage of the Toptal brand, requests for more resources, or anything else, contact the Design Team and let them know.

Contact Design TeamContact Us