Adopting a Theme

Pick a theme from the gallery, then integrate it into your project. The same tokens work across Tailwind v4, vanilla CSS, and any tool that reads DTCG JSON.

Install

pnpm add @syncupsuite/themes

The package includes all 12 themes. You import only the ones you need.

Tailwind CSS v4

Tailwind v4 uses CSS-first configuration. Import the theme's CSS file and wire tokens into your @theme block:

@import "tailwindcss";
@import "@syncupsuite/themes/swiss-international/tokens.css";

@theme {
  --color-primary: var(--color-primary-600);
  --color-background: var(--color-neutral-50);
  --color-foreground: var(--color-neutral-900);
}

Then use in markup:

<div class="bg-background text-foreground">
  <button class="bg-primary text-white">Action</button>
</div>

Vanilla CSS

Import the tokens file and use custom properties directly:

@import "@syncupsuite/themes/nordic-modern/tokens.css";

body {
  background-color: var(--color-neutral-50);
  color: var(--color-neutral-900);
}

a {
  color: var(--color-primary-600);
}

a:hover {
  color: var(--color-primary-700);
}

Any bundler that resolves node_modules imports works — Vite, webpack, esbuild.

DTCG JSON (Style Dictionary, Figma, etc.)

For design tooling or custom token pipelines:

import tokens from "@syncupsuite/themes/art-deco/tokens.json";

The JSON follows the Design Tokens Community Group specification. Compatible with Style Dictionary, Figma Variables (via DTCG import), and any DTCG-aware tooling.

TypeScript

Type definitions are included:

import type { ThemeMeta } from "@syncupsuite/tokens";

Semantic Aliases

Rather than using raw token values throughout your components, create semantic aliases. This decouples your UI from a specific theme and makes switching themes straightforward.

@import "@syncupsuite/themes/renaissance/tokens.css";

:root {
  --app-background: var(--color-neutral-50);
  --app-text: var(--color-neutral-900);
  --app-text-muted: var(--color-neutral-600);
  --app-border: var(--color-neutral-200);
  --app-accent: var(--color-primary-600);
  --app-accent-hover: var(--color-primary-700);
}

See Semantic Colors for the full pattern.

Requirements

• Node.js 18+
• For Tailwind: Tailwind CSS 4.0+
• For CSS import: any bundler that resolves node_modules