The complete toolkit for theming — generate and manage design tokens with ease.

Pigmenta is a lightweight, powerful toolkit for theming and design token management.
It helps you define color palettes, tokens, and outputs ready-to-use Tailwind or CSS themes automatically.

Perfect for UI libraries, monorepos, and multi-theme applications.

• ⚙️ Automatic theme generation (CSS or Tailwind)
• 🌗 Light / Dark mode ready
• 🧩 Extendable configs for shared theming in monorepos
• ⚡ Vite plugin support for real-time updates
• 🔄 Watch mode to auto-generate themes on file change
• 🧠 Typed configuration with auto-completion
• 🪄 Simple CLI for setup and management
• 💡 VS Code extension for token previews and theme sync
• 🎨 Figma plugin to import/export tokens visually

# with npm
npm i pigmenta -D

# or yarn
yarn add pigmenta -D

# or pnpm
pnpm add pigmenta -D

Create your theme config:

npx pigmenta init

This creates a pigmenta.config.js file and a .pigmenta directory with type definitions.

Example config:

/** @type {import('./.pigmenta/types').Config} */
export default {
	options: {
		output: 'tailwind',
		dest: './src',
		default: 'light',
		tokenPrefix: 'color',
	},
	pallets: {
		neutral: {
			titanium: {
				shade: {
					0: '#101113',
					10: '#181A1C',
					20: '#2E3033',
				},
			},
		},
	},
	tokens: {
		back: {
			light: 'neutral-titanium-shade-95',
			dark: 'neutral-titanium-black',
		},
	},
};

npx pigmenta watch

This will automatically generate your Tailwind or CSS theme files based on your config.

Pigmenta ships with a Vite plugin for live updates while developing.

import { defineConfig } from 'vite';
import { pigmentaVitePlugin } from 'pigmenta/vite';

export default defineConfig({
	plugins: [sveltekit(), pigmentaVitePlugin()],
});

You can extend other Pigmenta configs to share tokens and palettes across packages — ideal for monorepos or design systems.

export default {
	options: {
		output: 'tailwind',
		dest: './src',
		default: 'light',
		extend: ['../../pigmenta.config.js'],
	},
	pallets: {},
	tokens: {},
};

• Build a shared design system for multiple apps
• Sync theme tokens between design and code
• Quickly prototype dark / light modes
• Generate Tailwind-ready themes from your tokens

The Pigmenta Figma Plugin lets designers export color tokens directly from Figma into a ready-to-use Pigmenta config file.

No more manual syncing — generate .pigmenta token structures straight from your design system and keep your codebase perfectly aligned.

👉 Install from Figma Community

Key Features:

• 🎨 Export colors, palettes, and shades from Figma
• 🔄 Generate Pigmenta-compatible tokens automatically
• 🧩 Stay consistent between design and development

The Pigmenta VS Code Extension enhances your workflow with smart syntax highlighting and color awareness.

It recognizes Pigmenta token names, highlights their values, and gives you quick color previews inline — making theme editing intuitive and visual.

👉 Download from Visual Studio Marketplace

Key Features:

• 🌈 Smart syntax highlighting for tokens
• 🧠 Inline color previews and hover info
• ⚙️ Works seamlessly with your pigmenta.config.js

Together, the Figma plugin and VS Code extension close the loop between design and development, keeping your themes in perfect sync 🎯

Contributions are always welcome! Please read the contributing guide before submitting PRs.

• Mostafa Kheibary (@taker)
• Community contributors 💛

Licensed under the MIT License.

Built with love and a bit of pigment 🎨