React · MUI v7 · TypeScript
One codebase.
Every brand.
Ship a new brand theme in under 10 minutes — typed ThemeSpec contracts, AI ThemeSpec generator, 57 components ready to go.
The Problem
The Solution
One codebase.
Every brand.
Themiq gives every component a single source of truth — a typed ThemeSpec contract that drives MUI automatically.
A single typed object defines every visual token — palette, typography, shadows, shape. One place to change, everywhere it flows.
12 built-in strategies — URL slug, user role, tenant ID, localStorage, environment flag — any trigger, any brand, with zero boilerplate.
Every component reads from the theme, never from hardcoded values. Add a brand by writing a ThemeSpec — not by touching a single component.
Architecture
How it works — end to end
main.tsx PlatformTheme.tsx resolvers/index.ts themes/index.ts utils/getTheme.ts createTheme() makeStyles() Key benefits — even with a single brand
ThemeSpec contract enforced at compile time — no raw hex strings anywhere.
Change any token in one file — it propagates to all 57 components instantly.
Adding a second brand later requires zero refactoring — the system is already wired.
Every component reads from the theme — no one-off sx overrides scattered across pages.
New developers read ThemeSpec once and understand the entire visual contract.
Get Started
Up and running
in three steps.
Start from a working codebase with two live demo brands, all 57 components, the resolver system, and typed ThemeSpec contracts already wired up.
npx degit themiqpro/template my-app
cd my-app && npm install
npm run dev # two brands running on localhostReplace the demo brand with yours. Fill in 9 token categories — palette, typography, shadows, shape — and TypeScript tells you if anything is missing.
// themes/mybrand/index.ts
export const myBrand: ThemeSpec = {
name: "mybrand",
designSystem: "MYBRAND",
palette: { primary: { main: "#2563eb" } },
typography: { fontFamily: "Inter, sans-serif" },
// TypeScript enforces the rest ✓
}Pick how the right brand is selected at runtime — URL slug, user role, tenant ID, and 9 more. Swap the resolver any time without touching a single component.
// App.tsx — one line to swap strategies
<PlatformTheme
resolver={urlSlugResolver}
>
<App />
</PlatformTheme>
// change to userRoleResolver anytime — zero refactorTotal setup time: under 10 minutes. The AI ThemeSpec Generator cuts brand token definition from hours to seconds.
See live demo →Building this from scratch
takes months. Themiq takes weeks.
wd = working days · US values in USD · Europe values in EUR · Incl. employer overhead (US 20–30% · EU 25–40%)
Roughly 1.6–3.5 working months (at 20 d/mo) returned to your team.
Even a senior who ships in time will likely produce a weaker architecture — less typed, less tested, less documented, harder to hand over. Themiq ships 57 typed components, a full Vitest suite, Storybook stories for every component, and a written handover. That level of completeness is rarely reached from scratch under budget pressure.
Themiq's delivery window stays 2–4 weeks regardless of how many brands you add. Scratch effort grows linearly with every new brand.
Three tiers. One architecture.
Pick your level of involvement.
Your team does the wiring. We provide the foundation.
We build it, configure it, and hand it over — ready to ship.
Maintenance & evolution of the Themiq codebase we delivered — not a general dev retainer.
Pricing is shared during a scoping call — scope varies by project. All fees are ex-VAT. IVA applied where applicable under Portuguese law.
Your design system.
Built once. Scales forever.
57 components · 12 resolver strategies · AI ThemeSpec Generator · Multi-brand from day one.
Tier 1 gives your team the foundation — 57 typed components, the ThemeSpec contract, and the URL slug resolver. Your engineers wire up the brands. Tier 2 is done-for-you: we extract your brand tokens from Figma, generate and QA both ThemeSpecs, configure all 12 Pro resolvers, run the full Vitest suite, and hand over a production-ready codebase with a recorded architecture session. Delivery: 2–4 weeks.
Tier 1 assumes your team is comfortable with MUI v7 and TypeScript. The architecture is well-documented and the onboarding call covers the key patterns. For Tier 2, we handle all the MUI-specific work — your team receives a working codebase with Storybook stories for every component and a handover recording to get up to speed fast.
Yes — the architecture is designed for it. Tier 2 includes 2 brands; additional brands are a Tier 2 add-on (Additional brand onboarding). The AI ThemeSpec Generator makes adding a new brand a matter of hours rather than days. On Tier 3 (Retainer), new brands are handled as part of ongoing DS maintenance.
Two generators ship with Pro. The ThemeSpec Generator takes one or more hex values and produces a complete primitives.ts colour scale, a palette.ts semantic mapping, typography defaults, and shadow tokens — all fully typed to the ThemeSpec contract. Brand setup goes from days to under an hour.
The Component Style Generator goes further: paste a Figma component JSON export (slots, states, variants) and it writes the typed .styles.ts file for you — using your ThemeSpec tokens, not raw hex. It supports both the shared (theme) => () form and the per-design-system map form. If your Figma export is thorough, the QA pass becomes a quick review rather than a full authoring session. Both are Pro-only features.
The 60-day window covers bugs in the delivered code only, via GitHub Issues (not Slack) with a 48h acknowledgement SLA. Design changes and new components are out of scope. After that window, clients who need ongoing work move to Tier 3 (Retainer) — which requires prior Tier 2 delivery and starts immediately post-handover. Tier 3 is scoped exclusively to the Themiq codebase delivered, not a general development retainer.
Themiq Pro is built and tested on React 19 + MUI v7. It works with React 18 with no code changes — MUI v7 supports both. If your project is on an older MUI version, a migration is required; we can scope that separately as part of a Tier 2 engagement.
30-minute discovery call · No commitment · We'll discuss your stack, number of brands, and which tier fits best.