Brand guidelines as a PDF or a web page? How to choose, and how to build the page with AI

This one is for brand designers who take on client work and already use AI somewhere in how they work.

Two years after you delivered the identity, the client's new marketing hire messages you: which green is the primary? They have the guidelines. It's the PDF from launch week, version one, from before you changed the secondary palette. The printer has the same PDF. So does the freelancer who took over their Instagram last spring.

Nobody did anything wrong. A PDF is a copy, and everyone who got one is holding the version from the day they got it. That's sometimes exactly what you want, and sometimes the problem. Which one it is depends less on the format than on who's opening it.

PDF or web page for brand guidelines: what am I actually deciding?

The usual version of this question is about presentation: a PDF looks like a designed document, a web page looks like a website. That matters on handover day, when the client flicks through it once. It matters much less afterwards.

The more useful question is who opens the guidelines after you've gone, and what they need when they do. Usually that's the printer, the agency building the website, the freelancer doing social, the next designer, and whoever the client hires into marketing. Most of them come to look up one thing, a HEX value, the clear space, whether the mark can sit on the brown, and then close it again. Some of them need the opposite: one file that doesn't move, so they can print from it or point to it later.

Both of those are real needs. The two formats are good at different ones.

What is a PDF still better at for brand guidelines?

• Print. Printers work from PDFs. A print-ready PDF, alongside your master files, is still what a packaging or signage job runs on.
• Offline. Once it's downloaded, it opens anywhere, with no connection: on a site visit, at the print shop, on a flight.
• A record of what was delivered. A PDF can go into the contract, the final invoice or a supplier brief as the version that was signed off. If anyone later asks what you handed over, that file answers it.
• One fixed version. It doesn't change, which is the problem in the story above but also the point. When the client wants a frozen copy of the brand as approved, a PDF is that copy.
• Everyone knows what it is. Nobody has to be told how to open a PDF.

What does a web page do better than a PDF?

• It can be updated. If the guidelines live at one address and you change what's at that address, everyone who opens it sees the current palette. Nobody is left holding version one.
• It's easier to look things up on a phone. A page reflows to the screen. An A4 page stays an A4 page on a small screen, and you zoom and pan to find the clear-space rule.
• Values can be copied in one click. A copy button next to each colour beats selecting text out of a PDF and hoping you got the whole HEX.
• It's one address for years. The link the client pinned in Slack is the same link the next agency gets, as long as you host it somewhere that lets you change the file without changing the link.

What a page doesn't replace is the files people produce work from. The printer still needs your master files, and probably a print-ready PDF. The page tells people the rules and points them to the files.

So which should I send the client?

Sending both is less work than it sounds. The page is the one you keep current. Each time the client signs off a change, you save a PDF of that version for the record, and the page's version line says which one is current.

How do I make a brand guidelines web page with AI?

If the identity is finished, an AI assistant can lay the guidelines out as a single page in a few minutes. You don't need to build a website. Your time goes into checking what it made, which is what most of this section is about.

What should I have ready before I ask the AI?

The AI is laying out decisions you've already made. Have these to hand before you open the chat:

• The final logo as SVG, lockup and mark, with the type converted to outlines.
• Your colour values: HEX, RGB, and the CMYK you've actually specified or proofed. Pantone too, if you use it.
• Typeface names and weights.
• The rules: clear space, minimum sizes, the don'ts.
• A few lines of brand story and tone of voice, written by you or the client.

If you don't have something yet, leave it out of the prompt rather than asking the AI to fill it in. It will fill it in, and it will look plausible.

What prompt should I use for a brand guidelines page?

This is the prompt we ran in Claude, with a made-up client. We asked for plausible example values because we were testing the layout. For a real handover, replace the last paragraph with your client's name and your actual values and rules.

