Bloom is now Rainbrand

(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

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.

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
    RGB

  • Black

    Text and wordmark on light backgrounds

    HEX
    RGB

  • White

    Backgrounds and wordmark on dark backgrounds

    HEX
    RGB

  • Purple

    Secondary accent, one per asset

    HEX
    RGB

  • Pink

    Secondary accent, one per asset

    HEX
    RGB

  • Red

    Secondary accent, one per asset

    HEX
    RGB

  • Orange

    Secondary accent, one per asset

    HEX
    RGB

  • Green

    Secondary accent, one per asset

    HEX
    RGB

  • Yellow

    Secondary accent, one per asset

    HEX
    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.

Webflow imagery

381 images from webflow.com, in 3 files of the Brand Skill. Each file starts with its guidance, then shows the images it refers to.

Brand imagery identity

9 images

Use the Webflow identity artwork for brand recognition.

  • A panoramic digital graphic featuring glowing electric blue neon outlines against a dark, near-black background.
  • The Webflow logo and wordmark are centered against a dark background, surrounded by floating UI elements that showcase its web design interface.
  • A digital graphic showcasing the Webflow platform interface via overlapping UI modules against a dark background.
  • A fine, high-density layer of white stipple or noise creates a subtle textured overlay.
  • A software interface shows a website editor being used to design a 'Hero Block' section featuring a mother and daughter laughing in a bright home office.
  • A screenshot of a web design interface displays a hero section for a brand named Arise.
  • A digital graphic showcasing Webflow Templates against a clean white background with a subtle blue and yellow gradient.
  • A central black rectangle with the white text "Webflow Blog" is surrounded by a vibrant collage of geometric abstract patterns.
  • A digital graphic featuring sharp, glowing blue neon lines that cut across a deep navy blue background.

Brand imagery marketing

72 images

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.

  • A digital showcase featuring three overlapping web layout screens for 'Framer' and 'ARVY' ecommerce templates.
  • A minimalist graphic features a large, tilted 3D rectangular prism rendered in flat colors with grain texture on a black background.
  • A dark-themed software UI screenshot features a large, rounded white dialogue box overlaid centrally, displaying the typed question: 'Which CMS platforms…
  • A dark navy blue shield icon with a white checkmark sits at the center of a vibrant cobalt blue background.
  • A vibrant green graphic design featuring several black and white user interface elements and the bold white text GSAP in the bottom left.
  • A bold graphic illustration features concentric arcs radiating from the left edge across a vibrant yellow field.
  • A bold graphic header features the text 'Updates' and 'Webflow MCP' in a clean, white sans-serif font against a solid black background.
  • A screenshot displays a web design interface where a bold serif headline reading "Get a free audit" is being actively edited within a blue selection box.
  • A flat, stylized graphic of a data dashboard displays several black modules against a vibrant blue background.
  • A vibrant digital collage on a red background showcases a creative workflow for a brand called Dialed.
  • A bold graphic for 'Webflow MCP' 'Updates' is centered in white on a black background, featuring a stylized maze-like icon.
  • A minimalist graphic features a large, bright blue globe rendered with thin black longitude and latitude lines against a matching blue background.
  • A vibrant lime green graphic features a central black line oscillating like a soundwave or frequency signal, surrounding a white four-pointed star.
  • A minimalist graphic composition featuring a grid of bold, black right-angled triangles pointing toward the right on a sky-blue background.
  • A high-contrast vector graphic depicts stylized UI design elements in vibrant blue and black, viewed at a dynamic angle.
  • This screenshot showcases a dark-themed 'Add' panel within a software design interface, featuring a vertically stacked menu of 'Elements' like Section,…
  • A dynamic long-exposure photo captures a woman in motion through a bright, sunlit office, her form blurred with streaks of light trailing behind her.
  • A screenshot displays a dark-themed user interface menu for design system variables labeled Name and Base mode.
  • A Black woman with long braids and a white man with a beard and glasses collaborate over a silver HP laptop in a bright, modern office.
  • An open laptop on a wooden desk displays the ABM company website, featuring the headline "Discover our deep expertise in your industry." Beside the silver…
  • A heavily motion-blurred photo captures several people working at computer terminals in a brightly lit, modern office space.
  • A split-screen graphic compares two website design options, with a dark 'Strongest Variations' data table floating in the center.
  • A screenshot of a digital design tool interface features a dark grey panel titled Layout with various CSS properties like Flex, Direction, and Spacing.
  • A tan marketing graphic titled 'GIANTS' features a collage of photos showcasing diverse professionals engaging in mentoring sessions within modern office…
  • A website hero section for Bevel features an iPhone and a smartwatch displaying health metrics against a soft, airy sky background with a subtle rainbow arc.
  • A sleek Dyson vertical product shot of a 'camerajet' device that resembles an electric toothbrush with a copper-toned collar and a beige handle.
  • A screenshot of the commercetools homepage featuring a smiling woman with dark curly hair holding a smartphone, surrounded by floating UI cards displaying a…
  • A Business Insider web page features the bold headline 'Business journalism doesn’t have to be boring.
  • Large, bold black typography dominates this minimalist website screenshot, reading 'From bold brands to everyday teams, we work with people, products and…
  • A sleek, white industrial Acova analyzer sits front-and-center in this website screenshot, accompanied by a small pile of grain kernels.
  • A minimalist web interface features bold black sans-serif typography reading 'the Pulse of Electronic Music' arranged across a rigid thin-line grid with…
  • A high-contrast website screenshot for Agiloft features a bold serif headline on a black background reading, "Turn Contracts Into Business Intelligence With…
  • This screenshot of the Wispr Flow Dictation landing page features the bold serif headline, "Don't type, just speak," on a cream-colored background.
  • A minimalist website layout features large, black sans-serif typography reading 'Pulse of Electronic Music' interspersed with solid black circles on a…
  • A marching band with a Pearl bass drum stands before a large, wheat-pasted mural on a grey brick wall that features the blue and black typography of Webflow…
  • A cheerful woman with dark hair and a hearing aid smiles broadly while talking to a blonde woman in a pink striped shirt.
  • A vertical abstract graphic displays a textured, vibrant orange surface.
  • A vertical abstract graphic featuring a vibrant lime green palette with a heavy, sand-like noise texture.
  • A vertical digital graphic featuring a deep violet-to-black gradient with a heavy grain texture.
  • A woman with a shoulder-length bob hairstyle laughs joyfully on stage while holding a handheld microphone and a smartphone.
  • Two men stand side-by-side in a medium shot, both wearing matching black and white varsity jackets featuring a stylized blue 'W' logo.
  • A medium-wide shot captures two men presenting on a dimly lit stage against deep purple velvet curtains.
  • A digital graphic showcasing a Google Lighthouse performance score of '97 / 100' centered within a glowing green circular progress bar.
  • A dark, sleek dashboard graphic features a horizontal bright green neon line that glows against a black background.
  • A dark performance dashboard graphic features a large white "42" at its center, with the text "ms globally" directly beneath it.
  • A glowing green radar display dominates this digital graphic, featuring concentric circles and a bright sweeping beam against a dark, textured background.
  • A vibrant blue checkmark is centered within a two-layered badge graphic.
  • A minimalist line-art graphic of a rocket ship oriented diagonally upward toward the right.
  • A vertical product card features a light orange, kraft-style resealable coffee bag standing against a soft gray background.
  • A vibrant yellow all-terrain sneaker is centered on a solid mustard yellow background, featuring a chunky black and red lugged sole.
  • A vibrant orange rectangular ticket graphic with a thin dark orange border.
  • A vertical product graphic features a patchwork-quilt style lounge chair centered against a light gray field.
  • A minimalist graphic icon featuring two nested heart outlines.
  • A minimalist, high-contrast cloud upload icon set within a thin white circular border.
  • A minimalist graphic of a dual-layered shield icon featuring a vibrant blue inner shield nested inside a light gray outer border.
  • A minimalist graphic icon featuring three overlapping rectangular frames with rounded corners, stacked diagonally from top-left to bottom-right.
  • A minimalist graphic icon featuring a nested geometric composition.
  • A flat minimalist graphic depicts a back-and-forth digital conversation through stacked white speech bubbles against a vibrant orange background.
  • An abstract digital graphic featuring a grid of rounded squares in various shades of purple set against a solid black background.
  • A vibrant magenta abstract graphic is dominated by a playful arrangement of geometric shapes.
  • A close-up screenshot of a video editing or animation software interface features a dark mode timeline.
  • A man with a beard and glasses is viewed from behind as he sits at a desk working on dual computer monitors.
  • A software screenshot features a dark-themed 'Choose an action' pop-up menu overlaid on a purple and black background.
  • A man with a dark beard and glasses is seen in a side profile, intensely focused on a glowing laptop screen late at night.
  • A dark mode user interface menu titled 'Media' displays six square asset category buttons in a three-by-two grid.
  • A screenshot of a software design interface featuring a large, iridescent 3D metallic ribbon curling across a dark background.
  • A digital graphic for the 'New York City Executive Summit' presented by DataSummit, featuring bold black typography over a pale lilac background with rounded…
  • This screenshot shows a web design interface for a Dropbox Sign landing page featuring the bold headline, "Get contracts signed 80% faster." The layout is…
  • A bold, black typographic logo for 'DIGIDAY' features heavy, blocky capital letters.
  • A minimalist, flat black logo for CNBC featuring bold, sans-serif lettering.
  • The word "Bloomberg" is displayed in a bold, black sans-serif font.
  • A wide, horizontal graphic banner featuring a repeating pattern of bold, slanted geometric blocks in shades of white and light gray.

Brand imagery product ui

300 images

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.

  • A screenshot of a professional website design interface features the bold, black title 'Forma' at the top.
  • A close-up software screenshot shows a web design interface overlaying a high-contrast white background with massive black typography reading 'orma'.
  • A website interface mockup for NOVA titled "Climate Resilience" features a large header banner with a lush close-up photo of green palm fronds.
  • A screenshot of a CMS design interface features a floating 'Collection list settings' modal overlaid on a webpage mockup with a blurred green natural…
  • A digital graphic showcasing user engagement data overlaid on a dark web testimonial section.
  • A dark dashboard overlay with conversion statistics floats above a web design interface for 'TrailHive.' The analytics bar highlights a '3.4% Lift' and '4.6%…
  • A soft, vertical gradient transitions from a hazy white at the top and bottom into a central band of muted lavender.
  • A screenshot of the Webflow design interface shows the landing page for copy.ai being edited, featuring the headline 'The First AI-Native GTM Platform'.
  • A digital screenshot of the Copy.ai homepage embedded within a content management system interface.
  • Four diverse headshots are presented in circular frames arranged horizontally against a blue dot-grid pattern.
  • A close-up horizontal digital graphic features a smiling East Asian woman in a beige shirt alongside two blurred colleagues in a bright office.
  • A close-up screenshot of a digital data table on a dark charcoal background, featuring columns for 'Visibility score' and 'Citation rate'.
  • A dark-themed software UI collage showcasing an AI tool for generating image alt text.
  • A collaborative software workspace UI displays the headline 'OPTIMIZE YOUR SITE FOR METRICS THAT MATTER THE MOST' over a mint green gradient.
  • A close-up website mockup features a smiling woman with dark hair in a white shirt collaborating with others against a bright, airy background.
  • A screenshot of a web design interface features a bold 'Flim' logo and a layout of monochrome cinematic stills on a gridded canvas.
  • A screenshot captures a dark-themed web design interface floating over a bright green grid background.
  • A screenshot of a professional web design interface featuring a dark sidebar and editing panels.
  • A screenshot of a digital design platform interface showing a website editing view focused on a vivid green Veo sports camera banner.
  • A website interface mock-up features bold typography that reads "People First production partners" on a cream background.
  • A wide-format software screenshot of a dark-themed design interface overlaying a webpage layout with large black serif text reading 'people first'.
  • A UI element screenshot featuring a white input card with rounded corners.
  • A software interface screenshot shows two dark pricing tier cards overlaying a moody, dark landscape background.
  • A close-up UI screenshot of an animation timeline on a dark gray background, featuring a blue playhead line topped with a circular handle.
  • A close-up UI screenshot of a dark-themed video or animation timeline editor set against a vibrant purple and violet gradient background.
  • A digital interface snippet on a dark charcoal background displays project statistics in white text.
  • A minimalist white graphic of a four-pointed star, formed by four separate curved lines, sits centered on a deep purple and black gradient background.
  • A close-up UI screenshot showcases a web design interface for 'FLYGO' overlaid on a textured tan background.
  • A graphic screenshot displays a purple and black event landing page for the 'New York City Executive Summit.' The design features a photo of the Manhattan…
  • A close-up UI screenshot showcases a web design interface building a page for 'DataSummit'.
  • A minimalist graphic against a dark charcoal background illustrates a connection between two platforms.
  • A white user interface dashboard is layered over a dark mode code editor displaying TypeScript code and a file structure.
  • A software interface screenshot displays a website builder for 'CATALYST Chronicles' featuring vibrant, illustrative graphics of people in yellow jackets.
  • A digital interface mockup displays a website builder for 'TrailHive' layered with a dark analytics pop-up.
  • A digital mockup of a 'Custom Audio Player Base' features a vibrant, grainy user interface with a vertical gradient background shifting from orange to teal.
  • A software interface graphic features a dark 'Code' window overlaying a 'Custom Audio Player' component against a dark background.
  • A horizontal digital interface screenshot shows a website design tool with the text "people first" layered over a woman's portrait.
  • A digital layout mockup for CoLabSpaces features a vibrant red-filtered photo of a modern coworking lounge with communal tables.
  • A software interface screenshot for 'CoLabSpaces' shows a website builder overlaying a bright, blurred office background.
  • A digital graphic featuring the bold blue number "42" centered within a thin, glowing blue ring that fades into a soft gray shadow.
  • A software interface screenshot displays a dark-themed website builder with a bold header reading 'Branding, Website & AI Visibility.
  • A screenshot of a website homepage titled 'SALESPRO' features a bold blue hero section with the heading 'GUIDEING BUSINESSES FORWARD.' To the right, a…
  • A close-up software screenshot of a website editor interface, titled SALESPRO©, overlaid on a blurred background of a modern pottery studio.
  • A dark, monochromatic technical graphic featuring the word "Source" in a sans-serif font centered on a textured grid background.
  • A split-screen software interface shows a dark-themed AI agent chat on the left and a light-themed website preview for 'ClarityOps' on the right.
  • A vibrant blue parallelogram icon floats in the center of a white, rounded-corner square graphic.
  • A screenshot of a web design interface features a product page for a Dyson-branded device that resembles an electric toothbrush but is labeled with the text…
  • A dark, grid-based software dashboard interface for WCONF '24 showcases various Webflow product updates like 'Agent instructions,' 'MCP 2.1,' and 'Expanded…
  • A dark, grid-based interface layout for Webflow Conf '24 showcases various software features across fifteen uniform tiles.
  • A presenter in a blue long-sleeve shirt and jeans stands on a dark stage, illuminated by spot lighting.
  • A screenshot of a dark-themed web design interface, showcasing the 'Style' panel for a 'Heading Jumbo' element.
  • A screenshot of the Claude website's 'Claude Science' section features a dynamic cloud of floating, rounded-corner image tiles against a bright white…
  • A whimsical 3D illustration serves as the hero image for a tech website, featuring a stylized Rube Goldberg machine of colorful geometric shapes and tools on…
  • A creative digital collage features a close-up photo of Trevor Noah, whose head is stylized with a torn paper effect to reveal 3D icons of a microphone, a…
  • A light mint-green website homepage for Greenhouse features the bold headline, 'The only hiring platform you’ll ever need.' Portraits of diverse…
  • A multi-generational family and their golden retriever play in a lush yard before a modern white house in this warm, sunlit website hero image.
  • A website hero section for 'fauna robotics' features a light-colored humanoid robot holding a small red ball in a bright, modern interior.
  • A vibrant graphic display for Fuegofonts features the words 'OLD MONEY CLUB' in a large, heavy block typeface with a blue and cream lava-lamp swirl pattern.
  • A close-up product shot of a yellow Radian EXR enduro motorcycle's front fairing and handlebars against a solid gray background.
  • Two neon green, multi-lensed sports cameras are mounted high on black poles against a clear, pale blue sky.
  • A website hero section features the bold serif headline, "We're a motion-first creative studio for brands and agencies," set against a cream background with…
  • A bold, minimalist logo featuring the characters 'Al' in a thick, black sans-serif typeface.
  • A 3D stylized rainbow arch graphic with a thick, clay-like texture.
  • A minimalist white plus sign with rounded, flared joints is centered on a solid black square background with softly rounded corners.
  • A minimalist white lowercase 'g' icon is centered on a solid emerald green square background with rounded corners.
  • A white line-art logo featuring four interlocking heart shapes arranged in a symmetrical cross or four-leaf clover pattern.
  • A minimalist graphic logo featuring a large, solid yellow circle positioned to the left of a vertically oriented, solid dark blue oval.
  • A minimalist graphic featuring the word "LIT" in bold, black, sans-serif uppercase letters.
  • A minimalist graphic logo featuring a thick, rounded beige letter 'U' centered on a solid black square background.
  • A vibrant purple square icon features a thick, white, stylized winding path that curves vertically through the center.
  • A black-and-white ink illustration of a grumpy-looking pufferfish covered in sharp, triangular spikes.
  • A digital brand collage for Docusign featuring a large purple 'JjKk' in a sans-serif typeface on the right against an off-white background.
  • A dynamic digital graphic features a horizontal live concert photograph segmented by a bold, white vertical-slat mask.
  • A striking silhouette of a woman with long hair and bangs is bathed in deep blue light against a vibrant orange and red gradient background.
  • A high-angle bird's-eye view shows several people sitting on a vibrant red floor, arranged in a grid-like pattern.
  • A close-up, dramatic product shot of a Duracell battery angled across a black background, emphasizing the metallic copper-top finish and silver terminal.
  • A vibrant blue checkmark is centered within a concentric circular graphic.
  • A close-up screenshot of a dark-themed web design interface menu titled 'Add'.
  • A close-up screenshot of a web design interface shows a dark floating 'main-heading styles' menu overlaid on a large sans-serif title reading 'DEVELOPMENT…
  • A heavy radial motion blur streaks across a group of office workers seated at a long desk with several computer monitors.
  • A close-up UI screenshot of a design tool showing a 'Disconnect property' menu overlaying a customer success story layout.
  • A screenshot of a dark-themed design software interface showing a 'Components' panel with a list of site elements like 'Button', 'Card', and 'Section / Header'.
  • A close-up screenshot of a web design interface shows a dark mode sidebar menu titled 'grid 2-col' positioned against a cream-colored canvas with serif…
  • A digital software screenshot features a dark-themed 'Typography' properties panel floating over a minimalist botanical website layout.
  • A close-up screenshot of a video editing or website builder software interface showing an animation timeline and preview.
  • A dark-mode software interface screenshot displays a 'Canvas settings' pop-over window positioned over a web design workspace.
  • A software interface screenshot displays 'Blog Posts Template Settings' with a focus on Schema markup and custom code fields.
  • A software interface screenshot displays a code editor and property panel for a music player component.
  • A screenshot of a web design interface for a travel guide titled 'FLYGO,' featuring a large headline 'Discover Torino' highlighted by a blue selection box.
  • A dark-themed software interface shows a CMS dashboard for 'Vaultflow' with an empty 'Blog Posts' collection.
  • A software interface screenshot displays an 'AI Assistant' panel on the left, offering gallery layout options for a website builder.
  • A screenshot of a software interface featuring a dark 'Learning Assistant' chat window overlaid on a website design canvas.
  • A screenshot of a web design interface features a travel landing page for 'FLYGO' with a large, highlighted heading that reads 'Discover Torino'.
  • A close-up software screenshot displays a web design interface for a tax software called Retax, featuring a dark dropdown menu overlaying the page.
  • A screenshot of a software design interface shows a dark-themed left sidebar listing 'Components' like Buttons, Cards, and Headers.
  • A dark-themed website builder interface shows a modal pop-up titled "Section / Header" containing a marketing hero section.
  • A screenshot shows a dark-themed software UI panel for styling a component named 'hero content layout'.
  • A screenshot of a software design interface displays two vertical testimonial card variations side-by-side on a dark grey canvas.
  • A man in a patterned orange and blue button-down shirt stands in sharp focus, looking off to the side amidst a crowd of motion-blurred pedestrians.
  • A screenshot of a dark-themed 'Review updates' software modal with a secondary blue notification bubble positioned to the right.
  • A cropped software screenshot showcases a 'Choose publish destination' modal window overlaid on a web design interface.
  • A side profile photo of a young man with dark curly hair focused on a computer screen in a dark room.
  • A striking abstract digital render features a large, teal-colored architectural curve illuminated by dramatic spotlights.
  • A striking portrait of a woman with curly auburn hair, looking off-camera with a neutral expression.
  • A close-up screenshot of a dark-themed creative software interface, highlighting a text box containing the serif word 'Exploring' in light purple.
  • A sleek digital graphic features a deep purple and black gradient background accented by fine, concentric circular wireframe lines.
  • A close-up UI screenshot displays a video or animation editing timeline positioned below a vibrant purple and dark blue gradient canvas.
  • A close-up screenshot of a dark-themed design software interface showing a 'Components' panel overlaid on a blue and white web layout.
  • A screenshot of a digital design tool interface featuring a dark mode sidebar for 'Layout' and 'Spacing' controls.
  • A screenshot of a dark-themed design software interface showing an 'Assets' panel with categories like 'Site assets' and 'Catalyst Shared Library' populated…
  • A close-up software screenshot features a purple-tinted color picker tool overlaid on a website design interface for 'SAFEHARD'.
  • A close-up screenshot of a web design interface features a serif headline, "Discover Torino," highlighted in a light blue selection box on an off-white…
  • Blurred figures in motion dominate the center of this industrial-style open office photo, conveying a sense of busy energy.
  • A digital graphic displays three high Google Lighthouse performance scores on a dark, rounded rectangular card.
  • A trio of three-dimensional, orange security icons floats in a diagonal cluster.
  • A close-up UI screenshot of a web design tool workspace, highlighting an H1 heading that reads 'Making payments and wiring money made simple'.
  • A software interface screenshot displays a dark 'Status' dropdown menu overlaid on a light green website design for 'NOVA'.
  • A close-up UI screenshot of a website builder interface, showcasing a heat map over dark orange and black background panels.
  • A software interface screenshot features a dark gray 'Optimizations' dropdown menu overlaid on a blurred university-style website.
  • A close-up portrait of a woman wearing clear-framed glasses is obscured by a cinematic motion blur of horizontal blue and purple light streaks.
  • A dark-themed user interface screenshot of an SEO Settings panel with a drop shadow.
  • A screenshot of a dark-themed analytics dashboard interface displays a list of topics with associated visibility scores.
  • A dark, semi-transparent dashboard for 'Audience insights' floats over a light-colored website for Reform.io featuring a navy 'MAXIMIZE YOUR AUTOMATION' button.
  • A woman with curly hair sits in profile wearing a red and white patterned dress, illuminated by bright sunlight streaming through a large floor-to-ceiling…
  • A vertical UI screenshot of a dark-themed application directory titled 'Apps' with a search bar and several categorized listings.
  • A digital UI screenshot showcases an integration between design software and a website builder.
  • A tiered UI screenshot showing a modern weather application dashboard positioned in front of a dark code editor window.
  • A close-up software screenshot displays a dark-themed 'AI Assistant Beta' sidebar detailing technical specifications alongside a light event card titled 'Two…
  • A collection of three clean product cards features a colorful patchwork 'Ceremonie Mohair Chair' priced at $499, an orange 'Toast Coffee 24 OZ.' bag for $21,…
  • A close-up studio shot highlights the glossy, vibrant orange dome of a rounded object against a clean white background.
  • A clean UI graphic displays a JavaScript code snippet within a light gray window.
  • A dark-themed software UI screenshot shows a 'Figma to Webflow' app interface overlaid on a workspace.
  • A high-energy, vertical action shot featuring two people in a modern office, obscured by heavy horizontal motion blur and streaks of white and golden light.
  • A screenshot of a dark-themed website design interface, specifically showing the 'Pages' sidebar panel against a purple-toned website preview.
  • A long-exposure street photograph captures the dynamic motion blur of a passing city bus with a vibrant neon pink light along its side.
  • Two dark-themed software interface windows overlap to show the 'Create audience' workflow.
  • A digital interface screenshot shows API documentation code blocks set against a dark charcoal background.
  • A close-up UI screenshot of a "Site access" management page for an "Example Website." It features a list of users with names and email addresses next to…
  • A screenshot of a software interface shows a 'Publish' modal overlaying a web design workspace for 'wisr marketing site.' The dark-themed modal features a…
  • A man in a dotted black shirt sits at a wooden desk, leaning back with a satisfied smile and his arms stretched behind his head.
  • A screenshot of a dark-themed 'Site activity' sidebar menu within a web design interface, showing a chronological feed of edits.
  • A dark-themed user interface collage features glowing neon green data visualizations and asset management panels.
  • A man with curly gray hair and a patterned shirt laughs alongside a woman with dark curly hair in this stylized, long-exposure photograph.
  • Two overlapping white software interface panels display toggle switches for website optimization.
  • A focused man in a gray sweater works at a desktop computer in a modern, plant-filled creative studio alongside other colleagues.
  • In a bright, modern studio, two colleagues viewed from behind collaborate while looking at a large computer monitor displaying a layout titled 'The 21 best…
  • A layered graphic showcases three overlapping software interface windows in a staggered layout.
  • A close-up screenshot of a dark-themed website builder interface shows a components sidebar and a preview window labeled 'Section / Header.' The sidebar…
  • A minimalist circular icon featuring a stylized wristwatch in blue and grey.
  • A minimalist line-art graphic shows two hands clasped in a firm handshake within a house-shaped outline.
  • A minimalist graphic icon featuring a stylized blue wrench head outlined in bright blue, set within a vertical white oval frame.
  • A screenshot of a web design interface shows a dark left sidebar menu for 'Elements' like 'Section,' 'Container,' and 'Div block' over a blurred tropical…
  • A dark-themed user interface screenshot displays two data tables for digital marketing analytics.
  • A close-up software screenshot displays a web design interface with analytics overlays against a dark, ember-toned background.
  • A software interface for an SEO and content optimization tool is displayed in dark mode against a warm, blurred bokeh background.
  • This dark-themed UI screenshot features a 'Page breakdown' analytics card displaying '3,687 visits' with a green '4%' growth indicator.
  • A dark-mode software interface screenshot displays an 'AI discovery' dashboard with a blue line graph showing a '56%' visibility score.
  • A 'Review draft' pop-up window in dark mode floats over a blurred 'Neuronix' website interface.
  • A dark-themed software dashboard screenshot showcases site analytics with a prominent conversion rate card of '2.50%' and a blue area graph.
  • A screenshot of a website interface features a dark amber and black cosmic background with small white stardust.
  • A split-screen screenshot of a digital analytics platform with a dark-mode interface.
  • A screenshot of an 'Assets' library interface displaying a 3x4 grid of image thumbnails on a dark gray theme.
  • A dark-themed user interface screenshot of a 'Choose publish destination' modal.
  • A minimalist flat line icon depicts a browser window in bright blue outline with a distinct top bar.
  • A minimalist line graph icon encased in a light grey rounded square frame.
  • A minimalist graphic icon featuring a stylized blue landscape image of a sun and mountain peak inside a light gray rounded rectangle frame.
  • A vibrant blue neon-style padlock icon sits centered within two concentric circular rings.
  • A minimalist graphic icon featuring two nested line-drawn shields.
  • A minimalist square graphic icon with a light grey rounded border.
  • A minimalist, rounded-corner square icon featuring a stylized blue browser window outline and a grey keyhole emblem.
  • A vibrant blue waveform line graph, mimicking a heartbeat or audio signal, is centered within a concentric circular frame.
  • A minimalist circular icon containing a stylized cloud outline in medium gray.
  • A minimalist graphic icon featuring a stylized blue human figure walking inside a house-shaped frame.
  • A minimalist flat graphic of a globe is encased within a thin, white circular border.
  • A minimalist flat graphic icon depicting an interface window with adjustment sliders.
  • A dark-themed user interface screenshot displays an 'Ecommerce' setup menu with five list items.
  • A digital UI element featuring a bright blue header bar with white icons and text.
  • A digital UI element featuring a bright purple banner and outline.
  • A glossy, bright orange Ginny Lamp stands against a plain white background, featuring a retro-futuristic dome shape reminiscent of a diver's helmet.
  • A dark mode user interface pop-up window with the header "Let’s turn your website into a store" and a small close icon.
  • A dark mode user interface screenshot of a pop-up window titled 'Add Condition'.
  • A close-up photograph of a modern tech workspace featuring a desktop monitor and smartphone, both displaying vibrant, wavy orange and blue abstract wallpapers.
  • A website interface for 'redacted' features a grid of iconic artworks, each obscured by a large, brightly colored rectangular gradient block.
  • A bold yellow and black website landing page features a large serif heading 'Da Vinci' that spans the center of the design.
  • A website interface screenshot featuring a bold orange background with a grid of famous paintings, each obscured by a large, solid-colored rectangular block…
  • A minimalist product page layout for a 'GIRL WITH A PEARL EARRING' print, featuring Johannes Vermeer's classic painting partially obscured by a large blue…
  • A software interface screenshot displays a purple-toned e-commerce checkout page under design.
  • This screenshot of a minimalist art retail website features Salvador Dalí's 'The Persistence of Memory' partially obscured by a large orange block on a warm…
  • A website product page for a 'Print' titled 'THE SON OF MAN' features a surrealist painting of a man in a bowler hat against a cloudy sky and sea, partially…
  • The name "Hokusai" is written in large, bold white serif typography across a deep navy blue and cream website layout.
  • A sophisticated e-commerce website design features the name 'Seurat' in large, black serif typography overlaid on a dusty rose and muted lavender geometric…
  • This website screenshot features a grid of iconic artworks under the shop name reda█d, set against a vibrant coral background with black modernist typography.
  • A deep blue website interface displays a grid of famous artworks like the 'Mona Lisa' and 'The Great Wave off Kanagawa,' each obscured by a large,…
  • This website screenshot features a vibrant pale yellow background with a central frame showcasing Vincent van Gogh's 'The Starry Night' partially obscured by…
  • A vibrant yellow e-commerce website for art prints features a grid of famous paintings obscured by large, solid-colored geometric blocks.
  • A dark-mode software screenshot displays an Email Design settings panel within a web-building interface.
  • A dark-themed digital color picker interface features a large gradient square transitioning from white and bright purple down to black.
  • A white digital order confirmation graphic features the headline "You have a new order from Ryan Morrison" below a partially redacted logo.
  • A vibrant medium headshot of a smiling person with bright magenta, chin-length hair and clear-framed glasses.
  • Five stylized website design mockups overlap at various angles against a neutral grey backdrop, showcasing diverse typography and layout styles.
  • A dynamic collage of user interface elements overlays a 3D clay-style globe featuring blue connectivity lines tracing across Africa.
  • A close-up 3D graphic of a matte white globe focused on North America, featuring a network of thin, luminous blue and grey lines radiating from a single hub…
  • A close-up studio portrait of a young woman with wavy dark hair, looking off-camera with a wide, joyful smile.
  • A floating white card displaying payment options is the focal point of this clean, isometric graphic against a neutral gray background.
  • An angled screenshot shows a sleek e-commerce checkout interface in a pale lavender and white theme set against a dark sidebar.
  • A translucent, monochromatic white 3D globe floats against a light gray gradient background.
  • A high-angle, perspective screenshot of the Zapier editor interface, titled towards the upper-left on a light gray background.
  • A digital workspace screenshot displays a website design for 'CUSHION' featuring a 'Spring cushion collection' banner with a terrazzo-patterned pillow.
  • A dark-mode software interface for 'Products Template Settings' is displayed on a tilted screen against a light gray background.
  • A dynamic collage of overlapping digital UI cards floats at an isometric angle against a neutral grey background.
  • A close-up portrait of a man with light brown hair and a short beard, looking off-camera to the left with a gentle smile.
  • A digital screenshot showcases the Google Analytics dashboard for 'Mood Booster Store' tilted at a dynamic isometric angle.
  • A graphic design mock-up featuring two overlapping vertical mobile screens for 'Mobild' floating over a plain grey background.
  • A digital product display featuring a pair of round, dark-lensed sunglasses with thin metal frames on a light peach-colored e-commerce website page.
  • A blue, stylized stick figure stands with outstretched arms and spread legs at the center of two concentric circles.
  • A software interface screenshot features a dark 'Collection list settings' pop-up menu floating over a website builder workspace.
  • This screenshot showcases a 'Talent Network' software interface on a light beige background, featuring a dark sidebar with various icons.
  • A close-up portrait of a man with short hair and a goatee wearing black-rimmed glasses that reflect the green and white light of computer monitors.
  • A digital design interface shows the top-left corner of a content editor layout for a travel guide titled 'FLYGO'.
  • A close-up software screenshot displays a color picker interface floating over a web design layout featuring the header SAFEHARD™.
  • A man and a woman work side-by-side at a minimalist desk in a bright, modern office, viewed through a dreamlike lens flare.
  • A close-up software screenshot displays a dark gray CMS Collections menu overlaying a teal and white web design.
  • This screenshot shows the dark-themed user interface of a design software asset panel.
  • A man in a blue jacket and jeans stands perfectly still in the center of a busy city street, surrounded by the heavy motion blur of a passing tram and…
  • A software interface screenshot shows an 'Image settings' floating menu overlaid on a website design workspace.
  • A close-up, over-the-shoulder photograph shows a man wearing a black knit beanie and tortoiseshell glasses focused on a laptop.
  • A dark software menu overlay lists document statuses like "Published," "Staged Changes," and "Archived" for titles such as "Climate Resilience" and "Green…
  • A high-speed motion blur photo captures a busy modern office space, where the movement of people creates a dynamic, streaked effect against a static…
  • A screenshot of a digital design platform interface featuring a collaborative comment thread overlaying an article about California.
  • A screenshot of a digital design tool interface features a 'Search Result Preview' overlay for an SEO meta description.
  • A close-up software interface screenshot shows an 'Add Condition' dialog box floating over a website editor.
  • A digital graphic showcases a website editor interface layered over a soft, vertical-striped background of blue and purple gradients.
  • A dynamic, long-exposure photograph captures a woman and man working intently on laptops in a darkened office, with vibrant trails of golden-yellow light…
  • A close-up screenshot of a digital analytics dashboard highlights a 'Total bandwidth over time' area chart.
  • A screenshot of a software interface showing a content management system connecting data to a 'Walker & Dunlop' customer story page.
  • A long-exposure photograph captures the bustling energy of a modern industrial office with blurred figures walking down a central corridor.
  • A dark, rectangular UI graphic displays three circular progress meters showing high scores under the header "GOOGLE LIGHTHOUSE®".
  • A vibrant blue ISO logo features bold, serif typography centered within a circular globe graphic.
  • A circular blue graphic emblem features the text "AICPA SOC2" in bold, sans-serif white capital letters stacked in two lines.
  • A bold, black and white graphic logo featuring the lowercase letters "pci" cutout from a tilted black trapezoidal shape.
  • A dark-themed software interface screenshot shows a 'Publish' modal overlaid on a web design canvas for 'wisr'.
  • A white modal window titled "Add custom SSL certificate" sits centered over a darkened software dashboard UI.
  • A split-screen software interface screenshot features a dark developer console on the left and a bright user settings window on the right.
  • A software interface screenshot displays a website design for NCR Voyix inside a web development editor.
  • A dark-themed software interface displays a web design canvas for a financial brand named 'Numero' featuring the headline 'A card that keeps your books.' A…
  • A digital screenshot of a dark-themed color picker interface showing a vibrant purple selection.
  • A screenshot of a dark-themed software user interface shows the 'Add' panel with 'Elements' and 'Layouts' tabs.
  • A dark Code Embed Editor window floats over a pale yellow web design interface titled 'Interlac,' showcasing a JavaScript snippet that manages button click…
  • A close-up screenshot of a web design interface featuring a travel guide for 'Discover Torino' by FLYGO.
  • A technical UI graphic displays API documentation snippets against a dark charcoal background.
  • A dark-themed software dashboard screenshot showcases website analytics under a 'Site overview' tab.
  • A side-by-side comparison of two web design variations features a dark data overlay titled 'Strongest Variations'.
  • A dynamic long-exposure photo captures a smiling South Asian woman in a textured purple sweater at a desk, with golden light trails dancing across the frame.
  • A close-up UI screenshot of a web design tool featuring a dark-themed financial landing page for 'AstralFund Financial' in French.
  • A dark UI overlay box titled "Search Result Preview" sits atop a vibrant, illustrated webpage for Belighted.
  • A software interface screenshot displays a collaborative design environment featuring a coastal travel article about California.
  • A dark-themed software interface displays a 'Publish' modal overlaying a website design for 'wisr'.
  • A trio of 3D, matte orange cybersecurity badges floats together, including a rounded square, a shield, and a circular medallion.
  • A close-up UI screenshot of a dark-themed web design application's side panel shows an 'Add' menu with layout options.
  • A dark-themed user interface screenshot of an 'Apps' menu displays a list of software integrations.
  • A dark, digital landscape featuring translucent 3D tiles with app logos floating in an isometric perspective.
  • Stacked user interface windows show a software integration for 'Figma to Webflow (HTML, CSS and Website)'.
  • A close-up portrait of a woman wearing glasses is seen through a heavy motion blur and digital distortion effect.
  • A dark-themed software UI modal titled 'DevLink' floats over a background showing a file explorer and code editor.
  • A website hero section for Jasper features a smiling woman with glasses and curly hair set against a vibrant graphic background of green grids and pink…
  • A minimalist, flat line-art icon of a graduation cap enclosed within a house-shaped outline.
  • A minimalist graphic icon featuring nested rounded rectangles that suggest a screen or interface layout.
  • A minimalist graphic icon featuring a stylized blue landscape image inside a rounded grey border.
  • A minimalist flat graphic icon depicting a programming script or code file.
  • A vibrant blue uppercase letter 'A' and a light gray lowercase letter 'a' are set side-by-side in a clean, sans-serif font.
  • A minimalist icon features bright blue code angle brackets centered within a series of nested frames.
  • A minimalist graphic icon featuring a bold blue isometric cube outline framed within a thick, light gray hexagon.
  • A dark grey software interface window labeled Audits BETA overlays a graphic of a green leafy branch.
  • A digital UI screenshot features a dark-themed color picker tool overlaid on a sage green background.
  • A software interface screenshot features a drop-down menu for accessibility testing, overlaid on a geometric abstract pattern and the 'Easyo' logo.
  • A group of children dressed in vintage scout uniforms—green shirts, tan shorts, and scarves—stand by a canvas tent in a sun-drenched, golden field at sunset.
  • A website hero section features a circular gallery of rounded rectangular images surrounding the bold central text, "Apps that deliver." The orbiting tiles…
  • A website hero section features a wide aerial photograph of rolling golden hills and rugged mountains partially obscured by low-hanging white clouds.
  • This website screenshot features a large, ultra-modern villa with white concrete blocks, floor-to-ceiling glass walls, and a reflecting pool in the foreground.
  • This website screenshot features a minimalist architectural photo of two flat-roofed buildings in ochre and cream against a clear, pale blue sky.
  • A cinematic website landing page for Sonar Music features a high-contrast film still with two men in profile facing each other, one with intricate facial…
  • A portfolio website landing page featuring a stark black background with large, stylized copper-colored serif typography reading 'VISUAL Storyteller…
  • A website screenshot for Oilstainlab features a metallic car chassis suspended in mid-air against a stark white background.
  • A screenshot of a website builder's dark-themed editor interface showcasing an 'Interactions' panel.
  • A software interface screenshot shows a website editor in progress, featuring a minimalist aesthetic with a large 'abe' serif logo.
  • A close-up screenshot of a video editing or animation software interface features a dark timeline at the bottom with colored blocks labeled 'Heading in',…
  • A software interface screenshot displays a dark-themed web design tool with a left sidebar menu titled 'All interactions' and 'Action presets.' A cursor…
  • A thick, blue-outlined cursor arrow points toward the center of a circular target.
  • A minimalist graphic icon featuring a stylized blue lightning bolt outlined with a thick, rounded white border.
  • A minimalist graphic icon featuring two vibrant blue angle brackets, like code delimiters, centered within a nested frame.
  • A minimalist linear graphic featuring a bold blue square outline overlapping a series of thinner grey rectangular outlines.
  • A blue, stylized stick figure stands centered in a Vitruvian pose with outstretched arms and spread legs.
  • A minimalist, flat line art icon depicting a blue stylus or pencil editing a document.
  • A thick blue neon-style line forms a mouse cursor arrow, pointing diagonally toward the top left corner.
  • A dark-themed software screenshot shows a 'Components' sidebar with a list of design elements like 'Section / Agenda' and 'Section / Hero'.
  • A close-up UI screenshot of a dark-themed website builder interface focusing on the 'Pages' sidebar.
  • A screenshot of a dark-mode web design interface focuses on a dropdown menu showing options like 'Create new page' and 'Create page template'.
  • A close-up software screenshot of a 'Site access' management dashboard featuring a list of user names, email addresses, and roles.
  • A bold, white minimalist logo centered on a vibrant blue background.
  • A bold, royal blue graphic featuring a stylized, abstract 'W' with thick, italicized strokes.

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.

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.

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.

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

Download the Brand SkillZIP, 23.3 MB

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/

├ images/

└ logos/

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 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)