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

قمر

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

رصيد النقاط

٤٬٨٢٠ نقطة

تنتهي صلاحية ١٬٢٥٠ نقطة في ٣٠ سبتمبر

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

हाट

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

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

₹१८,४५०

पिछले महीने से १२.४% ज़्यादा

Mukta · soft · comfortable

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.344tokens per theme
  4. @syntara/reactComponents on React Aria Components, styled with CSS Modules and tokens only.58components
  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: tokens and the theme engine, then the component library, docs site and blocks, then craft, governance and the agent tooling. The changelog says where each phase stands. Component pages mark each component alpha, beta or stable. The packages are versioned separately on npm, starting at 0.1.0 — phases and package versions are different things.

Next steps