I'm a freelance brand designer. I've finished an identity for a client and I want to hand over the brand guidelines as ONE self-contained HTML page instead of a PDF, so the client's future designers, printers and social freelancers can open it in a browser. All CSS inline, no external fonts, images or scripts.

Include: brand story in a few lines; logo usage rules (clear space, minimum size, don'ts) with the logo drawn as inline SVG; colour palette as swatches with HEX, RGB and CMYK and a one-click copy for the HEX; typography (name the typefaces, show the hierarchy using system fonts as stand-ins and say so); tone of voice do/don't; a "Downloads" section with placeholder links to where the source files live; a version number and "last updated" at the top.

Placeholder client: "Fernhill Coffee Roasters". Make the colours and rules plausible examples.

What came back was a single 24 KB HTML file with no external fonts, images or scripts. Everything we asked for was there: the story, logo usage with clear space, minimum sizes and six don'ts, five swatches with HEX, RGB, CMYK and a copy button, a type specimen and hierarchy, a do and don't list for tone of voice, a Downloads table with placeholder links, and the version and date at the top.

It also had problems. Here's what to check, in the order we'd check it.

Why does the logo look wrong on the AI's page?

Look at the logo before anything else. In our run the wordmark was cut off at the right edge: FERNHILL came out as FERNHILI, on every lockup on the page. It's easy to miss, because it still reads as a word.

The file shows why. The AI drew the logo itself, as an SVG with the name set as live text in Georgia, inside a drawing area that wasn't wide enough for it, so the last letter was cut off. Live text also depends on the fonts installed on whatever device opens the page, so the same logo can come out differently on someone else's screen.

For a real brand, don't let the AI draw the logo. Export your master as SVG with the type outlined, and paste that SVG code into the page in place of the AI's. Then the logo on the page is the logo, not a sketch of it. Do the same for the don'ts: ask the AI to reuse your SVG for the stretched, recoloured and rotated examples instead of redrawing it.

What did the AI add that I didn't ask for?

Four things:

• A row of section links that sticks to the top of the screen as you scroll.
• A colour proportion bar: roughly 45% Crema, 30% Fern Green, 12% Roast Brown, 8% Ink, 5% Ember.
• A note telling printers to ask for a hard proof on packaging runs.
• Print styles, so the page prints without the section links and copy buttons.

The section links and print styles are layout, so keep them if you like them. The other two are brand decisions. The proportion bar is a rule about how much of each colour to use, and the printer note is production advice, and nobody made either decision. A guidelines page is where people go to find out what's been decided, so anything on it gets followed. If you didn't decide it, delete it. Or decide it, and then keep it.

Which numbers do I need to replace?

All of them, but look hardest at the CMYK. In our run the CMYK values were a straight formula conversion of the HEX. Fern Green, #2F4A3A, became C37 M0 Y22 K71, which is the same number the textbook RGB-to-CMYK arithmetic gives, give or take rounding. It isn't a value from a print profile, a swatch book or a proof. A printer who takes it as the target will match the formula, not your green. Put in the CMYK (and the Pantone, if you use one) that you actually specified.

The same goes for the minimum sizes (it wrote 35 mm and 140 px for the lockup), the clear-space rule, and the brand story, which it wrote from nothing. They were plausible because we asked for plausible. In a real handover, every one of them should come from you.

How do I use the real brand fonts on the page?

We asked for no external fonts, and the AI did what we asked: it named the typefaces (Fraunces and Inter, in our example), showed the hierarchy in Georgia and the device's default sans-serif, and put a note on the page saying so. For a lot of guidelines that's enough. The page has to tell people which fonts to use. It doesn't have to be set in them.

If you want the page set in the real fonts:

1. Check the licence covers web use. A desktop licence often doesn't.
2. Put the font files in a folder next to the HTML. .woff2 is the smallest; .woff, .ttf and .otf work too. Ask the AI to add @font-face rules that point at them.
3. Zip the HTML and the font folder together. The page is now more than one file, so it travels as a ZIP.

Does the copy-HEX button work?

In our test, yes. In Chromium, with clipboard access allowed, clicking Copy HEX on Fern Green put #2F4A3A on the clipboard and the button changed to "Copied #2F4A3A". Browsers and hosts can restrict clipboard access, and we haven't tried the button on every host, so click it once on the final link before you send it. If it doesn't copy there, the HEX is still printed on the swatch.

Where do the .ai and .eps files go?

Not on the page. The page carries the rules and an SVG of the logo for reference. People produce work from the master files: .ai and .eps logos, print PDFs, swatch files, packaging dielines. Keep those in a shared folder in Google Drive or Dropbox, and use the page's Downloads table to point to them.

Our run produced that table already, with placeholder links for the logo pack, colour swatches, fonts, packaging templates and social templates. Replace each placeholder with the real folder link, and delete the rows for anything you don't deliver.

What should I check before I hand it over?

• Open it on your phone. Ours didn't scroll sideways at phone width (390 pixels), and the Downloads table dropped its Formats column to fit. Yours may behave differently once your real logo and copy are in. Checking the page on a real phone before you send it covers what to look for.
• Search the page for square brackets. The AI left [Designer name] and [designer email] for you to fill in.
• Set the version and date at the top. When you change anything later, update both. If the address stays the same while the content changes, that line is how a reader knows which version they're looking at.
• Click every Downloads link from a browser you're not signed in to, to make sure the client's people can open the folders.

How do I keep one link that always shows the current guidelines?

Whether the client keeps one address for years depends on where you host the page. You need somewhere that lets you replace the file without changing the link. On miinideck:

1. Upload the HTML file, or the ZIP if you've added fonts and logo files. You get a link that opens the page in any browser, and nobody needs an account to view it. The link is unguessable and kept out of search.
2. When something changes, edit the HTML (or ask the AI to), update the version line, and choose Replace file in your dashboard. The link the client pinned in Slack or pasted into a supplier brief opens the new version. Replacing needs an account: an upload made without one can't be replaced later. You already sent the link, now the file changed goes through what happens when you replace a file.
3. Send the link once, and tell the client it's the one to keep.

If you're sending both formats and want the PDF to stay at one address too, how to update a PDF you've already sent without changing the link compares what Google Drive, Dropbox and others say about it.

A few limits to know before you plan around it:

• Size. An upload without an account takes up to 3 MB; a free account takes files up to 10 MB. Our page was 24 KB, and embedded fonts will add to that.
• How long links last. On a free account, links expire after 7 days by default, and one link can stay on permanently. A guidelines page is a good use of that one. If you deliver guidelines for several clients, each one needs a link that doesn't expire, which means Solo or Studio, where you choose the expiry or turn it off.
• What goes in a ZIP. Font files, SVG logos and PNG, JPEG, WebP or GIF images go in with the HTML. Source files don't: .ai, .eps and .pdf files inside the ZIP are left out of what we host, which is one more reason the masters live in Drive or Dropbox.
• The client's own domain. On Studio, you can connect one domain of your own to the account, set up with a DNS record, and the account's links open there. It's one per account, so it fits best when the client holds the Studio account for their own brand, or when you put your studio's domain on everything you deliver.
• Link previews. A page without a password usually shows a preview image when the link is pasted into a chat app. A PDF doesn't, and adding a password turns the preview off.

When is one page not enough?

When the brand is a system rather than a document: several teams using it, an asset library people download from, different access for different people, approvals before anything goes out. Dedicated brand portals such as Frontify and Brandpad are built for that, and a brand that's growing in that direction will outgrow a single page and a PDF alike.

For a small business or a startup whose guidelines fit on one screen-length page, the choice is smaller. A PDF is still the right thing for the printer and the contract. A page is the right thing for the people who'll come back to look something up. Which of those matters more depends on the client, and you're the one who knows who'll be opening it.