Skip to content
v0.553 components

One design system. Every brand.

Six brand inputs become a light and dark theme that passes WCAG 2.2 AA. One React library renders every brand, for the people and the AI agents who build with it.

npminstall@syntara/react

Not on npm yet — it publishes in Phase 6. Until then, copy a component’s source.

Live examples

After fees

Net revenue

$172,250+24.8%vs the 4 weeks before
  • This period
  • Previous period

28 points, Sep 3 to Sep 30. This period: low $4,390, high $7,820, last $7,820. Previous period: low $4,020, high $5,740, last $5,740.

This period, Previous period
DateThis periodPrevious period
Sep 3$4,390$4,110
Sep 4$4,720$4,020
Sep 5$4,960$4,290
Sep 6$5,210$4,380
Sep 7$4,870$4,210
Sep 8$5,030$4,460
Sep 9$5,390$4,520
Sep 10$5,620$4,390
Sep 11$5,480$4,610
Sep 12$5,810$4,730
Sep 13$6,040$4,680
Sep 14$5,720$4,820
Sep 15$5,960$4,910
Sep 16$6,210$4,760
Sep 17$6,480$4,990
Sep 18$6,130$5,120
Sep 19$6,390$5,040
Sep 20$6,670$5,210
Sep 21$6,420$5,170
Sep 22$6,810$5,330
Sep 23$7,040$5,290
Sep 24$6,720$5,460
Sep 25$7,110$5,510
Sep 26$7,380$5,380
Sep 27$7,020$5,620
Sep 28$7,290$5,690
Sep 29$7,560$5,580
Sep 30$7,820$5,740

September by channel

Card payments
$28,460
+8.4% betterversus August
Bank transfers
$9,870
+3.1% betterversus August
Refunds
$1,240
−12% betterversus August
New

Get paid the day you invoice

Instant payouts move card sales into Operating within minutes, for 1% a payout.

  • Minutes, not two daysCard sales land as soon as they settle.
  • Same checks as todayEvery payout still goes through review.
  • 1% a payout, capped at $15Only on the payouts you speed up.

Could have landed early in September

$28,460

Accounts

$289,690 across 5 accounts

  • OperatingChecking ·· 4821$84,250+5.2%
  • Tax reserveSavings ·· 3306$32,600-6.1%
  • Reserve fundTreasury · 4.1% yield$124,800+3.4%
  • Card salesSettling · lands Oct 1$6,840+12.6%
  • PayrollChecking ·· 7730$41,200+2.1%

Spend limits

Team cards reset on October 1.

Team cards, $5,000 a month$3,120 spent$1,880 left
Free transfers, 25 a month18 used7 left

Approvals

Payouts over $2,500 need a yes from one of them.

Maya LindqvistTomás ReyesInes Adeyemi

Scheduled

3 payments go out in October.

Payment schedule, October 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Payroll, Oct 2−$38,420.00

Pay a supplier

From Operating ·· 4821

Pay to
Arrives

Activity

Across all accounts, newest first.

  • Payout to Lumen Print Co.Today, 09:42−$4,800.00Needs approval
  • Invoice #1042 paidToday, 08:15+$12,650.00Completed
  • Card charge at Northline AirYesterday−$612.40Declined
  • Payroll, 14 peopleFri, Oct 2−$38,420.00Scheduled

Alerts

Push and email, as it happens.

Before anything over $2,500 leaves an account.
When Operating drops under $10,000.
A team card is declined, with the reason.
Every Monday: what came in, what went out.

Vela: all 118 contrast checks pass3 automatic adjustmentsSee why

One system, every brand

The same card from the same code, in five tenants. A tenant is one brand.json and one content.json: it changes tokens and copy, never components.

Good morning, Priya

Here’s how your money is moving this September.

Your debit card ending 4821 expires on 30 Sept
Available balance
₹1,84,250
+6.4% bettervs last month
Spent this month
₹46,380
+11.2% worsevs August
VelaSharpCompactInter TightEnglish

Good afternoon, Daniel

Your cover, claims and payments in one place.

Your home policy renews on 14 October 2026
Active policies
3
Home, motor and travel
Claims in progress
2
1 is waiting for your photos
HarborSoftComfortableSource Serif 4English

مساء الخير، سارة

هذا ملخص طلباتك ونقاطك لشهر سبتمبر.

تنتهي صلاحية 1,250 نقطة في 30 سبتمبر
رصيد النقاط
4,820
‎+18‎%‎ betterمقارنةً بالشهر الماضي
طلبات هذا الشهر
9
‎+12.5‎%‎ betterمقارنةً بشهر أغسطس
QamarRoundComfortableReadex ProArabic, right to left

Good morning, Arjun

Here’s how your family’s health benefits look this month.

Enrol your parents in elder care by 30 September
OPD wallet left
₹10,600
of ₹18,000 for 2026
Hospital cover
₹5,00,000
Shared by your family of five
CareSoftComfortablePlus Jakarta SansEnglish

नमस्ते, रेखा

सितंबर में आपकी दुकान कैसी चल रही है, यहाँ देखें।

30 सितंबर तक अपनी KYC पूरी करें
इस महीने की कमाई
₹18,450
+12.4% betterपिछले महीने से
कुल बिक्री
₹1,84,250
+8.6% betterअगस्त से
HaatSoftComfortableMuktaHindiHindi copy: draft, not yet reviewed by a Hindi reader.

Accessible by construction

A theme that fails WCAG 2.2 AA can’t be generated. The solver checks every text, control and focus-ring pair in light and dark, fixes what fails, and explains each fix in plain English.

Random brands fuzzed
1,000
Each in light and dark
Contrast checks
118,000
118 per brand
Pass rate
100%
0 failures
Adjustments per brand
4
Median; 0 to 7
QamarLight modeButton label
2.0:1, fails
7.9:1, passes

White labels on #f2a516 only reach 2.0:1, so button labels use ink #221f1a (7.9:1).

Written by the engine for Qamar’s brand colour at build time. Every adjustment carries a sentence like this.

Ship it your way

One source, three ways in. Pick upgrades or ownership; the components and tokens are the same.

npm packageNot on npm yet

Versioned releases for teams that want upgrades they can govern: deprecations, changelogs and codemods.

pnpmadd@syntara/react

Design tokensNot on npm yet

Every tenant as CSS variables, DTCG 2025.10 JSON and Figma variables. Plain CSS, so any stack can read it.

pnpmadd@syntara/tokens

Copy the source

Copy a component’s files into your project and own them. Each component page lists its files and dependencies.

pnpmaddreact-aria-components

Built for people and agents

Each component is described once, in a meta.json: props, examples, keyboard behaviour, do and don’t. These docs are generated from it, and coding agents can read the same file. A Syntara MCP server, which serves components, tokens and usage rules to agents, is planned.

packages/react/meta/button.meta.json (excerpt)
{
  "name": "button",
  "maturity": "beta",
  "accessibility": {
    "keyboard": [
      { "keys": "Enter / Space", "action": "Activates the button." }
    ]
  },
  "guidelines": {
    "do": ["Use one primary button per view for the main action."],
    "dont": ["Don't use tone=\"danger\" for anything that isn't destructive."]
  },
  "tokens": [
    "color.action.primary.bg", "color.action.primary.border"
  ]
}

Start with one component. Keep every brand.

Install a button today; bring your brand colour when you’re ready.