Bloom is now Rainbrand

(Brand guidelines) // Developer tools

Vercel brand
guidelines

Vercel’s logo, colors, fonts, voice, and dos and don’ts, from the Brand Skill Rainbrand built from vercel.com.

Download the Brand Skill
Vercel logo in black
  • Black#000000
  • White#FFFFFF
  • Charcoal#171717
  • Off-white#FAFAFA

About Vercel

Vercel is a frontend cloud and developer experience platform for building, deploying, scaling, and securing web applications and AI agents. Its visual language pairs high-contrast, restrained design with clear technical detail and product-focused experiences.

Use the full Vercel logo as the default brand signature. Use the standalone symbol when the full logo cannot fit or when showing a set of brand symbols. Keep the safety area around the primary logo at least the height of its symbol.

Do not alter the Vercel logo or symbol. Use the black and white versions to suit the background.

Vercel colors

  • Black

    Logo and high-contrast accents

    HEX
    RGB

  • White

    Logo on dark and light surfaces

    HEX
    RGB

  • Charcoal

    Primary text on light surfaces

    HEX
    RGB

  • Off-white

    Light website background

    HEX
    RGB

Vercel fonts

  • Geist

    Heading · 400, Body · 400

  • Geist Mono

    Code

Font names only. The Brand Skill download doesn’t include font files.

Vercel’s voice

Write with clear confidence and a developer’s practical focus. Lead with what the product does, then make the benefit or technical detail concrete. Favor direct sentences, specific capabilities, and measurable proof points over abstract claims.

Use technical language when it helps developers understand a feature; explain the outcome in plain terms. Keep product claims specific to the relevant feature, and use concrete numbers or examples where the claim supports them.

  • “Ship apps that scale from zero to millions instantly”

Dos and don’ts

Do

  • Use the full Vercel logo as the default signature; use the symbol where the full mark cannot fit or where a set of symbols is shown. Preserve the symbol-height safety area.
  • Choose high-contrast color and typography treatments that keep the design legible in light or dark contexts.
  • Make product and technical content concrete with real interface detail, code, or clear product-focused visuals.
  • Write directly to developers, state the practical benefit, and support claims with specific details.

Don’t

  • Don’t modify the Vercel logo or symbol.
  • Don’t use the standalone symbol as the default when the full logo fits.
  • Don’t sacrifice contrast or readability for visual effect.
  • Don’t obscure a product message with decorative elements that distract from the interface, code, or technical subject.
  • Don’t use vague, inflated copy in place of specific product benefits or technical detail.

More from the Brand Skill

Visual style

Build a crisp, high-contrast visual experience with restrained color and a technical, product-centered feel. Vercel’s design system emphasizes accessible contrast, grid, and developer-oriented typography.

Use clean layouts that make product value and technical details easy to scan. Present infrastructure, workflows, and product capabilities with precise interface details, code, or purposeful diagrams rather than ornamental clutter. Vercel’s own pages pair product messaging with interface views and code examples.

Support both light and dark presentations where appropriate, choosing the logo treatment and text contrast to remain legible on the selected surface.

Brand imagery

Use Vercel’s own product, platform, and editorial visuals to give creative work a concrete, technical focus. Product imagery can show real interface states, deployment flows, code, or clear representations of infrastructure. Keep the visual hierarchy legible and the subject matter tied to building, shipping, or operating software.

Editorial and people imagery

Use people photography in editorial contexts such as articles, release notes, and contributor features. Keep portraits in their supporting role alongside the headline or story; Vercel’s editorial cards use portraits with article titles, summaries, and author names.

Download Vercel’s Brand Skill

A Brand Skill is a folder of brand guidance written for agents. Give it to Claude, ChatGPT, Cursor or another agent and ask it to follow Vercel’s guidelines. It starts at SKILL.md, which points to the right file for each task.

This copy includes the guidance and logos. It leaves out the reference images and font files.

Download the Brand Skill

vercel-brand-skill/

├ SKILL.md

├ README.md

├ references/

│ ├ voice-and-writing.md

│ ├ dos-and-donts.md

│ ├ colors.md

│ ├ logos.md

│ ├ typography.md

│ ├ visual-style.md

│ └ brand-imagery.md

└ assets/logos/

├ vercel-lockup.svg

├ vercel-lockup-2.svg

├ vercel-icon-2.svg

└ vercel-icon-3.svg

Rainbrand’s Brand Agent built this Brand Skill from vercel.com on 30 Oct 2026. It isn’t Vercel’s official guide. Reviewed by Siddharth Borderwala, Founding Engineer at Rainbrand.

Vercel and its logos are trademarks of Vercel Inc. Rainbrand isn’t affiliated with or endorsed by Vercel Inc.

Make one for
your brand.

Add Rainbrand to your agent and give it your website, brand guide or files. Rainbrand builds a Brand Skill like this one and keeps it up to date.

Get startedRead the docs

  1. Open the Rainbrand plugin and add it.

    Open Rainbrand plugin (opens in a new tab)

  2. Connect your Rainbrand account when asked. It works in ChatGPT and in Codex.

See all brands

Rainbrand builds and maintains shared brand context for your agents and products.

Get startedRead the docs (opens in a new tab)