01 — The problem

Windsurf doesn't know your colors

Windsurf generates code fast. But it generates with default colors. Tailwind blue. Gray-50 backgrounds. Slate text. Your brand palette sits in a Figma file somewhere while Windsurf builds everything in its own aesthetic.

You correct it. It forgets. You correct it again. This is not a workflow. This is babysitting.

02 — The fix

One file. Permanent context.

Paletter exports a COLORS.md file. It contains your five curated colors with roles, contrast ratios, CSS variables, Tailwind tokens, and explicit usage rules.

Drop it in your project root. Windsurf reads project files for context. Your palette becomes part of every conversation. No plugins. No extensions. No configuration.

03 — What COLORS.md contains

Everything Windsurf needs to stay on brand

Roles

Background, Ink, Accent, Support, Neutral. Each color has a name, a hex code, and a job description. Windsurf knows what goes where.

Contrast ratios

WCAG AA and AAA scores for every foreground/background pair. Windsurf picks accessible combinations without guessing.

Code tokens

CSS custom properties and Tailwind v4 @theme tokens, ready to paste. Windsurf drops them straight into your stylesheet.

Usage rules

Explicit constraints. Never use accent on body text. Always maintain 4.5:1 contrast. Windsurf follows the rules you set.

04 — Setup

Three steps. Sixty seconds.

Generate your palette

Upload a cover, pick from color theory, or remix something you like. Paletter extracts five curated colors with assigned roles.

Export AI Palette

One click. You get a COLORS.md file with roles, hex codes, contrast ratios, CSS variables, Tailwind tokens, and usage rules.

Add to your project

Drop COLORS.md in your project root or add it to your Windsurf rules. Windsurf reads project files automatically. Done.

05 — Before / After

Same prompt. Different output.

Without COLORS.md

<button class="bg-blue-500 text-white
  hover:bg-blue-600 rounded-lg px-4 py-2">
  Get Started
</button>

With COLORS.md

<button class="bg-accent text-ink
  hover:bg-accent/90 px-4 py-2
  border-2 border-ink">
  Get Started
</button>

Generate your Windsurf palette

One file. Every session. Your colors, not Tailwind's defaults.

Generate your palette Learn about AI Palettes