Ensemble Ops
Funnel

Theme composer flow

A guided operator prototype for composing recipe, page type, block stack, and appearance presets as one themed experience.

steps · 3
static fallback
Step 1

Choose a recipe

Start with a normalized visual rule set before changing individual tokens.

Theme recipe

Pick the design feeling before tuning the details.

Recipes normalize type scale, spacing rhythm, radii, depth, and contrast relationships so a page can feel custom without drifting out of polish.

conversion

Recipe brief

Prototype inputs for desired feeling, density, conversion pressure, and page family. A future editor can persist these into theme.json recipe configuration.

2 fieldsLow-frictionPrivacy aware

We only use your answers for this request.

Recipe relationships

Type scale1.12-1.30

Defines heading, body, button, and metric sizes.

Spacingcompact-spacious

Normalizes page, section, card, and control rhythm.

Depthflat-glass

Connects shadows, surfaces, borders, and pattern templates.

Step 2

Compose page types

Choose the page families that should share the recipe and then tune block stacks per journey.

Page type composition

Each page type maps to curated wrapper blocks rather than raw primitives.

Landing

Campaign or product launch

Hero, social proof, metrics, bento story, CTA, footer.

heroctaproof

Template set

Editorial block system

Cloneable landing and contact pages with slot metadata for every top-level and nested block.

landingcontactslots

Funnel

Guided intake or onboarding

Multi-step form, progress, adaptive recommendations, conversion CTA.

formstepper

Commerce

Product or listing page

Product grid, product card, media, FAQ, checkout handoff.

productlisting

Application

Dashboard and customer portal

Cards, tables, tabs, alerts, navigation, and command wrappers.

shadcnops

Editorial

Article or resource hub

Markdown, media, breadcrumbs, pagination, related content.

contentseo

Support

Knowledge and service pages

FAQ, forms, step lists, contact CTAs, and event-backed feedback.

faqservice

Keep page composition declarative.

The operator chooses page type, recipe, appearance preset, and block wrappers. The runtime resolves the renderable React experience.

Step 3

Review visual QA

Confirm the recipe against representative blocks before promoting it to a site, page, or experiment.

Theme lab

Composer QA matrix

A focused matrix for the page families selected in the composer flow.

Active recipe

Polished SaaS

Ensemble Daylight with Configured blocks and Base defaults.

Grade A ready
ThemeEnsemble Daylight

ensemble-daylight

RecipePolished SaaS

polished-saas

Block setConfigured blocks

9 visible blocks

Block designBase

Theme recipe and selected appearance preset only.

MediaGenerated preview

16 / 9

Presetshadcn

13 presets available

QualityGrade A ready

0/0 dimensions covered

foundation 53visible blocks 9shadcn primitives 59Tailwind taxonomy 57theme tokens 43recipes 19sets 1designs 4media 1catalog 216
Theme tokens
Contrast AAText on background 15.73Text on panel 16.35Muted text on panel 5.71Button text on button 5.17Control text on control 17.74Badge text on badge 7.58
implemented

Hero

Theme lab

hero preview

A configured block rendered through the shared runtime.

implemented

Markdown

markdown preview

Theme and appearance should remain legible.

implemented

Conversion CTA

conversion-cta CTA

Calls to action keep event metadata and appearance context together.

implemented

Form Template

conversion

Form template

11 fields2 requiredPrivacy aware
Verification code
Support

We only use your answers for this request.

implemented

Metric Grid

metric-grid metrics

CoverageReady
implemented

Bento Grid

Bento grid

Tile

Bento card sample.

themepreset
compatibility

Product Grid

Product grid

Generated theme lab placeholder

Launch kit

$49

Ready-to-style product tile.

new
Generated theme lab placeholder

Care plan

$19

Recurring service tile.

plan