Skip to content

Introduction

A multi-brand design system: one React library, any brand, accessible by construction.

Syntara is a design system for products that ship under many brands. One React library renders every brand — light and dark, comfortable and compact, left-to-right and right-to-left — and a brand is a JSON file, never a fork.

Vela

Neobank

Available balance

₹1,84,250

+6.4% vs last month

Inter Tight · sharp · compact

Harbor

Insurance

Home policy

Renews on 14 October

Cover that’s there when you need it.

Source Serif 4 · soft · comfortable

قمر

بقالة ومكافآت

رصيد النقاط

4,820 نقطة

تنتهي صلاحية 1,250 نقطة في 30 سبتمبر

Readex Pro · round · comfortable

Care

Family health benefits

Shared OPD wallet

₹7,400

used of ₹18,000 · ₹10,600 left

Plus Jakarta Sans · soft · comfortable

हाट

रीसेलर कॉमर्स

इस महीने की कमाई

₹18,450

पिछले महीने से 12.4% ज़्यादा

Mukta · soft · comfortable

Hindi copy: draft, not yet reviewed by a Hindi reader.

Fictional tenants in different industries run the same components: Vela is a neobank, Harbor an insurer, Qamar a grocery and loyalty app in Arabic, Care a family health-benefits wallet, and Haat a reseller marketplace in Hindi. They differ by tokens and copy only. Each card above is the same markup inside its own ThemeScope.

Why multi-brand

White-label products run one codebase under many client brands. The usual failure is slow: a brand gets a few overrides, then a forked component, then its own release train. Syntara removes the reason to fork. Six brand inputs go through a theme engine that produces every token, checks every contrast pair against WCAG 2.2 AA, and explains each change it makes in plain English.

Principles

  1. Tokens are the API. Components read semantic tokens only, never primitives.
  2. A brand is data, not code. A new tenant is one JSON file and zero component changes.
  3. Accessible by construction. A theme that fails WCAG 2.2 AA can't be generated or exported.
  4. Logical properties only. Right-to-left works from the first line, not as a retrofit.
  5. Design and code parity. Every Figma component property maps to a React prop.
  6. One source for humans and agents. The docs and the planned MCP server read the same meta.json.
  7. Make the right thing the easy thing. Every finding names the exact token or component to use.

What’s in the box

From one brand file to a themed product, each layer built from the one above it.

  1. brand.jsonA brand, as data. One file per tenant; nothing else changes.6inputs
  2. @syntara/theme-engineOKLCH ramps, semantic roles for light and dark, and a contrast solver that explains each change. No runtime dependencies.48colour roles
  3. @syntara/tokensThe built token files for every tenant: CSS variables, DTCG JSON and Figma variables.339tokens per theme
  4. @syntara/reactComponents on React Aria Components, styled with CSS Modules and tokens only.53components
  5. Your productYour app, and this site: the chrome wears the monochrome house brand and every preview is a ThemeScope.6brands on this site

Status

Syntara is built in phases. Phase 1 (tokens, the theme engine and the Brand Generator) shipped as v0.1. Phase 2 (the component library, docs site and blocks) shipped as v0.2, and the tactile, editorial and icon work since then is in the changelog. Component pages mark each one alpha, beta or stable. Next is Phase 4, governance. See the changelog.

Next steps