Every key state of the Generator surface, each framed on its own so they can be reviewed and screenshotted side by side. The index page is rebuilt on the shared page shell (grey body, white breadcrumb bar, header on grey, white cards) from style-guide/page-shell.md — fixing the divergence where the live generator flow rendered its own dash-head / h1 header and a detached toolbar instead of matching the Generators tab in the project studio.
01Generators index · populatedShell-consistent: breadcrumb bar + header on grey + search/filter row + card grid. Matches the project-studio Generators tab.
02Generator card · batch factsNew card (always top-left), then generators surfacing their own facts — batches, pinned outputs, and export state. Generators have no Draft/Review/Live lifecycle; those belong to collections.
03Batch-fact filterShared control bar — generators filter by their own facts: All / No batches / Generated / Exported. No Draft/Review/Live (those are collection states).
04Build · Parts tabLayer rail + tabbed panel (Parts / Compatibility), weight pills, cap & exclusion badges, and the compatibility nudge.
Decide which parts can appear together.Once you have a few parts in each layer, set up compatibility rules — e.g. "Lilac body excludes the Hat layer" — so the generator never produces awkward combinations.
+
Add part
Body · Base 01
w 3 · Balanced
Cap 15%
Body · Sun glow
w 2 · Infrequent
Body · Cobalt
w 5 · Frequent
Body · Coral
w 3 · Balanced
Excludes hat
Body · Lilac
w 2 · Infrequent
Body · Mint
w 3 · Balanced
Cap 5
Body · Obsidian
w 1 · Very infrequent
Body · Rose
w 3 · Balanced
Opaque
Cap 10%2 rules
Body · Sky
w 5 · Frequent
Body · Amber
w 8 · Very frequent
Body · Crimson
w 1 · Very infrequent
04bLayer · move, rename, deletePer-layer controls in the build rail: drag the grip to reorder the render stack, and an options menu for rename & delete. Add layer sits at the bottom. Rename opens the Edit-layer modal; Delete opens the destructive confirm.
⠿
Background8 parts
⠿
Body12 parts
⠿
Head10 parts
05Build · select modeMulti-select toolbar (Select all / Cancel / Delete N) with checkable tiles — 3 selected.
3 selected
Body · Base 01
w 3 · Balanced
Cap 15%
Body · Sun glow
w 2 · Infrequent
Body · Cobalt
w 5 · Frequent
Body · Coral
w 3 · Balanced
Excludes hat
Body · Lilac
w 2 · Infrequent
Body · Mint
w 3 · Balanced
Cap 5
Body · Obsidian
w 1 · Very infrequent
Body · Rose
w 3 · Balanced
06Build · Compatibility tabRule summary, type filters, Part→Part / Part→Layer rules, and validation checks.
2active rules
No conflicts
0unreachable
Part → Layer · 1 rule
Lilac
Body · part
Excludes
Hat
Layer
"Lilac body looks weird with any hat — exclude the Hat layer entirely."
Part → Part · 1 rule
Obsidian
Body · part
Requires
Round eyes
Head · part
"Obsidian body only reads correctly with the Round eyes head."
Validation
No contradictions between requires/excludes
No self-referencing rules
All rule targets exist
No unreachable selections under current weights
07Build · no layers yetA fresh generator before any layers are added.
A generator is a recipe. Stack layers, upload parts, set weights, and decide which parts can appear together. Composition evidence here is canonical — scores derive from it.
No layers yet.
Layers stack from back to front — background first, accessories last. Each layer holds a set of interchangeable parts.
08Build · layer has no partsLayer exists but is empty — upload prompt in the parts panel.
Head
0 parts
Drop PNGs
or
+ Upload
Upload transparent PNGs at a consistent canvas size. Weights default to 1 and can be tuned per part.
09Preflight · configure batchStep rail + four ways to generate: limited number, from seed / bookmarked batch, from CSV, and single token. Pressing Generate in any mode first runs the project cycles estimate (rendering + storing outputs costs cycles) — see 09b–09e.
How many tokens do you want to generate in this run?
From seed
Replay a previous run. Either enter a seed manually, or pick from your bookmarked batches — not both.
or
From CSV
Upload a CSV with the exact combination of layers and parts you wish to include. Download an example template to see how the data should be set out, plus a list of every layer and part name in this generator so your data matches.
You have not uploaded any files.
Single generation
Generate one token with these exact layers and parts.
09bGenerate · cycle estimate (balance OK)Pressing Generate first estimates what the run costs to render and store, then checks it against the project balance. With headroom, the batch starts normally — same guard used for every upload (see cycle-tracking gallery).
Generate batch
A limited run of 200 tokens. Outputs are rendered and stored in the project's blob storage, which is funded from project cycles.
Estimated cost
~0.85 T cycles
Project balance
9.452 T
After run
~8.60 T
Enough cycles to render and store all 200 outputs and keep your reserve.
09cGenerate · low balance (inline)The estimate exceeds the available balance. The run isn't abandoned — the configuration is held and the primary action becomes Top up & generate.
Generate batch
A limited run of 200 tokens. Outputs are rendered and stored in the project's blob storage, which is funded from project cycles.
Estimated cost
~0.85 T cycles
Project balance
0.300 T
Shortfall
~0.55 T + reserve
Not enough cycles to generate this batch. Lower the count, or top up — your run stays configured and starts straight away once cycles land.
09dTop up to continue · run queuedThe inline top-up. The configured run is held at the top so nothing is lost; once cycles land in blob storage, the batch generates automatically.
Top up to continue
200-token run queued · ready to generate
This run (est.)~0.85 T
Project balance0.300 T
Recommended top-up (cost + reserve)1.000 T
Top up amount
T cycles · ≈ 0.30 ICP
from your wallet to the project canister
Cycles are sent to the project canister; Toko moves what's needed into blob storage. After it lands, the run starts automatically.
09eTopped up · run completesAfter the top-up lands, the queued batch generates automatically and finishes — confirmed in the same window, with cycles used and balance remaining.
Topped up — generating
Added 1.000 T cycles. Balance is now 1.300 T. The queued run is generating now.
200 / 200 generatedComplete
Cycles used0.85 T
Balance remaining0.45 T
10Curate · pin & filterStep rail + stats + filter toolbar + output grid with pin states + export bar.
Pinned outputs from any of this generator's batches are the ones that will be exported. Click a tile to preview and pin, or filter by source batch below.
Pinned
12across 4 batches
Unpinned
2,221
Source batches
4generated
#0001Pinned
#0002—
#0003Pinned
#0004—
#0005—
#0006Pinned
#0007—
#0008—
#0009Pinned
#0010—
#0011—
#0012Pinned
12 of 200 pinned · only pinned outputs are exported
11Curate · select & modalsMulti-select toolbar, the single-output preview (pin / unpin), and the delete-outputs warning.
3 selected
#0001Pinned
#0002—
#0003Pinned
#0004—
#0005—
#0006Pinned
Single output preview
Pin this output if you are happy with it.
#0001
Delete outputs
You are about to delete 12 outputs. Are you sure? This cannot be undone. Pinned outputs will not be erased.
12Export · send to collectionTarget-collection picker (link-state badges), export snapshot, one-way banner — plus the confirm & progress modals.
Send 12 pinned outputs to a collection. Pinned outputs become draft token definitions in the target collection. You can keep editing each token's name, attributes, and imagery on the collection side — exports preserve provenance (which generator, batch, and seed each token came from), but parts and layers stay editable. A collection can only be linked to one generator.
Lorem Drop No. 1 · Spring set
Project · Ipsum Studio · Draft · 0 tokens
No generator linked✓
Dolor Series II
Project · Sit Amet · Draft · 320 tokens
Linked to a different generator
Consectetur Pack
Project · Adipiscing Lab · Draft · 0 tokens
No generator linked
What will be exported
Outputs
12 pinned
Source generator
Lorem Drop No. 1
Source batches
4 batches · Spring run (4) · Hat tweaks (4) · v2 candidates (3) · Solo dropouts (1)
Provenance preserved
Generator id · batch id · seed · per-output composition
Pinned outputs from multiple batches are exported as a single grouped operation. Each token on the collection side keeps its source batch attached as metadata.
Export is one-way, but tokens stay editable
Pinned outputs become draft token definitions in the target collection. You can edit each token's name, attributes, and imagery on the collection side, and keep iterating on this generator to export more later. What you can't do is push tokens back into the generator — it's a one-way relationship.
12 pinned outputs · target: Lorem Drop No. 1 · Spring set
Confirm export
You're about to export 12 pinned outputs to Lorem Drop No. 1 · Spring set as draft token definitions.
This collection becomes permanently linked to Lorem Drop No. 1 — a collection can only be linked to one generator.
Each token's name, attributes, and imagery can still be edited on the collection side.
You can keep iterating on this generator and export more tokens later.
Exporting to Lorem Drop No. 1 · Spring set
Creating token 7 of 12…
58%
Per-batch progress
Spring run
4 / 4
Done
Hat tweaks
3 / 4
In progress…
v2 candidates
0 / 3
Pending
Solo dropouts
0 / 1
Pending
You can close this and the export will keep running in the background. We'll notify you when it's complete.
13Empty state · no generatorsCharacter moment + the three-step build/generate/export story + primary CTA.
White breadcrumb bar is the only white strip at the top.
h2 "Generators." in section-head, on the grey.
Search + segmented filter live in the header .row.
Search + batch-fact filter live in the header .row, matching the rest of the studio.
15Create generator · modalThe "New generator" dialog (name + private notes) rebuilt on the shared modal-card — Anton title, Mona Sans labels/body, standard ghost/primary footer buttons.
New generator
Just for your eyes — these notes are never shown to the public.
16Layer modals · new & editAdd a layer (name, inclusion policy, stack order) and edit an existing one — option titles in Mona Sans like the Preflight gen-modes, modal titles in Anton.
New layer
Use the default name or enter your own. You can always change it later.
Inclusion policy
Order
Edit layer · Body
Inclusion policy
To reorder this layer in the stack, drag its row by the grip handle in the build view.
17Add part · single & batchThe add-part dialog for a layer — single part with weight preset + cap, and the batch-upload tab. Both surface the transparency warning when opaque files (JPEGs) are selected. Pressing Add part(s) runs the project cycles estimate before the files are stored — see 17b–17d.
Add part · Body
Must be unique within this layer.
Asset
blossom.jpg JPEG · 512 × 512
blossom.jpg doesn't support transparency. "Body" stacks above other layers, so anything on the layers below will be hidden behind this part. For parts that stack on top, use .png, .webp, .apng or .svg.
See supported file types →
Weight
Cap · Optional
Limits how often this part appears in a batch.
Add part · Body
Assets · 12 added
Drop more files or browse. Each file becomes a part, named from its filename.
2 of these files don't support transparency (sun.jpg, sky.jpg). Parts on the layers below them will be hidden behind them — replace with .png, .webp, .apng or .svg, or remove them from the batch.
See supported file types →
Default weight for uploaded parts
10 transparent · 2 opaque. You can still add all 12 — each opaque part keeps the warning badge in the grid.
17bAdd parts · cycle estimate (balance OK)Committing a batch upload runs the same estimate → check guard. The files are uploaded and held; storing them in blob storage is funded from project cycles. With headroom, they store normally.
Add 12 parts · Body
12 parts staged · 18 MB · uploaded & held
Estimated cost
~0.05 T cycles
Project balance
9.452 T
After upload
~9.40 T
Enough cycles to store these 12 parts and keep your reserve. Toko moves project cycles into blob storage automatically.
17cAdd parts · low balance (inline)Estimate exceeds the balance. The upload is never cancelled — the 12 files stay staged and the primary action becomes Top up & add parts.
Add 12 parts · Body
12 parts staged · 18 MB · uploaded & held
Estimated cost
~0.05 T cycles
Project balance
0.030 T
Shortfall
~0.02 T + reserve
Not quite enough cycles for this upload. Your 12 files stay staged — top up and they'll store straight away. Nothing is lost if you top up now.
17dTop up to continue · parts stagedThe inline top-up for parts. The staged upload is shown at the top so it's clear nothing was cancelled; topping up resumes the store automatically.
Top up to continue upload
12 parts staged · 18 MB · ready to send
This upload (est.)~0.05 T
Project balance0.030 T
Recommended top-up (cost + reserve)1.000 T
Top up amount
T cycles · ≈ 0.30 ICP
from your wallet to the project canister
Cycles are sent to the project canister; Toko moves what's needed into blob storage. After it lands, the staged parts store automatically.
18Supported file typesReference modal opened from "See supported file types" — image, animation, vector and audio formats.
Supported file types
Toko accepts a range of image, animation, vector and audio formats for layer parts. A layer doesn't have to be visual — a "Soundtrack" layer with audio parts is a valid use of the same composition model.
Still images
For most visual parts — body shapes, backgrounds, hats, accessories.
.png · .jpg · .jpeg · .webp
Animated
For visual parts that move — sparkle effects, blinking eyes, flowing capes. Animation plays in the token preview and on the secondary marketplace.
.gif · animated .webp · .apng
Vector
Crisp at any size — good for geometric shapes or text-based parts.
.svg
Audio
For sound layers — soundtracks, voice clips, ambient loops. Plays alongside the visual composition in the token preview.
.mp3 · .wav · .ogg · .m4a · .flac
Heads up: for parts that stack on top of other layers (bodies, hats, accessories), use a format that supports transparency — .png, .webp, animated .webp, .apng, .gif, or .svg. A JPEG-on-top will paint over the layers underneath.
Max file size and per-extension limits — TBD. Final list will be confirmed once asset-pipeline support is locked.
19Compatibility rule · new & editScope chooser (part→part / part→layer), the if/relation/target selects, an optional reason, and the save-time validation note.
New compatibility rule
Rule scope
If this part is selected
Relation
Target
Reason · Optional, shown to creators on the rule card
When you save, we'll check for contradictions, self-references, missing targets, and unreachable selections — and reject the rule if any apply.
Edit compatibility rule
Rule scope
If this part is selected
Relation
Target
Reason · Optional, shown to creators on the rule card
When you save, we'll re-check for contradictions, self-references, missing targets, and unreachable selections — and reject the change if any apply.
20Destructive confirmationsShared "are you sure?" template with the anxious/ character frame and a red confirm button — delete part, bulk delete, delete layer, delete rule.
Delete part · Body · Cobalt?
Are you sure?
This will permanently delete Cobalt from the Body layer. Compatibility rules referencing this part will also be removed. You can't undo this.
Delete 11 parts?
Are you sure?
This will permanently delete 11 parts from the Body layer. Compatibility rules referencing any of these parts will also be removed. You can't undo this.
Delete layer · Body?
Are you sure?
This will permanently delete the Body layer and all 12 parts inside it. Compatibility rules referencing this layer will also be removed. You can't undo this.
Delete this rule?
Are you sure?
This will permanently remove this compatibility rule. Future batches may produce combinations this rule previously prevented. You can't undo this — but you can re-add the rule from scratch.
21Batches · historyStep 5 of the flow, rebuilt on the page shell: bookmarked batches up top, full batch history below. Bookmark names are Anton; dates are monospace.
Review previous batches, copy seeds or bookmark your favourites to make future regenerations easier.
Your bookmarks
4 bookmarks
Spring run
May 26 · 14:30
200 outputs · 12 pinned
Hat tweaks
May 24 · 11:08
80 outputs · 4 pinned
V2 candidates
May 22 · 09:42
500 outputs · 38 pinned
Solo dropouts
May 19 · 17:55
1 output · 1 pinned
View all batches
20 batches
May 27 · 14:30
Limited · 50 · 0 pinned
May 27 · 11:02
Limited · 100 · 6 pinned
May 26 · 16:18
CSV · 34 · 0 pinned
May 25 · 22:01
Limited · 20 · 2 pinned
May 25 · 10:33
Single · 1 · 1 pinned
May 24 · 18:47
Limited · 75 · 3 pinned
22Batch modalsBatch preview (jump into Curate), parts-used breakdown, plus add / edit / remove-bookmark dialogs.
Batch preview
A quick overview of the outputs in this batch. To pin, delete unpinned, or export, open the batch in Curate.
Parts used in this batch
How many distinct parts from each layer appeared across this 250-token batch (used / available). A layer that barely moved may mean a cap or weight needs tuning.
Background6 / 8
Body5 / 12
Head9 / 10
Mouth Optional4 / 6
Hat Optional2 / 8
Accessory Optional1 / 10
Accessory only used 1 of 10 parts. If you expected more variety, check that layer's weights and caps.
Add bookmark
Bookmark and rename this batch for easy access. Bookmarks appear at the top of your Batch History, and their seed will show in the dropdown when generating new batches.
Custom name · Optional
Edit bookmark
Rename your bookmark.
Custom name · Optional
Remove bookmark
This batch will no longer appear at the top of your Batch History, or in the dropdown when generating new batches. Removing a bookmark also clears the custom name — but you'll still be able to find this batch by its creation date and time.
