--- title: "Framer brand guidelines: logo, colors and fonts | Rainbrand" description: "Framer’s logo, colors (#0099FF, #0055FF, #000000), fonts (GT Walsheim, Inter), voice, and dos and don’ts, with a Brand Skill for your agents." url: "https://www.rainbrand.com/brand-guidelines/framer/" --- (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](https://www.rainbrand.com/brand-guidelines/framer/framer-brand-skill.zip) ![Framer logo in white](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fframer%2Fframer-wordmark.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) - 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 logo - ![Framer logo in white](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fframer%2Fframer-wordmark.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) Lockup · SVG [Download Framer logo in white](https://www.rainbrand.com/brand-guidelines/framer/framer-wordmark.svg) - ![Framer logo in black](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fframer%2Fframer-wordmark-black.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) Lockup · SVG [Download Framer logo in black](https://www.rainbrand.com/brand-guidelines/framer/framer-wordmark-black.svg) - ![Framer icon in white](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fframer%2Fframer-icon.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) Icon · SVG [Download Framer icon in white](https://www.rainbrand.com/brand-guidelines/framer/framer-icon.svg) 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 #0099FF Copy HEX RGB 0, 153, 255 Copy RGB - Framer Deep Blue Blue alternate HEX #0055FF Copy HEX RGB 0, 85, 255 Copy RGB - Black Dark backgrounds and logo on light backgrounds HEX #000000 Copy HEX RGB 0, 0, 0 Copy RGB - White Text and logo on dark backgrounds HEX #FFFFFF Copy HEX RGB 255, 255, 255 Copy 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](https://www.rainbrand.com/brand-guidelines/framer/framer-brand-skill.zip) 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 started](https://www.rainbrand.com/auth/sign-in) [Read the docs](https://docs.rainbrand.com/mcp/getting-started) ### ChatGPT + Codex 1. Open the Rainbrand plugin and add it. [Open Rainbrand plugin](https://chatgpt.com/plugins/plugin_asdk_app_6ac6e5030ec88191a88001f6dc0628ca) 2. Connect your Rainbrand account when asked. It works in ChatGPT and in Codex. ### Claude 1. Open the Rainbrand connector in Claude and add it. [Open Rainbrand connector](https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=Rainbrand&connectorUrl=https%3A%2F%2Fmcp.rainbrand.com%2Fmcp) 2. Select Connect, then sign in to Rainbrand. You can also install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill) or the [plugin](https://github.com/rainbrandai/rainbrand-skills/releases/latest/download/rainbrand.claude-plugin.zip). ### Claude Code 1. Add Rainbrand's plugin marketplace in your terminal. ``` claude plugin marketplace add rainbrandai/rainbrand-skills ``` 2. Install the Rainbrand plugin, including its Skill and MCP connection. ``` claude plugin install rainbrand@rainbrand ``` 3. Start a new Claude Code session, then use /mcp to sign in to Rainbrand. You can also [connect with MCP](https://docs.rainbrand.com/mcp/getting-started#claude-code-installation-options) or install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill). ### Cursor 1. Add Rainbrand to ~/.cursor/mcp.json. ``` { "mcpServers": { "rainbrand": { "url": "https://mcp.rainbrand.com/mcp" } } } ``` 2. Sign in from the Cursor CLI. ``` agent mcp login rainbrand ``` You can also install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill) or the [plugin](https://github.com/rainbrandai/rainbrand-skills/releases/latest/download/rainbrand.cursor-plugin.zip). ### API 1. Create an API key in your account settings, then list your brands. ``` curl https://www.rainbrand.com/api/v1/brands -H "x-api-key: $RAINBRAND_API_KEY" ``` Integrating Rainbrand into your app? [Read the API docs](https://docs.rainbrand.com/api). ## More brand guidelines [See all brands](https://www.rainbrand.com/brand-guidelines/) - [Figma brand guidelines](https://www.rainbrand.com/brand-guidelines/figma/) Design tools - [Webflow brand guidelines](https://www.rainbrand.com/brand-guidelines/webflow/) Design tools - [Anthropic brand guidelines](https://www.rainbrand.com/brand-guidelines/anthropic/) AI The brand layer for agents. Rainbrand builds and maintains shared brand context for your agents and products. [Get started](https://www.rainbrand.com/auth/sign-in) [Read the docs](https://docs.rainbrand.com/)