Before you build a page, build your brand. A brand kit locks in your colors, fonts, and visual personality so every part of your site feels like it belongs together — and so you never have to describe "your style" twice.
Most people start an AI website project by describing a page: "Build me a homepage for my yoga studio." That works — but you'll spend the next ten conversations nudging colors and fonts until they feel right, and the result rarely feels fully intentional.
The better approach is to spend five minutes up front establishing your brand kit — a set of agreed decisions about color, typography, and personality that the AI carries forward into every page it builds. One conversation to define it. Zero negotiating on every subsequent request.
Who this guide is for
This guide is especially useful if you already have some sense of your brand — or want to discover it through a guided conversation with the AI. If you have an existing logo or color palette, start with Working with assets to upload it first.
What a brand kit actually is
A brand kit is a short, shared reference document — usually created right inside your Ullbek site — that captures the core visual decisions for your project. Think of it as the instructions you'd hand to a designer on day one.
What a brand kit contains
Color palette
3–5 hex codes with roles: a primary (buttons, accents), a background, a text color, and optionally a secondary accent and a "surface" card color. Colors define mood faster than any other element.
Font pairing
2 typefaces — one for headings (personality, authority), one for body text (readability, warmth). Optionally a third mono or utility font for labels and UI elements.
Visual personality
3–5 adjectives that describe the feel: modern, warm, authoritative, playful, minimal. These shape spacing, border-radius, shadows, and layout density.
Button style
Shape and treatment — sharp corners vs. rounded pills, solid fill vs. outline, shadow vs. flat. One decision that instantly signals your brand's personality.
Image direction
Photo vs. illustration, warm vs. cool, editorial vs. candid. Optional but powerful for sites that use a lot of imagery.
"A brand kit isn't a constraint — it's a shortcut. Every page you build after this will feel like it was designed by the same person."
Step 1 — Choose your colors
Start here. Color does more perceptual work than any other design element. The goal is to pick 3–5 colors with clear roles, not a rainbow of options you'll never consistently use.
Copy and paste one of these prompts to get started. Adapt the words in bold to describe your project:
Copy-paste prompt — Colors from personality
I want to create a color palette for my brand. My business is a [yoga studio / legal consultancy / bakery / etc.] and I want the site to feel [calm and earthy / bold and confident / warm and welcoming / crisp and minimal]. Please propose a palette with 4–5 colors: a primary brand color, a background color, a text color, one accent, and one light surface color for cards. Show me the hex codes and give each color a role name. Then create a small HTML color swatch demo so I can see them together.
Copy-paste prompt — Colors from an existing brand
My logo uses the color [#2A5C8E / "deep forest green" / "terracotta orange"]. Build a full 4-color palette around it — keep my primary color and generate a harmonious background, text color, and one supporting accent. Tell me what mood each choice creates and show me a live swatch preview in HTML.
Tip: ask for 3 options
Add "Give me 3 different palette options — one safe, one bold, one unexpected" to any color prompt. You'll see what the full spectrum of possibilities looks like before committing.
Step 2 — Pick your fonts
Typography is the voice of your brand — before anyone reads a single word, they've already formed an impression from your typefaces. A classic pairing uses a display font for headings (strong personality) and a text font for body copy (neutral, readable).
Copy-paste prompt — Font pairing from scratch
Recommend a Google Fonts pairing for my brand. The brand feels [editorial and sophisticated / friendly and approachable / bold and modern / classic and trustworthy]. I want: one heading font (for H1–H3) and one body font (for paragraphs and UI). Show me a live HTML preview using those fonts — with a sample heading, a paragraph, and a button — so I can see how they look together at real size.
Copy-paste prompt — Compare font pairings side by side
Show me 3 different Google Fonts pairings side by side in a single HTML page. Use the same sample text for each — a heading, a short paragraph, and a CTA button — so I can compare them fairly. The three should range from classic serif, to modern sans-serif, to something with more character. Label each with the font names and a one-line description of the mood it creates.
Step 3 — Define your visual personality
Colors and fonts set the stage, but visual personality is what makes your brand feel truly intentional. This is where you tell the AI how corners should be shaped, how much breathing room things need, whether shadows are deep or flat, and what your buttons feel like to click.
Based on my palette (insert your colors here) and fonts (insert your fonts here), define a set of visual personality rules for my site. Specifically, recommend: border-radius for buttons and cards (sharp / slightly rounded / pill-shaped), shadow style (none / soft / dramatic), spacing density (tight / balanced / airy), and a button style (filled / outlined / ghost). Build a small HTML widget library showing a button, a card, and an input field using these rules — so I can see the full UI feel before we build any pages.
Step 4 — Save your brand kit to the site
Once you're happy with your colors, fonts, and personality, save everything as a living document inside your Ullbek site. This is the single most important step — it means the AI can refer back to it on every future request, without you having to re-describe anything.
Copy-paste prompt — Save brand kit as CSS variables + internal page
I've approved these brand decisions: colors are [paste your hex codes and role names], fonts are [heading font name] for headings and [body font name] for body, buttons are [rounded / sharp / pill] with [solid fill / outline], and the overall feel is [3 adjectives]. Please: (1) Define these as CSS custom properties in our shared stylesheet. (2) Create a brand kit reference page at /_internal/brand-kit.html that documents all the choices visually — with live color swatches, font previews, button examples, and card examples. This will be our brand reference going forward.
Why save it as CSS variables?
When your colors live as CSS custom properties (e.g. --primary: #2A5C8E), changing your brand color later means editing one line, and every button, border, and accent on every page updates automatically. Never hardcode hex values in individual page styles.
Step 5 — Generate sample pages to validate the kit
Before you commit fully, it's worth asking the AI to build a sample layout using your brand kit. This is the real test — seeing colors, fonts, and personality working together in an actual page context, not just a swatch grid.
Copy-paste prompt — Sample hero section
Using our brand kit, build a sample hero section at /_internal/brand-test.html — not a real page, just a test. Include: a headline using our heading font, a subheading, a paragraph of placeholder body copy, and a primary + secondary button. Apply our color palette and visual personality rules. I want to see how the brand actually feels at page scale before we start building real pages.
Copy-paste prompt — Sample blog / article layout
Build a sample blog post layout using our brand kit. Use placeholder Lorem Ipsum content — just enough to see how a long-form article looks: a hero area, a two-column layout with article body on the left and a sidebar on the right, section headings, a blockquote, and a CTA section at the bottom. Save it to /_internal/brand-blog-test.html.
Copy-paste prompt — Widget library
Create a UI component library page at /_internal/brand-widgets.html using our brand kit. Include examples of: buttons (primary, secondary, ghost), form inputs (text field, dropdown, checkbox), cards (with image, title, body, and a link), a notification / alert box (success, warning, error), a navigation bar mockup, and a footer mockup. This is our internal component reference — it doesn't need to be linked from any page.
Five real businesses — five brand kits
The best way to find your direction is to see a brand kit actually applied to a real type of business. Each example below is a distinct industry — click through and notice how every choice (colors, fonts, button style, tone) is driven by what that business needs to communicate.
Click a business to preview its kit
Bloom & Co. · Wellness & Massage
Feel at home in your body.
We offer a quiet place to slow down, restore, and reconnect — through massage, guided breathwork, and personalised wellness programmes designed around you.
Dark backgroundMint green on midnightRounded-corner cardsSubtle glow accentsSingle sans-serif font
Madeleine · Pâtisserie & Café
Baked with care. Eaten with joy.
Every pastry at Madeleine starts with French technique and ends with something entirely our own — small-batch, seasonal, and made here every morning before you arrive.
We design buildings and interiors around the people who will inhabit them — drawing on natural light, honest materials, and the quiet geometry of how things fit together.
Warm stone & plaster tonesLight-weight sans headingsZero border-radiusWide letter-spacing labelsMaximum whitespace
PlayStack · Learning for Ages 5–12
Learning feels like play. ✨
PlayStack turns maths, reading, and science into adventures your child actually asks for — short bursts, big rewards, and progress parents can actually see.
Notice how each kit makes sense for its business — not just visually, but functionally. The fintech app earns trust with restraint and precision; the kids app earns attention with energy and warmth. Your brand kit should work the same way: every choice in service of how you want your visitors to feel.
You don't have to match any of these exactly
These are starting points, not templates. You might say "something like the wellness studio kit, but cooler and more modern" or "the architecture firm's restraint, but with a warmer palette." The AI will interpret any combination — that's the whole point of working in plain language.
Updating your brand kit later
Brand decisions aren't permanent. You might change your mind about a color after seeing it on ten pages, or discover a better font pairing after looking at a competitor's site for inspiration. The key is keeping your brand kit in sync with those changes.
Update the CSS variables first. Since all your colors live as custom properties, one edit ripples through the entire site.
Update the /_internal/brand-kit.html reference page. So your documentation stays current and the AI uses the right values on its next session.
Ask for a site-wide review. Say: "We've updated our primary color from [old] to [new] — check all pages and make sure everything still looks right." The AI will scan for anything that was hardcoded or that might need adjustment.
Ready to build your brand kit?
Open Ullbek and paste your first prompt. The AI will walk you through the rest — colors, fonts, and everything in between.
