--- title: "Webflow brand guidelines: logo, colors and fonts | Rainbrand" description: "Webflow’s logo, colors (#146EF5, #080808, #FFFFFF), fonts (WF Visual Sans, WF Visual Sans Text), voice, and dos and don’ts, with a Brand Skill for your agents." url: "https://www.rainbrand.com/brand-guidelines/webflow/" --- (Brand guidelines) // Design tools # Webflow brand guidelines Webflow’s logo, colors, fonts, voice, and dos and don’ts, from the Brand Skill Rainbrand built from webflow.com. [Download the Brand Skill](https://www.rainbrand.com/brand-guidelines/webflow/webflow-brand-skill.zip) ![Webflow logo in blue and black](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fwebflow%2Fwebflow-logo.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) - Blue #146EF5 - Black #080808 - White #FFFFFF - Purple #7A3DFF ## About Webflow Webflow is a visual development and marketing platform for building, managing, and growing websites. Its brand combines creative freedom with practical control: empower teams to make distinctive digital experiences, keep them on-brand as they scale, and connect good design to business results. ## Webflow logo - ![Webflow logo in blue and black](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fwebflow%2Fwebflow-logo.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) Lockup · SVG [Download Webflow logo in blue and black](https://www.rainbrand.com/brand-guidelines/webflow/webflow-logo.svg) - ![Webflow logo in blue and white](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fwebflow%2Fwebflow-logo-white.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) Lockup · SVG [Download Webflow logo in blue and white](https://www.rainbrand.com/brand-guidelines/webflow/webflow-logo-white.svg) - ![Webflow W mark in blue](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fwebflow%2Fwebflow-icon.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) Icon · SVG [Download Webflow W mark in blue](https://www.rainbrand.com/brand-guidelines/webflow/webflow-icon.svg) The Webflow mark is a W made of three separate shapes, standing for the three languages of the web: HTML, CSS and JavaScript. Use the full logo, with the blue mark and a black or white wordmark, whenever possible, and switch to the black or white logo or the mark alone only when a background color or pattern would interfere with it. Give the logo clear space equal to the height of the W on every side. Keep the mark and wordmark aligned on one line, never stacked, and don’t place the default logo on a color. ## Webflow colors - Blue Signature brand color, a nod to the hyperlink HEX #146EF5 Copy HEX RGB 20, 110, 245 Copy RGB - Black Text and wordmark on light backgrounds HEX #080808 Copy HEX RGB 8, 8, 8 Copy RGB - White Backgrounds and wordmark on dark backgrounds HEX #FFFFFF Copy HEX RGB 255, 255, 255 Copy RGB - Purple Secondary accent, one per asset HEX #7A3DFF Copy HEX RGB 122, 61, 255 Copy RGB - Pink Secondary accent, one per asset HEX #ED52CB Copy HEX RGB 237, 82, 203 Copy RGB - Red Secondary accent, one per asset HEX #EE1D36 Copy HEX RGB 238, 29, 54 Copy RGB - Orange Secondary accent, one per asset HEX #FF6B00 Copy HEX RGB 255, 107, 0 Copy RGB - Green Secondary accent, one per asset HEX #00D722 Copy HEX RGB 0, 215, 34 Copy RGB - Yellow Secondary accent, one per asset HEX #FFAE13 Copy HEX RGB 255, 174, 19 Copy RGB ## Webflow fonts - WF Visual Sans Headings · 600, Eyebrows and captions · 500 - WF Visual Sans Text Body · 400 Font names only. The Brand Skill download doesn’t include font files. ## Webflow’s voice Webflow’s voice is confident, energetic, and enabling. It speaks directly to creative and marketing teams, pairing ambition with practical benefits and framing technology as a way to give people more room to create. Use short, active headlines and plain, conversational explanations. Make the benefit clear, then support it with a concrete capability or result. Favor language that connects craft, speed, team autonomy, brand integrity, and measurable impact. - “Build for what’s next” - “Creativity without constraints” - “Build exactly what you want” - “Less busywork, more brand-building” - “The distance between idea and impact should be as short as possible” ## Dos and don’ts ### Do - Give creative teams room to make bold, distinctive work while preserving a clear, consistent brand system. - Write in direct, active language and explain what a feature lets people accomplish. - Connect design and publishing capabilities to practical results such as speed, autonomy, conversion, or growth. - Lead with blue, black, and white for big brand moments, and add only one secondary color to any asset. - Set headlines in WF Visual Sans Semibold and paragraphs in WF Visual Sans Text, in sentence case. ### Don’t - Don’t let bold visual ideas undermine brand consistency or the clarity of the experience. - Don’t present technical features without showing why they matter to the people using the product. - Don’t stack the logo vertically, drop the mark from it, or add gradients or effects. - Don’t use colors for text, create gradients, or mix several colors in one illustration. - Don’t overdo jargon or bold claims; back up big statements by showing the product. ## More from the Brand Skill ### Accessibility Design for accessible, responsive experiences. Use semantic HTML structure, appropriate heading order, useful alt text for informative images, readable contrast, and relative units for typography that adapts across viewports. Use keyboard- and screen-reader-accessible elements, and provide reduced-motion alternatives for animated experiences. Webflow’s accessibility guidance treats the site builder’s choices as consequential: accessible elements and audit tools can help, but the finished experience still needs deliberate design and review. ### Brand imagery identity Use the Webflow identity artwork for brand recognition. ### Product positioning Describe Webflow as a visual-first platform for designing and building websites, managing content, and publishing and growing digital experiences. Its differentiator is a visual canvas with the power of code: teams can shape custom layouts and interactions while producing working sites, rather than only static mockups. Emphasize the connection between creative autonomy and reliable execution. Webflow helps designers realize ambitious ideas, marketers publish and iterate without routine developer handoffs, and teams maintain brand consistency through reusable components, classes, variables, and shared libraries. When the task concerns enterprise audiences, focus on scale with control: governance, permissions, publishing workflows, security, collaboration, and managed hosting support teams as they create and maintain digital experiences across an organization. Keep enterprise-specific statements scoped to enterprise work. For product messaging, connect capabilities to outcomes instead of presenting a bare feature list. Webflow’s own copy links design and publishing speed to on-brand experiences, and links analytics and optimization to conversion and growth. ### Brand imagery marketing Webflow’s marketing imagery spans editorial artwork, product and feature campaigns, company storytelling, and brand-led promotional compositions. Draw on that range for Webflow’s own communications; customer sites, customer marks, and partner identities are not Webflow identity artwork. ### Brand imagery product ui Preserve the Webflow product experience in product-focused creative work. Product screenshots and interface illustrations are useful references for how the visual canvas, CMS, hosting, security, analytics, interactions, and other features are shown. ## Download Webflow’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 Webflow’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/webflow/webflow-brand-skill.zip) webflow-brand-skill/ ├ SKILL.md ├ README.md ├ references/ │ ├ accessibility.md │ ├ dos-and-donts.md │ ├ colors.md │ ├ typography.md │ ├ brand-imagery-identity.md │ ├ logo.md │ ├ product-positioning.md │ ├ voice-and-messaging.md │ ├ brand-imagery-marketing.md │ └ brand-imagery-product-ui.md └ assets/logos/ ├ webflow-logo.svg ├ webflow-logo-white.svg └ webflow-icon.svg Rainbrand’s Brand Agent built this Brand Skill from webflow.com on 30 Oct 2026. It isn’t Webflow’s official guide. Reviewed by Siddharth Borderwala, Founding Engineer at Rainbrand. Webflow and its logos are trademarks of Webflow, Inc. Rainbrand isn’t affiliated with or endorsed by Webflow, 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 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 - [Framer brand guidelines](https://www.rainbrand.com/brand-guidelines/framer/) 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/)