Themes

Every prototype has its own look: a theme, a color mode and a motion preference, resolved per persona and applied before first paint. A theme can come from six hand-tuned presets, a library of product-category themes, a palette generated from one brand color, the DevTools Theme Studio, the protoyard theme CLI, or a blueprint brand block. API reference: packages/themes/README.md.

Identity vs mode

Two separate choices:

Every theme defines a full palette for both modes, so any theme works in light and dark. system follows prefers-color-scheme live.

The style model

A theme is a Theme (packages/core/src/theme.ts, validated by ThemeSchema). This is everything a theme can set:

defineTheme(input) parses with zod and fills these defaults.

Color tokens → CSS variables → Tailwind utilities

applyAppearance() writes each palette token of the resolved mode as a --py-* custom property (tokenToCssVar('primaryForeground') → --py-primary-foreground). @protoyard/themes/base.css maps them into the Tailwind 4 theme, so you style with ordinary utilities:

The two hover fills are computed per theme and mode by hoverFill(): a visible step darker or lighter that keeps the button text at 4.5:1 or more.

Typography, shape, density and motion variables

applyAppearance() also sets data-py-theme, data-py-mode, data-py-motion (reduce or full), data-py-surface (solid or glass), the dark or light class and color-scheme on the element. The dark: variant is class-based.

Style profile

theme.style holds the dimensions beyond color. Every field is optional and defaults to Protoyard's standard look, so a theme without style (every built-in preset) parses to DEFAULT_THEME_STYLE. Values are validated strictly (lengths in px/rem/em, easing keywords or cubic-bezier(…)) because they become CSS. resolveThemeStyle(partial) fills a partial profile with the defaults.

The profile is applied, not just stored. Besides the variables above, themeComponentProfile(theme) sets @protoyard/ui component attributes, but only where the theme departs from the default look:

glass is progressive enhancement: bg-surface and bg-elevated become translucent with a backdrop blur only in browsers that support backdrop-filter; others keep solid fills.

Style presets

packages/themes/src/style-presets.ts names the common choices so the Theme Studio, DevTools, the CLI and blueprints share one vocabulary. Each preset is plain data (id, label, description and its values):

stylePresetInput(selection) turns a selection such as { radius: 'round', motion: 'subtle' } into theme fields (radius, density, the font stacks) plus a ThemeStyleInput. applyStylePresets(theme, selection) applies it on top of a theme, keeps every style field the selection does not touch, and validates the result with ThemeSchema. An unknown id throws a TypeError that lists the known ids. The default presets (default, default, soft, standard) reproduce DEFAULT_THEME_STYLE exactly.

Live in DevTools. DevTools → Look has a control per dimension: density presets plus a fine slider, corner radius, elevation and motion as segmented choices, and the font pairing as a list. Each choice is a temporary override (theme.setOverride({ radius: 'round' }) and so on) applied on top of the active theme, with a source badge. Theme clears that one override, and Clear appearance overrides clears them all; it is enabled as soon as any style override is set.

import { applyStylePresets, violetTheme } from '@protoyard/themes';

const roomyViolet = applyStylePresets(violetTheme, {
  density: 'comfortable',
  radius: 'round',
  elevation: 'layered',
  motion: 'subtle',
});

Live style overrides

The radius, elevation, font and motion presets also work as live overrides, like density: a reviewer can try a prototype "more rounded", "flatter" or "editorial" without creating a theme.

await runtime.theme.setOverride({ radius: 'round', elevation: 'flat', font: 'editorial' });
runtime.theme.appearance().radius; // { value: 'round', source: 'override' }
await runtime.theme.clearOverride(); // back to the scenario, then the theme

• Ids only. OverridesSchema and a scenario's appearance accept the

preset ids (RADIUS_PRESET_IDS, ELEVATION_STYLES, FONT_PAIRING_IDS, MOTION_PRESET_IDS in @protoyard/core), never free CSS. Anything else is rejected.

• Resolution. Each dimension resolves override › scenario appearance ›

the effective theme's own value, which the runtime reports as { value: null, source: 'default' }.

• Application. bindAppearance (@protoyard/renderer-svelte) merges

