01 — The problem

Cursor has no idea what your brand looks like

You ask Cursor to generate a component. It reaches for bg-blue-500, text-gray-700, and border-gray-200. Default Tailwind. Every single time.

It is not Cursor's fault. It generates components based on context. If your codebase has no color system documented in a way Cursor can read, it falls back to what it knows: Tailwind defaults.

You paste hex codes into the chat. It works for that component. Next prompt, it forgets. You are the color memory. That should not be your job.

02 — The fix

COLORS.md in your workspace. Done.

Cursor indexes every file in your workspace. Drop COLORS.md in your project root and it becomes part of the context Cursor draws from when generating code.

Want even stronger enforcement? Put it in .cursor/rules/. Files in that directory are treated as explicit instructions. Cursor will prioritize your color system the same way it prioritizes your linting rules or TypeScript config.

No extension to install. No settings to change. A markdown file in the right place. That is the entire integration.

03 — Setup

Three steps. Two minutes.

Generate a palette

Extract from an image, build from color theory, or pick from our inspiration library. Any method gets you a complete color system.

Export as AI Palette

Hit the "AI Palette" export button. Downloads a COLORS.md file with roles, tokens, contrast ratios, and usage rules.

Drop in your project

Move COLORS.md to your project root. Cursor indexes it automatically. Or add it to .cursor/rules/ for explicit rule-based context.

Two placement options

Project root: Cursor indexes it as part of your codebase context. Works well for most projects.

.cursor/rules/ directory: Cursor treats it as an explicit instruction. Stronger enforcement, especially useful when you want every generation to follow your palette without exception.

04 — What Cursor gets

Everything it needs to stay on brand

Roles table

Background, Ink, Accent, Support, Neutral — each mapped to a hex value with a plain-English description of when to use it.

Contrast matrix

Pre-computed WCAG AA/AAA ratios for every meaningful color pair. Cursor makes accessible choices without calculating anything.

CSS variables

A complete :root block with custom properties. Cursor drops them into your stylesheet verbatim.

Tailwind tokens

A @theme block ready for Tailwind v4. Or extend config for v3. Copy-paste into your config file.

Usage rules

Explicit constraints. Never use accent on body text. Always maintain 4.5:1 contrast on interactive elements. Cursor follows them.

Color formats

Hex, RGB, HSL, and OKLCH for every color. Cursor picks the right format for whatever context it is writing.

05 — Before vs after

The difference is immediate

Before — no COLORS.md

<div class="bg-blue-500 text-white rounded-lg p-6">
  <h3 class="text-lg font-semibold">
    Feature
  </h3>
  <p class="text-blue-100 mt-2">
    Description of this feature.
  </p>
  <a href="#" class="text-white underline
    mt-4 inline-block">
    Learn more
  </a>
</div>

Generic Tailwind defaults. Cursor guessing. No brand connection.

After — with COLORS.md

<div class="bg-[var(--color-bg)] text-[var(--color-ink)] p-6">
  <h3 class="text-lg font-semibold">
    Feature
  </h3>
  <p class="text-[var(--color-support)] mt-2">
    Description of this feature.
  </p>
  <a href="#" class="text-[var(--color-accent)]
    underline mt-4 inline-block">
    Learn more
  </a>
</div>

Your actual tokens. Correct roles. Accessible contrast.

Generate your Cursor palette

One file. Every generation. Your colors, always.

Generate your palette Learn about AI Palette