Using designtoken.md with Lovable

Q: How does Lovable read my designtoken.md?

Lovable reads your full project context. Place designtoken.md in your project root alongside any other context files, or paste its contents into the project system prompt under Settings. Lovable will automatically apply your color scales, typography, and component tokens to every component it generates.

1 Generate your token file

Generate your token file

Head to the designtoken.md generator and configure your design system:

Pick your brand colors and let the generator build full color scales
Configure typography: font families, sizes, and weights
Set spacing and border-radius values
Switch to the designtoken.md tab in the output panel
Copy the output or download the file

Open the generator →

2 Add tokens to Lovable

Add your tokens to Lovable

In your Lovable project, open Settings → Design System and paste the contents of your designtoken.md file. Alternatively, paste it into your project’s system prompt or context instructions.

# In Lovable Settings → Design System (or system prompt):

Paste the full contents of your designtoken.md file.
Lovable will treat it as the authoritative style guide
for all generated components, pages, and layouts.

You can also place designtoken.md directly in your project files within Lovable. Lovable reads your full project context, so having the file alongside your source code works just as well.

3 Build on-brand apps

Build: Lovable applies your tokens automatically

Once your tokens are loaded, every component Lovable generates will use your design system. Prompt naturally and Lovable will reference your color scales, typography, spacing, and component tokens:

// Example prompts in Lovable:

"Build a pricing page with three tiers."
→ Lovable uses your primary, secondary, and accent colors,
   your type scale, and your card + button tokens.

"Add a dashboard with a sidebar navigation and data cards."
→ Lovable applies your spacing scale, shadow tokens,
   and neutral palette for the layout.

The structured markdown format means Lovable can parse the token definitions deterministically. It reads the headings, tables, and code blocks to extract exact values for colors, spacing, typography, and components.

Before & after

See the difference tokens make in what Lovable outputs:

Without tokens (generic)

<button className="
  bg-blue-500 text-white
  px-4 py-2 rounded-md
">
  Get started
</button>

With designtoken.md

<button className="
  bg-primary-500 text-white
  px-[var(--space-lg)] py-[var(--space-sm)]
  rounded-[var(--radius-md)]
  font-semibold shadow-sm
  hover:bg-primary-600
">
  Get started
</button>

With tokens, every component Lovable generates uses your actual design values (your brand colors, your spacing scale, your radius preference) instead of arbitrary Tailwind defaults.

Tip

Lovable reads your full project context. Place designtoken.md in your project root alongside any other context files. Lovable will automatically apply your color scales, typography, and component tokens to every component it generates.

Best practices

Paste your tokens into Lovable’s Design System settings for the strongest enforcement. This ensures every generated component references your token values.
When prompting, you don’t need to repeat token names. Just describe what you want and Lovable will pull from the design system automatically.
Regenerate your designtoken.md when your design direction changes, then re-paste it into Lovable’s settings.
The visual reference section in your token file helps Lovable understand the intended aesthetic, not just the raw values, but the overall feel (warm, minimal, bold, etc.).
If you find yourself using the same tokens across multiple Lovable projects, turn them into a reusable design skill on skill.design so your design system follows you everywhere.

Frequently asked questions

How does Lovable read my designtoken.md?

Lovable reads your full project context. You can either paste the contents of your designtoken.md into Settings → Design System, add it to the project system prompt, or place the file directly in your project files. All three approaches give Lovable access to your complete token definitions.

Can I use designtoken.md with Lovable's Design System settings?

Yes. Lovable has a built-in Design System panel under Settings. Paste your designtoken.md content there and Lovable will treat it as the authoritative style guide for all generated components, pages, and layouts.

Does Lovable apply the full color scale?

Yes. The structured markdown format of designtoken.md lets Lovable parse and apply specific scale values like --color-primary-100 through --color-primary-900, along with typography, spacing, radius, and elevation tokens, rather than just a single brand color.

Generate your designtoken.md →