them on top of the theme (the same result as applyStylePresets) before applyAppearance, so the page updates live and component profiles follow (pill gives pill buttons, flat bordered cards). The preset data loads as a small lazy chunk the first time a preset is active; until it arrives the page keeps what it shows. The density override and reduced motion still win. The no-flash cache replays the merged --py-* variables, so a reload paints the overridden look first.

• Storage. Overrides live in the prototype's control DB only, never the

data DB (ADR-005), and theme.clearOverride() or DevTools' "Clear overrides" removes them.

• Links. ?radius=round&elevation=flat&font=editorial&motion=none

applies the same presets as clearable overrides (source override, persisted like a DevTools choice). Values outside the preset ids are ignored. DevTools' share link (reproducibleLink) carries any active style override together with the theme, mode, shell and layout overrides, so a reviewer can send the exact look.

Fonts

FONT_CATALOG (packages/themes/src/fonts.ts) has eight system-first pairings: system, humanist, geometric, grotesk, editorial (serif headings), rounded, condensed and mono. Each stack is var(--py-font-stack-<id>-…, <local fallback>), so choosing one never downloads a font. @protoyard/themes/fonts.css is optional and only declares those --py-font-stack-* variables so a prototype can override them. loadVariableFont({ family, src }) loads a self-hosted, same-origin .woff2 face only when called; remote URLs and other formats are refused.

Wiring it into a prototype

A prototype's src/app.css gets all of this with one import (templates/blank/src/app.css):

@import "@protoyard/renderer-svelte/app.css";

/* Let Tailwind see this prototype's own markup. */
@source "./";

That file imports Tailwind, @protoyard/themes/base.css, @protoyard/ui/styles.css and @protoyard/devtools/styles.css in the right order.

