01 — The problem

Bolt builds fast. In the wrong colors.

Bolt generates full-stack apps in seconds. Authentication, database, API routes, UI components. All wired up. All functional. All in Bolt's default color scheme.

Now you have a working app that looks like every other Bolt app. Restyling an entire generated codebase after the fact takes longer than building it. The colors should have been right from the start.

02 — The fix

One file saves hours of restyling.

Include your color tokens in the Bolt prompt or add COLORS.md to your project. Bolt reads the context and generates every component, every page, every surface with your colors.

Five curated colors with roles. CSS variables. Tailwind tokens. Contrast ratios. Usage rules. Bolt gets it right the first time because you gave it the right information.

03 — What COLORS.md contains

Everything Bolt needs to build on brand

Color roles

Background, Ink, Accent, Support, Neutral. Five colors with clear responsibilities. Bolt applies them to layouts, buttons, text, and surfaces correctly.

Contrast ratios

Pre-computed WCAG AA and AAA scores. Bolt generates accessible color combinations from the start. No manual auditing after the fact.

CSS variables

Custom properties ready for any framework. Bolt generates full-stack apps. Your tokens go into the global stylesheet once and cascade everywhere.

Usage rules

Explicit constraints that prevent color misuse. Accent for CTAs only. 4.5:1 minimum for text. Bolt follows the rules. You skip the restyle.

04 — Setup

Three steps. Colors from the start.

Generate your palette

Upload a cover, use color theory, or remix something you like. Paletter gives you five curated colors with assigned roles.

Export AI Palette

One click. Roles, hex codes, contrast ratios, CSS variables, Tailwind tokens, and usage rules. All in one file.

Include in Bolt

Paste the CSS variables into your Bolt prompt or include COLORS.md in your project. Bolt reads the context and generates on brand.

05 — Before / After

Same app. Different identity.

Bolt without your palette

:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --primary: #2563eb;
  --secondary: #64748b;
  --border: #e2e8f0;
}

Bolt with your palette

:root {
  --background: #F5DBC1;
  --foreground: #583819;
  --primary: #FC6911;
  --secondary: #9A7658;
  --border: #D9B89D;
}

06 — Why it matters

Bolt creates entire projects. Get it right from line one.

Most AI tools generate one component at a time. Bolt generates entire applications. That means the color problem multiplies. Every page, every layout, every component uses the wrong palette.

Fixing colors after generation means touching every file. Including your palette before generation means touching zero files. One file at the start. Zero restyling at the end.

Generate your Bolt palette

One file. Every Bolt project. Your brand from the first line of code.

Generate your palette Learn about AI Palettes