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

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.

Vercel imagery

21 images from vercel.com, in one file of the Brand Skill. Each file starts with its guidance, then shows the images it refers to.

Brand imagery

21 images

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.

  • A stark, black equilateral triangle is centered against a dark, textured background, creating a minimalist and atmospheric graphic.
  • A stark, black equilateral triangle is centered against a pitch-black background, framed by a soft white glow emanating from behind its edges.
  • A stark, minimalist graphic featuring a solid black equilateral triangle centered against a deep black background.
  • Bold white text reading '100s of models.
  • A dense, uniform field of monochromatic static or salt-and-pepper noise covers the entire square frame.
  • A stark black equilateral triangle is centered on a solid black background, defined by a soft white glow emanating from behind its upper edges.
  • A stark, minimalist graphic features a solid black equilateral triangle centered against an infinite black background.
  • A black AI chat interface modal sits atop a dark Notion strategy document, featuring a minimalist white hand-drawn face icon and the greeting 'How can I help…
  • A clean screenshot of a white software interface window titled 'New AI chat' with a minimalist 'N' logo in the top left.
  • A dark mode screenshot shows a 'New AI chat' window from Notion overlaying a 'Strategy doc'.
  • A white interface screenshot shows a 'New AI chat' window from Notion, featuring a minimalist face icon and the heading 'How can I help you today?'.
  • A clean, data-heavy dashboard interface displays network security metrics over time.
  • A spectral, three-dimensional letter 'M' rendered in pale blue and white light, casting long, ethereal shadows downward.
  • A minimalist graphic featuring a capital letter 'N' glowing with a cold white neon outline against a solid black background.
  • A minimalist graphic featuring a solid light gray isosceles triangle centered over an expansive white grid.
  • A dark gray, equilateral triangle stands prominently against a background of a thin, black-lined rectangular grid.
  • A clean screenshot of a brand management software interface featuring a dropdown menu against a white background.
  • A dark software interface screenshot displays a centered dropdown menu for 'ACME Pro'.
  • A solid, matte black rectangular graphic with no visible text, subjects, or patterns.
  • A dark, minimalist banner features the large white word 'Ship' next to the number '26' in a rounded square.
  • A minimalist graphic banner features the text "Agentic Infrastructure." in a stark white sans-serif font centered on a solid black background.

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.

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.

It has the guidance, 51 images and the logos. The font files belong to Vercel Inc, so they’re left out.

Download the Brand SkillZIP, 554 KB

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/

├ images/

└ logos/

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
The brand layer for agents

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

Get startedRead the docs (opens in a new tab)