Give an AI website builder your brand as files, not adjectives: a design-tokens or CSS variables file with exact colors, type and spacing, your Tailwind config if you have one, a short written brand guide, and logo files with "logo" in the filename. FNJ's AI builder reads a project ZIP or folder like that, follows the brand exactly and places your real logo, which a sentence like "navy, modern and friendly" can never guarantee.
Why describing your brand in words doesn't work
Every adjective in a prompt is a decision you've handed to someone else.
- "Navy" could be
#0A2540,#1B2A4Aor#14213D. They look alike in a sentence and different next to your printed brochure. - "A friendly sans-serif" describes dozens of typefaces.
- "Rounded corners" could mean 4px or 24px, and the difference changes the whole personality of a site.
- "Plenty of white space" means one thing to a luxury hotel and another to a plumber.
An AI will make a reasonable choice for each, and the result will look like a reasonable brand. It just won't be yours. Files remove the guesswork: #0A2540 can only mean one thing. That's why FNJ's AI website builder for designers accepts your project files as a reference, alongside the screenshots and links it uses for everything else.
What to put in the folder
A good brand folder is small. Here's a typical layout:
brand/
tokens.json
colors.css
tailwind.config.js
brand-guide.md
logo.svg
logo-white.svg
You won't need every file. If your brand lives in code, the stylesheet or Tailwind config may be enough. If it lives in a PDF, a short tokens file and a written guide will do the job.
1. Design tokens
Tokens are your brand decisions as data. Name them by role, not only by hue, because "accent" tells the builder how to use a color and "orange-500" doesn't:
{
"color": {
"text": { "value": "#14213D" },
"background": { "value": "#FBF8F3" },
"surface": { "value": "#FFFFFF" },
"accent": { "value": "#E4572E" },
"border": { "value": "#E6E0D6" }
},
"font": {
"heading": { "value": "Fraunces" },
"body": { "value": "Inter" }
},
"radius": {
"button": { "value": "999px" },
"card": { "value": "16px" }
}
}
If your tokens are only named by hue, add a line to your written guide that maps them to roles.
2. CSS variables
Many brands already have their tokens as CSS custom properties in a global stylesheet. If yours does, include that file as it is. MDN's guide to using CSS custom properties covers the syntax if you're writing one from scratch:
:root {
--color-text: #14213d;
--color-bg: #fbf8f3;
--color-accent: #e4572e;
--font-heading: "Fraunces", Georgia, serif;
--font-body: "Inter", system-ui, sans-serif;
--radius-card: 16px;
--space-section: 96px;
}
3. Your Tailwind config
If your product or current site uses Tailwind, its config already holds your colors, font families, radii and spacing scale. Include it as it is. The builder reads it as a source of brand values. FNJ's export is plain CSS with no Tailwind, so your new site doesn't need Tailwind to use those values.
4. A written brand guide
Tokens can't express rules. A one-page Markdown or text file can. Cover:
- Color usage. "The accent is for primary buttons, links and one highlight per page. Never use it as a section background."
- Typography rules. "Headings in sentence case. Capitals only for small labels."
- Logo rules. Clear space, minimum size, and which version goes on dark backgrounds.
- Voice. Three words with an example of each. "Plain: we say 'book a visit', not 'schedule your consultation'."
- Photography. The style you shoot or license, so your uploads and the layout agree.
- Never. Gradients, stock handshakes, drop shadows: whatever your brand avoids.
If your official guidelines are a 40-page PDF, don't hand over the PDF and hope. Write the one-page version of the rules that matter on a website. Plain text states a rule without leaving anything to interpretation, and writing it often exposes rules your team never actually agreed on.
5. Logo files, named as logos
- Use SVG if you have it, or a large PNG with a transparent background.
- Put "logo" in the filename:
logo.svg,logo-white.svg,studio-logo.png. A file calledfinal_v3.pngtells nobody what it is. - Include only the versions you use on the web, usually the primary logo and a reversed one for dark backgrounds. Leave out social avatars, print lockups and the twenty sizes of favicon.
When the project includes logo files, FNJ places your real logo on the site.
How to prepare the folder
- Start from the source of truth. If your tokens live in code, take them from the code. If they live in a design file, export the variables to JSON rather than retyping them.
- Remove contradictions. Delete old palette files and deprecated colors. If two files disagree about your accent, the builder has to pick one, and it may not pick the one you meant.
- Use final values. Hex or RGB colors, pixel or rem sizes. Resolve any alias that points to a file you didn't include.
- Leave out everything that isn't brand. No
node_modules, build output, lock files, test data or video. Zip the source and design files only. - Name files for what they are.
colors.css,typography.cssandbrand-guide.mdare easier to recognize as the rules thanstyles2.cssandnotes.md. - Check your text colors for contrast. Brand palettes often include a light grey that fails as body text. The W3C's guidance on minimum contrast asks for at least 4.5:1 for normal text and 3:1 for large text.
- Decide your web fonts. FNJ's exported code loads fonts from Google Fonts. If your brand typeface is on Google Fonts, you're set. If it's a licensed commercial font, name an approved Google Fonts substitute in your guide, and plan for a developer to self-host the licensed files after export under your license.
Combining brand files with other references
Your folder defines identity: colors, type, radii, logo and voice. It doesn't say much about layout, so pair it with a screenshot or a link that shows the composition you want. FNJ accepts up to three references per prompt and follows the first where they disagree, so put the brand folder first.
A website for our bookkeeping firm for independent restaurants: home, services, pricing, about and contact. Use our brand files exactly. Take the layout feel from the screenshot: large editorial headlines, a narrow text column and lots of white space.
If you're still choosing that layout reference, how to choose reference websites walks through it.
What the AI follows, and what you still check
FNJ's builder plans a design system before it builds anything: pages, palette, typefaces and reusable styles. With a brand folder, that plan comes from your values, then every page is laid out section by section at desktop, tablet and phone widths on a live canvas. When the first version is done, check it like a brand manager would:
- Colors. Export the project and search the stylesheet for your hex values. Any color that isn't in your palette deserves a question.
- Logo. Is your logo in the navigation and footer, and is it the right version for the background behind it?
- Type. Heading and body families, weights and the size difference between them.
- Shapes. Button and card radii, borders and shadows.
- Voice. The copy is written for your business; read it against your voice rules.
Fix anything off with a plain-words prompt, such as "Use the accent only on primary buttons and links", or select the element on the canvas and change it.
When brand files aren't enough
- You have no tokens yet. Write the minimum: five colors by role, two fonts and one corner radius. It takes a few minutes and beats any adjective.
- Your brand depends on illustration or a distinctive photo style. FNJ has no stock-photo library and doesn't create illustrations; it leaves styled spaces and you upload your own images.
- You need your actual component library. The export is plain CSS with no component library. It follows your brand's look, not your React components, so a developer would need to map the sections onto your components if that's a requirement.
Build with your brand, not a guess at it
If your brand is already defined, the fastest way to an on-brand first draft is to hand it over as files. You can build with your brand files in FNJ's AI website builder for designers, refine the result on the canvas, and export a Next.js or HTML project. Agencies working from a client's brand kit can use the same folder approach; there's more on the agency workflow on the page for agencies building client sites.
Frequently asked questions
Can an AI website builder follow my brand guidelines exactly?
It can when you give it the guidelines as files with exact values: design tokens, CSS variables or a Tailwind config, plus a short written guide. FNJ's AI builder reads a project ZIP or folder like that and follows the brand, while descriptions in words leave the AI to guess.
What format should my brand guidelines be in for an AI builder?
Use machine-readable files for values, such as a tokens JSON file, a CSS file with custom properties or a Tailwind config, and a short Markdown or text file for rules like color usage and voice. Convert the important rules from a long PDF into a one-page text version.
Will the AI website builder use my real logo?
FNJ places your real logo when the project folder includes logo files. Name them clearly, such as logo.svg and logo-white.svg, and include only the versions you use on the web.
Does the exported site use Tailwind if I include my Tailwind config?
No. FNJ reads the Tailwind config for your brand values, but the exported project uses plain CSS per breakpoint with no Tailwind or component library.
Can I use my brand's own font?
FNJ's exported code loads fonts from Google Fonts, so a brand font that's on Google Fonts works directly. For a licensed commercial font, name a Google Fonts substitute in your guide and have a developer self-host the licensed files after export.