Documentation

Configuration

Designers is highly configurable. You can enable or disable tokens, set your default theme, and configure integrations for Tailwind, Figma, and more. The designers.config.json file lives at the root of your project and is auto-generated by the CLI.

  • Toggle which tokens are generated (colors, spacing, radius, etc.)
  • Set your default theme mode (light, dark, or system)
  • Enable integrations for Tailwind, Figma, and VS Code
Tip: After editing designers.config.json, re-run npx designers init to update your setup.

Sample designers.config.json

// designers.config.json
{
  "theme": "light",
  "tokens": {
    "colors": true,
    "spacing": true,
    "radius": true
  },
  "integrations": ["tailwind", "figma"]
}

Configuration Options

  • theme: "light" | "dark" | "system" — Default color mode
  • tokens: Enable/disable token categories (colors, spacing, radius, etc.)
  • integrations: Array of integrations to enable (e.g., "tailwind", "figma")
Pro Tip: You can version control your config and share it across teams for consistent design systems.

What's Next?

Quick StartDesign TokensTheming