How Tailwind finds package classes. Tailwind resolves an @source path relative to the stylesheet that declares it. So each kit's stylesheet (@protoyard/ui/styles.css, @protoyard/devtools/styles.css, @protoyard/charts-ui/styles.css, @protoyard/ai-ui/styles.css, …) registers its own folder with @source "./". A stylesheet that needs another package's classes imports that package's stylesheet by name (@import "@protoyard/charts-ui/styles.css";), never with a path into its folder. The same CSS then works from this repository, from packed packages and from a consumer's node_modules. packages/cli/tests/package-boundaries.test.ts rejects any cross-package @source or @import path in packages/*/src.

Use tokens, not raw colors. bg-primary text-primary-foreground follows every theme and both modes; bg-violet-600 does not.

The palette engine

packages/themes/src/palette.ts turns one brand color into a complete, accessible light and dark theme. It is pure and deterministic: the same input always gives the same hex values.

OKLCH and gamut mapping

The engine works in OKLCH (packages/themes/src/oklch.ts), a perceptual color space where equal lightness steps look equal across hues. That is what lets one lightness table produce consistent scales for any seed. rgbToOklch converts sRGB to OKLCH; oklchToHex converts back and, when a color falls outside the sRGB gamut, keeps lightness and hue and reduces chroma by binary search until it fits. Every output is a plain #rrggbb.

How contrast is guaranteed

Neutrals (background, foreground, surface, muted, borders, sidebar) are fixed values per mode, or come from a neutral family. The colored tokens are searched, not guessed:

Neutral families

Neutrals carry most of a theme's mood, so createThemeFromSeed can derive them from a family instead of the fixed values (NEUTRAL_FAMILIES, type NeutralFamily):

Each family uses one fixed OKLCH lightness per token and mode (light background 0.985, surface 1, muted 0.965; dark background 0.145, surface 0.21, elevated and muted 0.27). Dark borders and inputs stay translucent white, so they follow whichever neutral is underneath. The text tokens (foreground, mutedForeground, sidebarForeground) start from a table lightness and are searched toward black or white until they reach 4.5:1 on every background they sit on. When a secondary or accent fill misses 4.5:1 with its text, the repair falls back to the family's own neutral fill.

Omitting neutral keeps the original neutrals bit-for-bit. A library definition can set neutral too (LibraryThemeDefinition.neutral); the 64-theme library uses families across its product-category and curated collections.

import { createThemeFromSeed } from '@protoyard/themes';

export const paperTheme = createThemeFromSeed({
  id: 'paper-ledger',
  name: 'Paper Ledger',
  seed: '#0f766e',
  neutral: 'warm',
});

The result is then held to the same WCAG pairs as the presets (see Contrast checks). packages/themes/tests/palette.test.ts checks every text and UI pair in both modes for 500 deterministic seeds, with the original neutrals and with every neutral family.

import { createThemeFromSeed } from '@protoyard/themes';

export const harborTheme = createThemeFromSeed({
  id: 'harbor',
  name: 'Harbor',
  seed: '#0f766e',
  secondary: '#1d4ed8',
  style: { elevation: 'crisp', shape: { radiusScale: 0.8 } },
});

Chart palettes

Chart colors belong to the theme. packages/themes/src/charts.ts derives, per mode, the colors a chart needs from chart1 … chart5 and checks them with the same rules as the charts kit (validateChartPalette in packages/charts/src/palette):

A color that fails moves in lightness only (the hue stays recognizable); the three derived series colors may also shift hue a little. deriveChartTokens(palette, mode) returns the block below, and validateChartTokens(tokens, palette, mode) lists any rule a block breaks.

Where the colors come from:

• Generated themes (createThemeFromSeed, so every library theme and

every blueprint brand seed) carry a full charts block for both modes, and their chart1 … chart5 are the repaired series.

• Built-in presets have no charts block, to keep the always-loaded

presets small; their chart1 … chart5 already pass the rules (a few scale steps were replaced by hex values for that). The charts kit derives series 6–8 and the ramps from them at run time.

• Your own themes may set charts (validated by ThemeSchema: hex colors,

8 / 9 / 9 entries); without it they behave like the presets, and the charts kit repairs any chart1 … chart5 that fail.

applyAppearance always writes --py-chart-grid and --py-chart-axis, and writes the series 1–8 and the ramps when the theme has a charts block. It removes series 6–8 and the ramps again when the next theme has none. packages/themes/tests/charts.test.ts checks every preset and library theme in both modes, 120 generated themes, and that the charts kit has nothing left to repair.

Built-in presets and the theme library

Built-in presets (always available)

From packages/themes/src/presets.ts. They are hand-assembled from Tailwind-compatible scales (scales.ts), with light and dark designed separately rather than inverted. BUILTIN_THEMES is always in every prototype's theme list, and violet (DEFAULT_THEME_ID) is the fallback.

The theme library (loaded on demand)

The library holds 64 themes: the 32 product-category themes of packages/themes/src/library/definitions.ts (first table) and 32 more in definitions-extra.ts (second table). Each entry is data only: id, name, description, category, tags, collection, mood, a seed and secondary color, a neutral family, a font pairing id, radius, density, an optional style profile and, for colorblind-safe themes, five chart seeds. Tokens are not stored; they are built by the palette engine when a theme is loaded. All names are fictional.

Elevation soft in this table is the schema default for entries that do not set one. Several entries also set typography, radius scale, border width, motion or focus-ring values; see definitions.ts for the full profile.

Twenty of the first 32 now use a neutral family, so no two themes in one family have nearly the same primary (the table above does not list the neutral; see definitions.ts). accessible-high-contrast and accessible-dark-contrast are AAA themes in the high-contrast collection, and brutalist-block and productivity-minimal are in mono: their black and near-black seeds now keep a gray primary (seeds below OKLCH chroma 0.04 stay achromatic) instead of a saturated one.

The second set:

Every theme has its own neutral family, font, radius and elevation combination, and no two themes that share a neutral family have primaries closer than ΔE_OK 0.04 in both modes. createThemeFromSeed({ contrast: 'AAA' }) searches every text pair to 7:1 and needs a neutral family; chartSeeds (five hex colors) replaces the derived chart series before the chart repair.

Each definition can also set catalog metadata (packages/themes/src/library/types.ts):

The first 32 definitions carry product categories and tags; optional metadata uses the defaults above when a definition omits it. The additional 32 entries make the collections explicit. tests/library.test.ts checks every definition: unique kebab-case ids, #rrggbb seeds, known fonts, neutrals, collections, moods and contrast levels, density range, and the style profile through core's ThemeStyleSchema.

The registry API (packages/themes/src/library/registry.ts):

The dynamic import keeps the palette engine out of the eager metadata chunk in bundlers that split on import().

Using a library theme in any prototype. Every prototype can use every library theme with no code of its own. mountPrototype gives the runtime a resolver (resolveLibraryTheme in packages/renderer-svelte/src/mount.ts) that loads @protoyard/themes/library the first time an unknown id is asked for: a ?theme=fintech-ledger link, a scenario's appearance.themeId, a persona preference or a DevTools override. The resolved theme is validated, registered once and applied like any other theme. The no-flash cache then replays it before the next boot, and a stored override keeps it across reloads. An id the library does not know falls back visibly to the manifest default.

The same ids work declaratively: "defaultTheme": "fintech-ledger" in protoyard.json, appearance: { themeId: 'health-clinic' } in a scenario, or "brand": { "libraryTheme": "fintech-ledger" } in a blueprint (below). The manifest schema accepts any kebab-case theme id (ThemeIdRefSchema in packages/core/src/manifest.ts), and pnpm protoyard validate <slug> runs a Theme ids check: defaultTheme and every scenario appearance.themeId must be a built-in preset, one of the prototype's own themes or a library id. An unknown id is a warning that names the closest known ids (defaultTheme: unknown theme "fintech-ledgr"; closest: fintech-ledger, …), because the runtime falls back instead of failing.

The gallery's Themes page (apps/gallery/src/pages/themes.astro), the UI Kit prototype's Theme Lab and the CLI list them too.

The gallery Themes page renders 70 cards (64 library themes and six built-ins) as static HTML with precomputed light and dark CSS variables, then hydrates a small filter island. Search, collection and mood filters stay in ?q=, ?collection= and ?mood=; the page mode toggle changes every card's palette and the ?theme=<id> link for the selected prototype. Chart series previews use the same mode-specific variables as each card, so the palette engine does not ship to the gallery page.

DevTools → Look → Theme is a theme browser (packages/devtools/src/sections/ThemeBrowser.svelte). It groups the prototype's own themes, the built-in presets and saved custom themes, with the whole library collapsed behind Browse N more themes:

• Search matches name, id, description, tags, mood, category and

collection across every group (searchThemeLibrary for the library). A status line announces how many themes match. Searching or filtering shows library matches without expanding it.

• Collection chips (industry, brand-like, high-contrast,

colorblind-safe, seasonal, mono, with counts) and a tag filter narrow the library.

• Library cards show the seed and secondary colors until the theme is

loaded, then its primary, accent, surface and foreground. Choosing one loads it through the runtime's resolver; the card shows a spinner until it applies.

• The choice is a temporary override or the persona's preference, per "Apply

changes as" above. Each group is a radio group: arrow keys, Home and End move within it, and Tab moves between groups.

Custom themes per prototype

Pass themes to definePrototype({ themes }). They are added to the built-in presets (a theme with a preset's id replaces that preset in this prototype) and appear in DevTools → Look.

Generate one from a seed, or start from a preset's palettes and change a few tokens. Either way the prototype needs "@protoyard/themes": "workspace:*" in its package.json dependencies (then pnpm install). For example, in src/theme.ts:

import { defineTheme } from '@protoyard/core';
import { oceanTheme } from '@protoyard/themes';

export const harborTheme = defineTheme({
  id: 'harbor',
  name: 'Harbor',
  description: 'Ocean surfaces with a deep teal accent.',
  radius: '0.5rem',
  light: { ...oceanTheme.light, primary: '#0f766e', primaryForeground: '#ffffff', ring: '#0d9488' },
  dark: { ...oceanTheme.dark, primary: '#2dd4bf', primaryForeground: '#042f2e', ring: '#2dd4bf' },
  style: { elevation: 'crisp' },
});

// src/prototype.ts
export const definition = definePrototype({
  manifest: parseManifest(manifestJson),
  // …
  themes: [harborTheme],
});

To make it the default, set "defaultTheme": "harbor" in protoyard.json. A scenario can also pick it: appearance: { themeId: 'harbor', mode: 'dark' }.

Every palette needs all 33 tokens; spreading a preset palette or using createThemeFromSeed is how you avoid writing them all. Without the extra dependency, write both palettes in full with defineTheme() from @protoyard/core. pnpm protoyard theme create (below) writes a complete src/theme.ts for you.

The blueprint brand block

A blueprint for pnpm protoyard generate can carry an optional brand (packages/blueprint/src/schema.ts, resolved by resolveBlueprintBrand in packages/blueprint/src/brand.ts):

{
  "formatVersion": 1,
  "name": "Acme Desk",
  "brand": { "seed": "#0f766e", "name": "Acme Teal", "styleProfile": "soft", "font": "grotesk" },
  "entities": ["…"],
  "roles": ["…"]
}

generate builds the theme (palette engine for a seed, or a copy of the preset), applies the profile, font, radius and density, and checks every text and UI pair in both modes. A failing brand stops generate with a validation error listing the pairs. On success it writes src/generated/brand-theme.ts, registers the theme in src/prototype.ts (themes: [acmeTealTheme]) and sets defaultTheme in protoyard.json. A dry run of the blueprint above lists, among the other files:

$ pnpm protoyard generate acme-desk --blueprint ./acme-desk.blueprint.json --dry-run
- Dry run: would write prototypes/acme-desk (39 files, nothing written)
  …
  generated src/generated/brand-theme.ts
  …
  emitted   src/prototype.ts
  …

With "brand": { "libraryTheme": "fintech-ledger" }, generate writes no theme module and keeps the template's src/prototype.ts: it only sets "defaultTheme": "fintech-ledger", and the renderer loads the library theme on demand (its contrast is covered by the library's own tests). The id is checked against THEME_LIBRARY_META by generate and pnpm protoyard blueprint validate; an unknown id fails with exit 4 and the closest ids. The check lives in brandLibraryThemeId (packages/blueprint/src/brand.ts), not the zod schema, because parseBlueprint runs inside generated prototypes and the library stays out of their initial chunk.

Without brand, the template's default theme is kept.

Theme Studio

DevTools → Look has a Theme Studio section (packages/devtools/src/sections/ThemeStudioSection.svelte). It is its own lazy chunk: its code loads only when you press Open studio.

Storage. Custom themes are kept in this prototype's control database (protoyard.<namespace>.control, key customThemes), never in the data database, so they survive reloads and scenario loads but do not travel to other prototypes or browsers. The runtime (packages/runtime/src/theme.ts) enforces the rules:

The same API is on the runtime's theme controller for scripts and tests: customThemes(), isCustom(id), saveCustom(input), removeCustom(id), exportTheme(id) and importTheme(json).

The Studio's download is a bare theme object, ready for protoyard theme import or theme create --from. The runtime's exportTheme(id) API returns the versioned wrapper; the Studio unwraps that response for its JSON download. The versioned wrapper is also accepted by Studio import.

The CLI

pnpm protoyard theme <command> (packages/cli/src/commands/theme.ts). Every command also takes --json.

create and import validate the theme with ThemeSchema and the WCAG pairs in both modes before writing, refuse to overwrite an existing src/theme.ts without --force, and print the file instead of writing it with --dry-run. They write the file only; register the exported theme in definePrototype({ themes }) yourself.

List the six presets and the 64 library themes:

$ pnpm protoyard theme list
violet	Violet	builtin
ocean	Ocean	builtin
emerald	Emerald	builtin
rose	Rose	builtin
amber	Amber	builtin
monochrome	Monochrome	builtin
fintech-ledger	Fintech Ledger	library
health-clinic	Health Clinic	library
…
climate-earth	Climate Earth	library
crypto-ledger	Crypto Ledger	library

Export a built-in or library theme (library themes are built on the fly with loadLibraryTheme). css prints both palettes as --py-* variables under :root and .dark:

$ pnpm protoyard theme export fintech-ledger --format css
:root {
  --py-background: #fafafa;
  --py-foreground: #111827;
  …
  --py-primary: #007a71;
  --py-primary-foreground: #ffffff;
  …
  --py-radius: 0.5rem;
  --py-density: 0.95;
  --py-font-family: var(--py-font-stack-grotesk-sans, "Helvetica Neue", Helvetica, Arial, sans-serif);
}

.dark {
  …
  --py-primary: #00a296;
  --py-primary-foreground: #09090b;
  …
}

tailwind prints an @theme block that maps the variables to color utilities; tokens prints W3C design-tokens JSON (colors per mode, radius, font family, density):

$ pnpm protoyard theme export ocean --format tailwind
@theme {
  --color-background: var(--py-background);
  --color-foreground: var(--py-foreground);
  …
  --color-shadow: var(--py-shadow);
  --radius-theme: var(--py-radius);
}

$ pnpm protoyard theme export violet --format tokens
{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "name": "Violet",
  "color": {
    "light": {
      "background": {
        "$type": "color",
        "$value": "#fafafa"
      },
  …

The exports cover the palettes, radius, density and font family only, not the style profile. Two naming details differ from base.css: the css format names the font --py-font-family (the runtime uses --py-font-sans), and the tailwind format names chart colors --color-chart1 (the base stylesheet uses --color-chart-1). An unknown id exits with code 3 and lists the known ids.

Create a theme file from a seed (shown as a dry run, nothing written):

$ pnpm protoyard theme create crm-demo --id harbor --name Harbor --seed '#0f766e' --secondary '#1d4ed8' --dry-run
Would write prototypes/crm-demo/src/theme.ts
import { defineTheme } from '@protoyard/core';

export const harborTheme = defineTheme({
  "id": "harbor",
  "name": "Harbor",
  "description": "Generated from #0f766e and #1d4ed8.",
  …
  "light": {
    …
    "primary": "#007a71",
    "primaryForeground": "#ffffff",
  …
});

Import a bare theme JSON file into a prototype (or use theme create <slug> --from <file>, which does the same):

$ pnpm protoyard theme import crm-demo ./harbor.theme.json --dry-run
Would write prototypes/crm-demo/src/theme.ts
import { defineTheme } from '@protoyard/core';

export const harborTheme = defineTheme({
…

Mode, reduced motion and density

Precedence

The effective theme, mode and reduced-motion value each come from the first layer that sets them:

DevTools shows the source next to each value. Switching persona can change the look, because preferences are stored per persona. An unknown theme id (a deleted custom theme, a bad link) falls back visibly to the manifest default with source default.

Theme and persona changes never write to the data database (ADR-005 in DECISIONS.md).

No flash on load

The runtime boots asynchronously, so without help the page would paint with the default colors and then switch. Two things prevent that:

1. base.css ships Violet defaults for :root and .dark, so the first

paint is already themed.

1. defineProtoyardConfig() injects noFlashScript(namespace) as the first

<head> script. It replays the last applied appearance from localStorage (protoyard.<namespace>.appearance) before first paint: the --py-* variables, mode class, theme id, motion, data-py-surface and the allowlisted component profile attributes. Without a cache it still honors prefers-color-scheme.

The renderer refreshes that cache every time the appearance changes. The script only replays --py-* names with string values and known profile values, and every storage access is wrapped in try, so private mode or a tampered cache cannot break the page or inject markup.

Per-prototype isolation

applyAppearance() also works on any element, not only <html>. That scopes a theme to a subtree, which is how the Theme Studio preview, the gallery's Themes page and the UI Kit's Theme Lab show themes side by side. clearAppearance(el) removes everything it wrote.

Contrast checks

Presets, library themes and generated themes are tested against WCAG 2.x contrast (TEXT_CONTRAST_PAIRS and UI_CONTRAST_PAIRS in packages/themes/src/contrast.ts):

In the presets, warning is a fill: use bg-warning text-warning-foreground, not text-warning.

The helpers are exported, so a prototype test can check its own theme:

import { contrastRatio, TEXT_CONTRAST_PAIRS, UI_CONTRAST_PAIRS } from '@protoyard/themes';
import { harborTheme } from '../src/theme.ts';

it('harbor meets contrast in both modes', () => {
  for (const mode of ['light', 'dark'] as const) {
    const palette = harborTheme[mode];
    for (const [fg, bg] of TEXT_CONTRAST_PAIRS) {
      if (!palette[fg].startsWith('#') || !palette[bg].startsWith('#')) continue; // helpers read hex only
      expect(contrastRatio(palette[fg], palette[bg])).toBeGreaterThanOrEqual(4.5);
    }
    for (const [fg, bg] of UI_CONTRAST_PAIRS) {
      expect(contrastRatio(palette[fg], palette[bg])).toBeGreaterThanOrEqual(3);
    }
  }
});

contrastRatio() accepts #rgb and #rrggbb only. Translucent values such as the dark-mode borders (rgb(255 255 255 / 0.1)) cannot be checked this way, which is why the loop skips non-hex values.

Performance

Library theme tokens are built only when a theme is loaded, and the Theme Studio is a separate DevTools chunk. For measured bundle and timing impact of the library, the palette engine and the Theme Studio, see PERFORMANCE.md.