You already knew it was ignoring you
You've typed “use my brand colors” in the Cursor chat. You've said “match the existing style.” You've even pasted a hex value and watched it generate a component with a completely different color. None of this is surprising. Cursor isn't ignoring you out of spite. It just doesn't have a structured place to find your design decisions.
The .cursorrules file is that structured place. Cursor reads it as persistent context for every interaction. Put your design tokens there with explicit rules, and the guessing stops.
The format that works
Vague instructions get vague results. “Use a clean, modern aesthetic” means nothing to an LLM. Here's what actually constrains output:
# Design System — DO NOT DEVIATE
## Colors
- Background: #0F0F10
- Surface: #1A1A1E
- Border: rgba(255, 255, 255, 0.06)
- Text primary: #F0F0F0
- Text muted: rgba(240, 240, 240, 0.5)
- Accent: #5B5BD6
- Accent hover: #6E6ADE
## Typography
- Headings: Inter, weight 600, tracking -0.025em
- Body: Inter, weight 400, size 15px, line-height 1.6
- Mono: Geist Mono for code blocks
## Shape
- Border radius: 6px (buttons, inputs, cards)
- Border radius small: 4px (badges, chips)
## Rules
- NEVER invent colors. Only use the values above.
- NEVER use Tailwind color utilities (bg-blue-500, text-gray-400).
Use CSS variables or the exact hex values listed.
- Accent color is for interactive elements ONLY.
Do not use it for decorative purposes.
- Shadows: 0 1px 2px rgba(0,0,0,0.3) for subtle,
0 4px 12px rgba(0,0,0,0.4) for elevated.Notice the difference. Every value is a specific number. Every rule says what NOT to do. LLMs respond to constraints better than encouragement. Tell it what to avoid and it listens.
Why “rules” matter more than values
The token values are necessary but not sufficient. Without behavioral rules, Cursor will use your #5B5BD6 accent in places it shouldn't. It'll put accent backgrounds on informational cards. It'll use your heading font for body text. It knows the values exist but doesn't know the intent behind them.
The rules section is where you encode intent:
• “Accent is for interactive elements ONLY” prevents decorative accent abuse.
• “NEVER use Tailwind color utilities” forces reference to your actual tokens.
• “Surface is for elevated containers, not page background” establishes spatial hierarchy.
Think of values as the vocabulary. Rules are the grammar.
Input quality vs output quality
This article is about controlling what comes out of Cursor. The existing guide on creating a design system in .cursorrules covers the architecture. Different angle, same file.
The architecture article answers: “How do I structure a design system inside .cursorrules?”
This article answers: “How do I stop Cursor from making ugly components?”
The answer to the second question is always the same. Give it better input. Specific values. Explicit constraints. Behavioral rules that say “never” and “only.”
The fastest way to get a good .cursorrules
Writing 30 lines of design tokens from scratch means making 30 design decisions. Which accent color. Which font pairing. What radius says the right thing. That's the hard part. The file format is easy.
SeedFlip exports directly to .cursorrules format. Pick a seed from the archive, hit export, and you get the complete token block with behavioral rules already written. Drop it in your project root and Cursor starts generating components that look intentional.
For the full .cursorrules architecture guide, read Cursor Rules Design System: The .cursorrules File That Actually Works. For a cross-tool comparison covering Claude, Cursor, and Windsurf, see Design Tokens to IDE Rule Files.