Catppuccin, Dracula and Tokyo Night in Figma: turn an editor theme into variables

If your team already lives in Catppuccin or Dracula, the product UI can borrow the same colors. The trick is that an editor theme is built for syntax highlighting, not for buttons and form fields, so you can't drop its hex codes into Figma and call it a design system. Put the theme's raw colors into a primitives collection, create semantic roles on top with a Light and a Dark mode, and point each role at a theme color that still passes contrast in that mode.

Below: which variant of each theme becomes your Light and Dark mode, a role map you can copy, and the pairs that fail WCAG AA (there are a few, mostly in the light variants).

Pick a light and a dark variant first

Most of these themes ship a light partner, which saves you from inventing one:

Sources: Catppuccin palette, Dracula spec, Tokyo Night VS Code theme README, one-dark-syntax, one-light-syntax.

For Catppuccin, Latte plus Mocha is a safe default: it's the pairing Catppuccin's own browser userstyles preselect for light and dark. Frappé and Macchiato are softer dark options if Mocha feels too heavy.

Step 1: primitives, one collection per theme family

Create a collection called Theme and add every color from both variants as variables with a single mode, grouped by variant: latte/base, latte/text, latte/blue, mocha/base, mocha/text, and so on. Keep the theme's own names. Catppuccin has 26 named colors per flavor, Dracula's spec lists 12 tokens per variant, and Tokyo Night's README lists its colors by what they color in the editor.

Two notes:

• Name by the theme's names, not by role. mocha/surface0 stays meaningful if you later change which role uses it.
• Hide primitives from publishing if you share the library, so designers pick roles, not raw theme colors.

Step 2: semantic roles with Light and Dark modes

Create a second collection, Semantic, with two modes, Light and Dark. Each role aliases a primitive per mode. Catppuccin publishes a style guide that already assigns colors to interface jobs (Base for the main background, Text for body copy, Blue for links, Red for errors), so for Catppuccin most of the map comes from the maintainers:

Editor themes rarely define enough neutral surfaces for an app. Catppuccin is the exception, with Crust, Mantle, Base and three Surface and three Overlay steps. For Dracula and Tokyo Night you'll usually add one or two surface colors of your own, between the background and the selection color, and keep them in the primitives collection with a clear prefix like custom/.

For the mechanics of adding modes and aliasing, see our variable modes setup guide. Modes need a paid Figma plan; on Starter, see what works on the free plan. If you're unsure where primitives end and roles begin, primitive vs semantic tokens covers the split.

Step 3: test the pairs, especially in light mode

Editor themes are tuned for code on one background, and some colors are meant to recede. Tokyo Night's README is upfront about it: "Many UI elements are intentionally low contrast so as not to distract." That's fine for a comment in an editor and a problem for a form label.

We calculated WCAG 2 contrast ratios for the pairs most likely to cause trouble, using the hex values from each theme's official source:

What to do with the failures:

• Secondary text: in Latte, use Subtext 1 or Text instead of Subtext 0. In Dracula and Tokyo Night, don't use the comment color for body-size secondary text; add a lighter custom step.
• Links in Latte: Blue is just under 4.5:1 on Base. Underline links so color isn't the only signal, and consider a slightly darker custom blue for small text.
• Status colors in Latte: Green and Yellow work as fills (badges, banners) with dark text on them, not as text on Base.
• Button labels: Catppuccin's guide uses Base as the "on accent" color. That passes in Mocha but not on Latte Blue, where white text does.

Catppuccin's own guide makes the same point: its text colors are guidelines, and legibility comes first. Our accessible color palette guide covers the WCAG thresholds and the Figma tools for checking pairs.

Plugins that import editor palettes

We read both listings' user counts on October 25, 2026.

• Catppucin (1,325 users) imports Catppuccin palettes into a Figma file. It covers the palette itself; the roles and modes above are still yours to set up. Its listing was last updated in January 2025.
• Format Code (14,121 users) is for a different job: it styles code snippets in Figma with editor themes, including Catppuccin Latte and Mocha, Dracula, One Dark Pro and Tokyo Night. Handy for docs and marketing frames, but it doesn't create variables.
• For Dracula, Tokyo Night and One Dark palettes as variables, copying the hex values from the official sources linked above works fine; it's 12 to 20 colors per variant.

Where Huekit fits

Huekit, our plugin, can start from an editor theme (Dracula, Catppuccin, Tokyo Night or One Dark) as well as from your own colors or a design-system preset. Whichever source you pick, the output is the same set of Figma assets: scales, a semantic layer, foundations, sample components and docs pages. On paid plans you can also add typography styles and full foundations, and blend an editor theme with a preset's foundations. Review the generated pairs against the table above, since editor colors are tuned for code. See huekit.io for what each plan includes.

FAQ

Is there a Catppuccin palette for Figma?

Yes. The community plugin Catppucin imports Catppuccin palettes, and Catppuccin's palette page lists every color in hex, RGB, HSL and OKLCH for manual setup.

Which Catppuccin flavor should I use for light mode?

Latte, which is Catppuccin's only light flavor. Pair it with Mocha, Macchiato or Frappé for dark mode.

Does Dracula have a light theme?

Yes. The Dracula spec lists Alucard Classic as its complementary light theme, with its own background, foreground and accent values.

Can I use editor theme colors for UI text?

Some of them. Main text colors pass easily, but comment and muted colors often fall below 4.5:1, and several Latte accents fail as text on the light background. Test each role in both modes before you ship.

Will this work on Figma Starter?

Partly. Variables work on every plan, but a Light and a Dark mode in one collection needs a paid Figma plan.

Start with one role

Pick your theme pair, add text/secondary with a value for each mode, and check it against bg/page in both. If that role passes, the rest of the map is mostly copying the theme's own guidance.