FlowGuide - Website Template

FlowGuide – Component-Based Brand Guide Template

FlowGuide is a 100% component-based brand guide template that helps you quickly set up sleek brand guidelines in Webflow — from small one-pagers to comprehensive multi-page setups, making your brand easy to share. FlowGuide is the brand guide format that makes any brand shine, created with builder-friendly and flexible components to enable a quick and intuitive workflow.

Core Features

• Build pages in no time: 100% component-based (yes, ACTUAL Webflow components!)
• Use component properties to customize layouts such as number of columns or image aspect ratios
• Supports both one-page and multi-page brand guide setups
• Easily add your brand color and fonts through variables
• Change any section to dark mode by dragging it into a component slot
• ⚡ Enable powerful functionality with included custom code snippet

Included Layout Components:

• Menu: Link to relevant sections on the same page or enable a sub-menu setup for multi-page brand guides. ⚡ Auto-generate items with the custom code snippet.
• Hero: Create impact with a large image and add update date and contact details.
• Title: Use different size variants and optional paragraph text.
• Image: Choose image format (wide, square, or tall) and layout (1, 2, or 3 columns). Customize inner or outer captions with headlines or do’s and don’ts.
• Colors: Customize the layout and hide/show HEX, RGB, CMYK, or PMS.
• Text: Optional title and rich-text formatting.
• Statement: Add short, powerful statements that reveal progressively while scrolling.
• Font Family: Show a large preview of your brand font and link to the foundry. Background and text color are fully customizable. ⚡ Show animated typewriter text on hover with the custom code snippet.
• Font: Preview individual brand fonts and weights.
• Download File: Link to assets with relevant icons (e.g., link, video, image, folder, cloud…).
• Zoom Image: A grid of images that zoom into the centered image while scrolling for an immersive visual break.
• Marquee: Up to 8 images sliding from right to left in a seamless infinite loop.
• Keywords: Highlight up to 5 keywords with supporting visuals that appear on mouse over.
• Pagination: Link to next and previous pages. ⚡ Auto-generate with the custom code snippet.

⚡ Powerful Functionality

Use the included code snippet, found on the Instructions page, to enable:

• 🎨 Copy HEX code with click
• 🪄 Auto-generate menu items based on title sections
• 🪄 Auto-generate next and previous links
• ⌨️ Keyboard shortcuts for the menu (e.g., press “A” to go to the Assets page)

Pages Overview

The template comes with the following pages:

• Brandguide (One-Page)
• 📂 Brandguide (Multi-Page)
• Home
• Logo
• Typography
• Graphic Elements
• Assets
• 📂 Template Pages
• Instructions
• Licenses
• Style Guide
• Changelog