The short answer
AI hardcodes colors because it was never given yours, so it falls back to the most common palette in its training data. The fix has three parts, in this order: define your tokens first so there is something to point at, name those variables in the prompt, and check the output before it becomes forty sections. Prompting helps but does not stick between sessions, so on a site you maintain for years the durable answer is a tool that reads your system instead of being told about it.
When we tested the native AI in Bricks 2.4, the section it generated was genuinely good: clean structure, sensible hierarchy, real responsive breakpoints. Then we looked at the colors. Every one was a raw hex value, and there was not a single CSS variable in the entire output.
That is not a Bricks problem. It is what almost every AI tool does by default, and it is the single fastest way to dismantle a design system you spent an afternoon building. Here is why it happens and what actually stops it.
Why does AI pick colors you never chose?
The colors in our test were #2563eb, #0f172a, #93c5fd and #cbd5e1. If they look oddly familiar, that is because they are Tailwind's default blue and slate palette, which makes them close to the most common colors on the modern web and therefore the most likely thing to appear in a model's training data.
This matters because it reframes the problem. The model was not overriding your brand; it never saw your brand. Asked to produce a hero section with no further context, it produced the average hero section of the internet, and the average hero section is Tailwind blue. Every AI tool works this way unless something in the pipeline hands it your actual values.
Good to know
The same logic explains the other defaults you may have noticed: generic spacing, a system font stack, border radius values you did not pick. None of it is a judgment about your design. It is the statistical middle of the road filling a gap where your information should have been.
Why is a hardcoded color worse than a wrong color?
A wrong color is a five-second fix. A hardcoded color is a debt.
When your brand color lives in a variable, changing it is one edit and the whole site follows. When it is pasted as a hex value into forty AI-generated sections, changing it means finding all forty, and you will miss two. That is the exact afternoon design tokens exist to prevent, and it arrives faster with AI than without it, because generating forty sections now takes an afternoon rather than a month.
There is a subtler cost too. A section built from raw values cannot inherit anything later. Switch your framework, adjust your spacing scale, add a dark mode, and every hardcoded section sits there unchanged, an island you now maintain by hand.
Fix one: give the AI something to point at
You cannot ask a tool to use your variables if your variables do not exist yet. This sounds obvious and it is the step people skip, because generating a section is more fun than defining six colors.
Bricks has supported design tokens natively since the 2.2 Style Manager, so the starter set costs nothing: four to six color roles, a spacing scale, three or four font sizes. Our plain-English guide to design tokens walks through exactly what to define and how to name it. Do that once, before the first generation, and every fix below becomes possible. Skip it, and there is nothing for any tool, or any prompt, to aim at.
Fix two: name the variables in the prompt
The cheapest intervention, and worth doing every time. Do not write "use my brand colors", because the model has no way to look them up. Write the names:
Use only these CSS variables for color, never hex values:
--primary for buttons and links
--text for body copy
--surface for card and section backgrounds
--border for dividersBeing explicit about the prohibition matters as much as the list. "Never hex values" gives the model a rule it can follow; a list of variables on its own often produces a section that uses two of them and invents the rest.
Now the honest limitation, which we ran into in the same test: this does not persist. Every new session starts blank, so you re-explain your setup each time, and the one section you generate in a hurry at the end of a Friday is the one that ships with Tailwind blue in it. Prompting is a discipline, not a fix, and disciplines fail exactly when you are busy.
Fix three: check the output while it is still one section
Make this a habit before pasted sections multiply. Right after a generation, scan for three things:
- Raw hex values anywhere in the color fields. Every one is a value that will not follow your next brand change.
- Spacing that does not match your scale. A 23-pixel gap in a site built on multiples of 8 is a tell that the section came from somewhere else.
- Buttons and links. In our test both call-to-action buttons were link elements with no destination. They looked perfect and did nothing, which is the kind of thing that goes unnoticed for two weeks.
Fixing one section takes a couple of minutes. Fixing forty is a project. The entire value of this habit is that it keeps you permanently in the first situation.
How do you repair sections that already have the problem?
Mechanically, and in priority order. Start with the values that repeat most, because they buy the most freedom per edit: the brand color first, then body text, then the surface behind cards, then borders. Replace each raw value with the variable holding the same decision.
Two cautions worth stating plainly. Work one section at a time and look at it after each one, because a color that looked identical in two places sometimes turns out to have been doing two different jobs. And if a hex value does not map cleanly onto any token you have, that is information: either you are missing a role, or the AI invented a shade nothing on your site needs. Both answers are useful, and neither is solved by adding a token per hex value.
What actually solves this for good?
Everything above is you compensating for missing information. It works, and it is worth doing whatever tool you use. But notice the shape of the problem: the tool writes first and you correct afterward, every time, forever.
The structural answer is a tool that reads your design system before it writes, so there is nothing to correct. We build one, so weigh this paragraph accordingly: Bricksfusion Studio reads your framework setup and generates with its variables, whether that is ACSS, Core Framework, Advanced Themer or Bricks native tokens from your Style Manager. On a project with no framework it applies a disciplined six-role palette with contrast that is checked rather than assumed.
The point is not which tool you pick. It is that on a site you will maintain for years, a system that depends on you remembering a paragraph of prompt every session is a system that will eventually let something through.
Bottom line
AI hardcodes colors because nobody gave it yours. Define your tokens before you generate anything, name them explicitly in the prompt, and check each section while it is still one section rather than forty. Those three habits cost nothing and will carry you a long way with any tool. And if you find yourself writing the same paragraph of variable names into every new session, that is not a discipline problem. That is the tool asking you to do its homework.
FAQ
Questions about this topic
Why does AI keep using blue and gray colors I never chose?
Because those are the statistically most common colors in its training data. In our own Bricks 2.4 test the generated section came back with #2563eb, #0f172a, #93c5fd and #cbd5e1, which are Tailwind’s default blue and slate. The model was not ignoring your palette on purpose; it was never given it, so it fell back to the most likely colors on the internet.
Can I just tell the AI to use my variables in the prompt?
It helps, and it is the cheapest thing to try. Name the exact variables and say to use them instead of hex values. The catch we found in testing is that it does not stick: you have to re-explain your setup in every new session, and a long prompt is easy to forget on the one section you generate in a hurry.
How do I fix a section that already has hardcoded colors?
Work through the section replacing each raw color with the variable that holds the same decision, starting with the ones that repeat most: the brand color, the text color, the surface behind cards. It is tedious but mechanical, and every value you convert is one you never have to hunt again.
Does this happen with every AI tool?
It happens with any tool that has not been given your design system, which includes general assistants like ChatGPT or Claude writing CSS in a chat window. The fix is always the same in principle: the tool has to know your variable names before it writes, either because you told it or because it read them from your site.