Theme Gallery
Twelve design identities grounded in cultural traditions. Each produces four artifacts: tokens.json (DTCG), tokens.css (CSS custom properties), tailwind.css (Tailwind v4 @theme), and meta.json (cultural provenance).
pnpm add @syncupsuite/themesImport any theme by slug:
@import "@syncupsuite/themes/{slug}/tokens.css";Every theme ships the same semantic token API. Swap the import, and your entire UI repaints.
Swiss International
Origin: International Typographic Style, Switzerland, 1950s-present
Clean geometric precision and restrained palettes. Strong blacks, systematic neutrals, generous whitespace. Zero border radius -- every corner is sharp. The default choice when clarity and objectivity are the priority.
/* Key tokens */
--background-canvas: var(--primitive-color-neutral-50); /* #FBF8F1 */
--background-surface: #FFFFFF;
--text-primary: var(--primitive-color-neutral-900); /* #090704 */
--interactive-primary: var(--primitive-color-schwarz-500); /* #111111 */
--border-default: var(--primitive-color-neutral-200); /* #E0DED7 */
--primitive-radius-md: 0px;@import "@syncupsuite/themes/swiss-international/tokens.css";Nihon Traditional
Origin: Japanese aesthetic traditions, centuries-old
Washi paper tones, vermillion accents, and indigo contrasts. Warm, contemplative, nature-inspired. Draws from calligraphy, woodblock printing, and temple architecture. Color names use traditional Japanese color vocabulary (hanada, enji, shironeri).
/* Key tokens */
--background-canvas: var(--primitive-color-neutral-50); /* #F4F9FF */
--background-surface: #FFFFFF;
--text-primary: var(--primitive-color-neutral-900); /* #05080B */
--interactive-primary: var(--primitive-color-hanada-500); /* #2E4B6D */
--border-default: var(--primitive-color-neutral-200); /* #D9DEE5 */
--primitive-radius-md: 4px;@import "@syncupsuite/themes/nihon-traditional/tokens.css";Nordic Modern
Origin: Scandinavian modernism, 20th century
Light, functional, and human. High contrast between light backgrounds and considered accent colors. Influenced by the Scandinavian commitment to democratic design and natural materials.
/* Key tokens */
--background-canvas: var(--primitive-color-neutral-50);
--background-surface: #FFFFFF;
--text-primary: var(--primitive-color-neutral-900);
--interactive-primary: var(--primitive-color-fjordbl-500);
--border-default: var(--primitive-color-neutral-200);
--primitive-radius-md: 6px;@import "@syncupsuite/themes/nordic-modern/tokens.css";Tang Imperial
Origin: Tang Dynasty China, 618-907 CE
Rich ceremonial palette drawn from silk, lacquer, and jade. Imperial reds, gold accents, warm silk backgrounds. The Tang Dynasty was a high point of Chinese art, and its color vocabulary remains influential.
/* Key tokens */
--background-canvas: var(--primitive-color-neutral-50);
--background-surface: #FFFFFF;
--text-primary: var(--primitive-color-neutral-900);
--interactive-primary: var(--primitive-color-zh-sh-h-ng-500);
--border-default: var(--primitive-color-neutral-200);
--primitive-radius-md: 4px;@import "@syncupsuite/themes/tang-imperial/tokens.css";Shuimo Modern
Origin: Chinese ink wash painting (shuimo hua), Song Dynasty-present
Monochromatic ink gradients on rice paper. The palette is intentionally restrained -- ink concentrations from full black through greys to near-white, with a single seal-red accent. For interfaces that value negative space and subtlety.
/* Key tokens */
--background-canvas: var(--primitive-color-neutral-50);
--background-surface: #FFFFFF;
--text-primary: var(--primitive-color-neutral-900);
--interactive-primary: var(--primitive-color-m-sh-500);
--border-default: var(--primitive-color-neutral-200);
--primitive-radius-md: 2px;@import "@syncupsuite/themes/shuimo-modern/tokens.css";Nihon Minimal
Origin: Japanese wabi-sabi and ma (negative space), contemporary
Stripped to essentials. Warm off-whites, charcoal text, almost no accent color. Influenced by wabi-sabi (beauty in imperfection) and ma (the meaningful use of empty space). For interfaces where content is the design.
/* Key tokens */
--background-canvas: var(--primitive-color-neutral-50);
--background-surface: #FFFFFF;
--text-primary: var(--primitive-color-neutral-900);
--interactive-primary: var(--primitive-color-sumi-iro-500);
--border-default: var(--primitive-color-neutral-200);
--primitive-radius-md: 2px;@import "@syncupsuite/themes/nihon-minimal/tokens.css";Renaissance
Origin: Italian Renaissance, 14th-17th century
Palette drawn from fresco pigments, illuminated manuscripts, and Florentine architecture. Rich purples and golds that reference the Medici era. Parchment backgrounds ground the digital surface in material history.
/* Key tokens */
--background-canvas: var(--primitive-color-neutral-50);
--background-surface: #FFFFFF;
--text-primary: var(--primitive-color-neutral-900);
--interactive-primary: var(--primitive-color-oltremare-ultramarine-500);
--border-default: var(--primitive-color-neutral-200);
--primitive-radius-md: 6px;@import "@syncupsuite/themes/renaissance/tokens.css";Art Deco
Origin: Art Deco movement, 1920s-1930s
Bold geometric contrasts. Gold on midnight, emerald accents, ivory grounds. Draws from the Chrysler Building, Tamara de Lempicka, and the visual language of the Jazz Age. High contrast, high confidence.
/* Key tokens */
--background-canvas: var(--primitive-color-neutral-50);
--background-surface: #FFFFFF;
--text-primary: var(--primitive-color-neutral-900);
--interactive-primary: var(--primitive-color-petrolio-petroleum-teal-500);
--border-default: var(--primitive-color-neutral-200);
--primitive-radius-md: 0px;@import "@syncupsuite/themes/art-deco/tokens.css";Wiener Werkstatte
Origin: Vienna Workshops, Austria, 1903-1932
Graphic black-and-white patterns with jewel-tone accents. Founded by Josef Hoffmann and Koloman Moser, the Wiener Werkstatte sought to unify fine art and craft. Geometric precision with decorative warmth.
/* Key tokens */
--background-canvas: var(--primitive-color-neutral-50);
--background-surface: #FFFFFF;
--text-primary: var(--primitive-color-neutral-900);
--interactive-primary: /* mapped to primary seed color */
--border-default: var(--primitive-color-neutral-200);
--primitive-radius-md: 0px;@import "@syncupsuite/themes/wiener-werkstaette/tokens.css";Contrast note
This theme has 2 contrast warnings inherent to the source palette. Non-blocking for production use.
Milanese Design
Origin: Italian industrial design, Milan, mid-20th century-present
Red, black, white -- the Olivetti palette. Influenced by Gio Ponti, Ettore Sottsass, and the tradition of functional elegance that defines Milanese industrial design. Clean lines, deliberate color, no excess.
/* Key tokens */
--background-canvas: var(--primitive-color-neutral-50);
--background-surface: #FFFFFF;
--text-primary: var(--primitive-color-neutral-900);
--interactive-primary: /* mapped to primary seed color */
--border-default: var(--primitive-color-neutral-200);
--primitive-radius-md: 4px;@import "@syncupsuite/themes/milanese-design/tokens.css";De Stijl
Origin: De Stijl movement, Netherlands, 1917-1931
Primary colors, black lines, white fields. Piet Mondrian and Theo van Doesburg reduced visual language to its absolute elements. The result is instantly recognizable and surprisingly versatile in digital interfaces.
/* Key tokens */
--background-canvas: var(--primitive-color-neutral-50);
--background-surface: #FFFFFF;
--text-primary: var(--primitive-color-neutral-900);
--interactive-primary: /* mapped to primary seed color */
--border-default: var(--primitive-color-neutral-200);
--primitive-radius-md: 0px;@import "@syncupsuite/themes/de-stijl/tokens.css";Contrast note
This theme has 1 contrast warning inherent to the source palette. Non-blocking for production use.
Swiss Modernist
Origin: Swiss graphic design, 1950s-1970s
A sibling to Swiss International with a more assertive personality. Signal red as the primary accent, strict grid discipline, and the typographic confidence of Max Miedinger's Helvetica era. Where Swiss International is corporate-neutral, Swiss Modernist is editorial.
/* Key tokens */
--background-canvas: var(--primitive-color-neutral-50);
--background-surface: #FFFFFF;
--text-primary: var(--primitive-color-neutral-900);
--interactive-primary: /* mapped to primary seed color */
--border-default: var(--primitive-color-neutral-200);
--primitive-radius-md: 0px;@import "@syncupsuite/themes/swiss-modernist/tokens.css";Using a Theme
Every theme follows the same import pattern:
@import "@syncupsuite/themes/{slug}/tokens.css";@import "@syncupsuite/themes/{slug}/tailwind.css";import tokens from "@syncupsuite/themes/{slug}/tokens.json";import meta from "@syncupsuite/themes/{slug}/meta.json";All themes share the same semantic token API:
| CSS Variable | Tailwind Class | Purpose |
|---|---|---|
--background-canvas | bg-canvas | Page background |
--background-surface | bg-surface | Card/panel |
--text-primary | text-foreground | Primary text |
--text-secondary | text-foreground-secondary | Secondary text |
--interactive-primary | bg-primary | Buttons, links |
--border-default | border-border | Default borders |
--status-error | text-error | Error state |
--focus-ring | ring-ring | Focus indicator |
Dark mode activates with data-theme="dark" on any parent element. Every theme includes dark mode token overrides out of the box.
For framework-specific integration, see Adopting a Theme.