Quick Start
Get from zero to themed UI in five steps. The same tokens work in Vite, Cloudflare Workers, Next.js, or any bundler that handles CSS imports.
1. Install
pnpm add @syncupsuite/themesOr with npm/bun:
npm install @syncupsuite/themes
# or
bun add @syncupsuite/themes2. Pick a Cultural Identity
Twelve design identities, each grounded in a real design tradition. Browse the gallery for color previews, or pick from the list:
| Slug | Origin |
|---|---|
swiss-international | International Typographic Style, Switzerland |
nihon-traditional | Japanese calligraphy, woodblock printing, temple architecture |
nordic-modern | Scandinavian democratic design and natural materials |
tang-imperial | Tang Dynasty China -- silk, lacquer, jade |
shuimo-modern | Chinese ink wash painting (shuimo hua) |
nihon-minimal | Wabi-sabi and ma (negative space) |
renaissance | Italian Renaissance frescoes and illuminated manuscripts |
art-deco | Jazz Age geometry -- Chrysler Building, Tamara de Lempicka |
wiener-werkstaette | Vienna Workshops, Josef Hoffmann and Koloman Moser |
milanese-design | Italian industrial design -- Olivetti, Gio Ponti, Sottsass |
de-stijl | Mondrian and van Doesburg -- primary colors, black lines |
swiss-modernist | Swiss graphic design -- Helvetica era, signal red, strict grid |
3. Import the CSS
Each theme ships as CSS custom properties and Tailwind v4 @theme output. Pick the format that matches your stack.
/* In your main CSS file */
@import "@syncupsuite/themes/swiss-international/tailwind.css";/* In your main CSS file */
@import "@syncupsuite/themes/swiss-international/tokens.css";import tokens from "@syncupsuite/themes/swiss-international/tokens.json";
import meta from "@syncupsuite/themes/swiss-international/meta.json";Replace swiss-international with any slug from the table above.
4. Use the Tokens
Every theme provides the same semantic token API. Your components stay the same -- swap the import and the entire palette changes.
<!-- Tailwind classes map directly to theme tokens -->
<div class="bg-canvas text-foreground border-border">
<h1 class="text-foreground font-heading">Dashboard</h1>
<p class="text-foreground-secondary">Welcome back.</p>
<button class="bg-primary text-foreground-inverse hover:bg-primary-hover">
Save
</button>
</div>/* Use semantic custom properties */
.page {
background: var(--background-canvas);
color: var(--text-primary);
border-color: var(--border-default);
}
.button-primary {
background: var(--interactive-primary);
color: var(--text-inverse);
}
.button-primary:hover {
background: var(--interactive-primary-hover);
}Semantic tokens available in every theme:
| Token | Purpose |
|---|---|
--background-canvas / bg-canvas | Page background |
--background-surface / bg-surface | Card/panel background |
--background-muted / bg-muted | Subdued background |
--text-primary / text-foreground | Primary text |
--text-secondary / text-foreground-secondary | Secondary text |
--text-muted / text-foreground-muted | Disabled/muted text |
--interactive-primary / bg-primary | Buttons, links |
--interactive-primary-hover / bg-primary-hover | Hover state |
--border-default / border-border | Default borders |
--status-error / text-error | Error state |
--status-success / text-success | Success state |
--focus-ring / ring-ring | Focus indicator |
Dark mode is built in. Add data-theme="dark" to any parent element:
<html data-theme="dark">All semantic tokens remap automatically. No additional imports required.
5. Deploy
The tokens are plain CSS -- they work anywhere CSS works. No runtime, no JavaScript overhead, no bundler plugin.
# Cloudflare Workers (with Doppler secrets)
doppler run -- wrangler deploy
# Vite dev server
pnpm dev
# Any static build
pnpm buildThe CSS file is small (under 10KB per theme) and cacheable. It ships as part of your bundle with zero additional network requests.
Next Steps
- Theme Gallery -- see all 12 identities with color previews
- Adopting a Theme -- framework-specific integration details
- Multi-Tenant Architecture -- how themes fit into the tenant hierarchy
- Marketplace Plugin -- let Claude Code wire this up for you
Using Claude Code?
The marketplace plugin gives you guided adoption instead of manual setup:
Add to your project's .claude/settings.json:
{
"permissions": {
"extraKnownMarketplaces": {
"webplatform4sync": {
"source": { "source": "github", "repo": "syncupsuite/webplatform4sync" }
}
}
}
}Then in a Claude Code session:
/webplatform4sync:shuTell it what you want -- "I need a theme grounded in Japanese minimalism" -- and it applies the tokens, wires the imports, and configures your Tailwind setup.