By Mehdi HassanHow do you publish online brand guidelines?
You publish online brand guidelines by turning the guide into a page, usually yoursite.com/brand, with downloads and rules that outsiders can use without asking you. It's the public version of your brand guide: the parts journalists, partners, customers and freelancers need, in a format that opens on a phone.
This approach ties brand work directly to the website. Instead of a separate file that lives in a drive, the guide becomes part of the site, built with the same styles and updated in the same tool. If you haven't written the guide itself yet, start with our brand guidelines template, then come back to publish it. If you've just finished a brand sprint, our guide to turning a new identity into a website covers the wider handoff.
Why host brand guidelines on your own website?
Host brand guidelines on your website because a URL stays current and a file doesn't. Every PDF you've ever emailed is still out there, with last year's logo. A /brand page has one version, and when you change it, everyone who visits sees the change. Here's how the common options compare.
Option | Good for | Weak spot |
|---|---|---|
PDF in a shared drive | Agencies and printers who want one file | Copies go stale and can't be updated |
Public Notion or doc page | Fast to set up, easy to edit | Looks unlike your brand; weak for downloads |
Brand portal software | Large teams, many partners, permissions | Another tool and subscription to manage |
/brand page on your site | Startups, press, partners, customers | Needs a site the team can update easily |
For most startups the /brand page wins. It's free once the site exists, it looks like the brand because it's built from the brand, and it gives press a reliable place to get the right logo. It also has a quiet search benefit: people searching for your logo or brand colors land on your page instead of a random logo-download site with an outdated file.
What should an online brand guidelines page include?
An online brand guidelines page should include what outsiders need and nothing that's still internal: a short brand description, logo downloads, usage rules, color and type values, how to write your name, and a contact. Keep detailed voice rules, templates and work in progress in your internal guide.
- About the brand: two or three sentences on what you do and a boilerplate paragraph press can paste.
- Logo downloads: every version (full, horizontal, symbol; color, black, white) in SVG and PNG, plus one zip of everything.
- Logo rules: clear space, minimum size and four to six misuse examples.
- Color and type: values in HEX and RGB, with copy buttons, and the typeface names with a link to get them.
- Name and product terms: how to write the company name, capitalization and product names.
- Co-branding: how partners should show your logo next to theirs.
- Contact and version: who to ask, plus a last-updated date.
If press coverage is a priority, link this page from a dedicated press page with founder photos and fact sheets; our startup press kit checklist covers that page.
How do you build a brand guidelines website page in Framer, Webflow or Next.js?
Build the brand page in whatever your website already runs on, because the point is that the guide and the site share one set of styles. Each platform handles it a little differently.
Platform | How the brand page works | Best when |
|---|---|---|
Framer | A page using the site's color and text styles; downloads as linked files; CMS for sections if needed | Your marketing site is already in Framer |
Webflow | A static page or CMS-driven sections; page-level password protection for internal parts | You want CMS-managed assets and gated sections |
Next.js | Swatches and type specimens render from the same tokens as the site; content in MDX or a CMS | You want the guide to be literally the live system |
Next.js has one advantage worth explaining. Because the site's colors and type are defined once in code, the brand page can render its swatches and type specimens from those exact values. If someone changes the accent color in the codebase, the brand page updates on the next deploy, with no chance of the guide and the site disagreeing. Framer and Webflow get close by using shared styles and variables; just avoid typing values into text blocks by hand. Platform features change, so check Framer's or Webflow's current documentation for password protection and file hosting on your plan.
For example, suppose a 12-person fintech startup
For example, suppose a 12-person fintech startup with a Next.js marketing site. It adds /brand as one more page. The color section maps over the site's token file and renders a swatch for each brand role with copy-to-clipboard HEX values. The type section renders each text style in the real font.
Logo downloads are SVG and PNG files served from the site's assets, plus a zip. A separate /press page links to /brand and adds founder photos and a fact sheet. When the startup tweaks its accent color later, the brand page changes in the same deploy.
How do you handle downloads, access and versions?
Make downloads one click, keep internal material behind a login or off the page entirely, and date every change. Most visitors to a brand page want exactly one file, usually the logo on a dark or light background, so don't force them through a zip.
- Downloads: offer each logo as an individual SVG and PNG, with a clear label such as 'Logo, white, for dark backgrounds'. Add a zip for people who want everything.
- Access: keep the public page public. If you want an internal section online, use your platform's password protection or a separate internal wiki, and check your plan supports it.
- Versions: show a last-updated date on the page. When you change the logo or colors, keep the old files available under a clearly labeled 'previous' link for a short transition.
- Discovery: link /brand from your footer, your press page and your email signature for partnerships.
How does a brand page connect to the website build?
A brand page connects to the website build by sharing its foundations: the same colors, type, spacing and components. That's what makes it 'living'. A brand page that's designed separately from the site is just a PDF in a browser tab; one built from the site's own system can't fall out of date without the site changing too.
This is why we treat the brand page as part of the website project, not an afterthought. When a brand changes, both have to change; our guide to sequencing a website redesign after a rebrand covers the order of work. When the brand is stable, the page is how you keep the website, product and deck aligned, which we discuss in brand consistency across website, product and deck. If your site runs on Framer and you're weighing a move to code partly to get this kind of shared system, our guide to Framer to Next.js migration cost explains what that involves.
Decide what's public
Go through your internal guide and mark each section public or internal. Logos, colors, type and naming are usually public.
Export and name the files
Export every logo version in SVG and PNG with descriptive filenames, and build one zip.
Build the page from site styles
Use the site's color and text styles or tokens for every swatch and specimen. Add copy buttons for values.
Write rules and misuse examples
Keep each rule to a sentence, with an image beside it.
Link and date it
Add a last-updated date and link the page from the footer, press page and partner materials.
