Bloom is now Rainbrand

(Brand guidelines) // Design tools

Framer brand
guidelines

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

Download the Brand Skill
Framer logo in white
  • Framer Blue#0099FF
  • Framer Deep Blue#0055FF
  • Black#000000
  • White#FFFFFF

About Framer

Framer is a professional website-building platform where AI agents, a freeform design canvas, CMS, hosting, analytics, and SEO tools work together. Its core promise is fast, polished website creation with every design kept editable and under the creator’s control.

Framer has a standalone icon and a wordmark, which sets the icon beside the word Framer. Use the official artwork in black or white rather than redrawing, recoloring, or recreating either mark. Keep the logo in its original proportions, upright and undistorted, and place it on a background with clear contrast. Never outline, rotate, skew, recolor, or change the typeface of the logo. Do not make custom logo combinations, connect the wordmark to other words, or use the icon as a letter in the wordmark.

In partnerships, pair wordmarks with wordmarks and icons with icons, size them evenly, and give both marks plenty of clear space.

Framer colors

  • Framer Blue

    Primary accent

    HEX
    RGB

  • Framer Deep Blue

    Blue alternate

    HEX
    RGB

  • Black

    Dark backgrounds and logo on light backgrounds

    HEX
    RGB

  • White

    Text and logo on dark backgrounds

    HEX
    RGB

Framer fonts

  • GT Walsheim

    Headings · 500

  • Inter

    Body and subheadings · 400

  • Input Mono

    Code and agent output · 400

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

Framer’s voice

Framer writes with confident clarity, practical momentum, and a designer’s attention to craft. Lead with what people can make or accomplish, explain the benefit in plain language, and use concrete product details when they add clarity. Keep sentences direct and energetic without hype or filler.

Use natural, outcome-led language such as “Everything stays editable” and “The agent responds to feedback in real time,” with the occasional wink, as in “Not just vibes, a full platform.”

For technical topics, balance accessible language with precise details. Framer explains product capabilities in plain terms, then uses specifics, such as responsive breakpoints, CMS content, or performance metrics, to make the benefit tangible.

  • “The website builder for shipping standout sites”
  • “Everything stays editable”
  • “Not just vibes, a full platform”
  • “The agent responds to feedback in real time”

Dos and don’ts

Do

  • Use the official Framer icon or wordmark artwork in black or white and preserve strong contrast.
  • Keep layouts and content easy to scan; pair clear headings with concise supporting copy.
  • Emphasize creative control: AI helps generate and refine, while the work remains editable on the canvas.
  • Describe benefits with specific, plain-language outcomes, such as “Everything stays editable.”

Don’t

  • Don’t distort, rotate, skew, outline, or apply color to Framer’s marks.
  • Don’t replace the wordmark’s typeface, invent logo combinations, or use the icon as a letter in the wordmark.
  • Don’t place the logo on a low-contrast background.
  • Don’t present AI-generated work as locked or final; Framer’s design direction keeps the creator in control.
  • Don’t rely on vague claims or repetitive filler when a concrete product benefit can be stated directly.

More from the Brand Skill

Imagery brand visuals

Use Framer’s official brand visuals for brand-led communications and product promotion. Official product photography and visual assets show Framer’s design canvas, CMS, analytics, and agent workflows in use.

Framer’s performance and hosting pages also use crafted technical illustrations and diagrams to make infrastructure and product capabilities visible.

Imagery product interface

Preserve Framer’s own product screens when showing the product. Its interface imagery makes the canvas, agent, CMS, SEO, analytics, hosting, and collaboration workflows tangible. Use Framer product captures to demonstrate real editable work, not as decorative substitutes for the product experience.

Download Framer’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 Framer’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

framer-brand-skill/

├ SKILL.md

├ README.md

├ references/

│ ├ voice.md

│ ├ dos-and-donts.md

│ ├ colors.md

│ ├ logo.md

│ ├ typography.md

│ ├ imagery-brand-visuals.md

│ └ imagery-product-interface.md

└ assets/logos/

├ framer-wordmark.svg

├ framer-wordmark-black.svg

└ framer-icon.svg

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

Framer and its logos are trademarks of Framer B.V. Rainbrand isn’t affiliated with or endorsed by Framer B.V.

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)