# Gyro design iteration — 13 September 2026

## Brief and method

Three independent product-led proposals, followed by implemented refinements and a screenshot-diff imagegen review. The built-in image generation tool is used; generated raster numbers are never app data. Existing logos and artwork remain native assets. Screenshots are browser captures, not painted substitutes.

Users: vault holders need holdings, return versus a passive limit order, and Deposit/Withdraw; passive sellers need listing IV, available shares and order lifetime; active buyers need option amount, expiry and total executable cost. Epoch history, existing positions, claims and cancellation remain accessible. Site styles are independent. No contract, configuration or indexer migration is part of this work.

Capture setup: desktop 1440×1100; phone 390×1500. Gyro uses its URL-only read-only thetadeployer mode. Eiko/Meryl desktop and additional populated phone captures use the same public address for browser-only read calls without a signer. Initial phone references show disconnected state after mobile emulation reload. The 90-second interval is paused only in the review browser to stabilize screenshots. Values can change between captures; loading or pause states are not replaced with invented results. Eiko/Meryl Markets report paused in these captures; those gates are retained.

## Proposals — full prompts

### A — Position-first continuity

Inputs: before-desktop.png, before-mobile.png, before-buyer-mobile.png, before-seller-mobile.png.

```text
Use case: ui-mockup. Act as a skilled senior product UI/UX designer, producing a practical high-fidelity design board for a working derivatives app, not marketing concept art.
Product brief: near-permissionless option derivatives for any token. Vault deposits supply Uniswap liquidity; swaps hedge the continuously written option, fees provide floating income. Markets allow passive vault-share sellers to set listing IV and offer dated exposure; active buyers choose strike, expiry and option amount and assess the complete executable premium and buy IV. Sellers' offers convert only when filled. Do not promise guaranteed returns or capital protection.
User journeys: (1) vault holder selects chain, asset and strike, sees holdings, fees and actual return versus a passive limit order, then Deposit or Withdraw; past epochs remain discoverable. (2) seller sees available shares, selects IV and order lifetime, lists, then reviews/cancels existing offers. (3) buyer sees call/put depth in underlying option amounts, selects quantity/expiry, reviews total cost and buys; existing positions and claims remain accessible.
Inputs: Image1 current desktop vault is brand/content reference; Image2 current mobile vault is responsive reference (it may be disconnected); Image3 current mobile Buyer; Image4 current mobile Seller. All are references, not exact pixel edit targets.
Output: ONE large landscape review board with a desktop vault proposal plus three readable mobile screen proposals (vault, Buyer, Seller). Keep the selected site's identity, palette, logo and existing collateral. Show realistic mobile 44px minimum targets and 54px primary actions, no microscopic text. Prioritize user's position/actions over global TVL. Reduce repeated panel borders, redundant labels and paragraph walls. Use concise plain English, supporting explanation behind a native 'How it works' disclosure. Preserve chain/asset/strike choice, selected states, position refresh and card controls, accurate signed returns, real data fields, histories, paused/loading/disconnected/disabled distinctions and ability to Withdraw.
Do not invent financial numbers, new APY, sparklines, charts, new functionality or unsupported badges; use figures only from inputs, or an em dash if unavailable. No endless sidebars, oversized hero, repeated widgets, decorative financial illustration or jargon disclaimers. A paused market must remain visibly paused and listing/buying disabled. Numerical meanings and equations cannot change. Buyer metrics use options, not raw vault shares. Don't promote fees as total return. Keep user's brand artwork rather than inventing logo.
Site: Gyro: dark navy and teal, technical but approachable. Multichain controls must remain fully usable. Current read-only account mode stays read-only.
Direction A — Position-first continuity: Refine the existing approved style. Strong holdings hierarchy, compact instrument controls, aligned fees and signed returns, a simple continuous account statement. Buyers and sellers should reach their forms fast. Favor practical incremental HTML/CSS edits.
```

### B — Decision workspace

Inputs: before-desktop.png, before-mobile.png, before-buyer-mobile.png, before-seller-mobile.png.

```text
Use case: ui-mockup. Act as a skilled senior product UI/UX designer, producing a practical high-fidelity design board for a working derivatives app, not marketing concept art.
Product brief: near-permissionless option derivatives for any token. Vault deposits supply Uniswap liquidity; swaps hedge the continuously written option, fees provide floating income. Markets allow passive vault-share sellers to set listing IV and offer dated exposure; active buyers choose strike, expiry and option amount and assess the complete executable premium and buy IV. Sellers' offers convert only when filled. Do not promise guaranteed returns or capital protection.
User journeys: (1) vault holder selects chain, asset and strike, sees holdings, fees and actual return versus a passive limit order, then Deposit or Withdraw; past epochs remain discoverable. (2) seller sees available shares, selects IV and order lifetime, lists, then reviews/cancels existing offers. (3) buyer sees call/put depth in underlying option amounts, selects quantity/expiry, reviews total cost and buys; existing positions and claims remain accessible.
Inputs: Image1 current desktop vault is brand/content reference; Image2 current mobile vault is responsive reference (it may be disconnected); Image3 current mobile Buyer; Image4 current mobile Seller. All are references, not exact pixel edit targets.
Output: ONE large landscape review board with a desktop vault proposal plus three readable mobile screen proposals (vault, Buyer, Seller). Keep the selected site's identity, palette, logo and existing collateral. Show realistic mobile 44px minimum targets and 54px primary actions, no microscopic text. Prioritize user's position/actions over global TVL. Reduce repeated panel borders, redundant labels and paragraph walls. Use concise plain English, supporting explanation behind a native 'How it works' disclosure. Preserve chain/asset/strike choice, selected states, position refresh and card controls, accurate signed returns, real data fields, histories, paused/loading/disconnected/disabled distinctions and ability to Withdraw.
Do not invent financial numbers, new APY, sparklines, charts, new functionality or unsupported badges; use figures only from inputs, or an em dash if unavailable. No endless sidebars, oversized hero, repeated widgets, decorative financial illustration or jargon disclaimers. A paused market must remain visibly paused and listing/buying disabled. Numerical meanings and equations cannot change. Buyer metrics use options, not raw vault shares. Don't promote fees as total return. Keep user's brand artwork rather than inventing logo.
Site: Gyro: dark navy and teal, technical but approachable. Multichain controls must remain fully usable. Current read-only account mode stays read-only.
Direction B — Decision workspace: Explore a clear desktop working area with compact supporting context and a focused action/quote ticket; on mobile reorder by user's next decision. Separate Buyer and Seller choices clearly without adding a new navigation model. Richer information hierarchy, fewer nested boxes.
```

### C — Quiet precision

Inputs: before-desktop.png, before-mobile.png, before-buyer-mobile.png, before-seller-mobile.png.

```text
Use case: ui-mockup. Act as a skilled senior product UI/UX designer, producing a practical high-fidelity design board for a working derivatives app, not marketing concept art.
Product brief: near-permissionless option derivatives for any token. Vault deposits supply Uniswap liquidity; swaps hedge the continuously written option, fees provide floating income. Markets allow passive vault-share sellers to set listing IV and offer dated exposure; active buyers choose strike, expiry and option amount and assess the complete executable premium and buy IV. Sellers' offers convert only when filled. Do not promise guaranteed returns or capital protection.
User journeys: (1) vault holder selects chain, asset and strike, sees holdings, fees and actual return versus a passive limit order, then Deposit or Withdraw; past epochs remain discoverable. (2) seller sees available shares, selects IV and order lifetime, lists, then reviews/cancels existing offers. (3) buyer sees call/put depth in underlying option amounts, selects quantity/expiry, reviews total cost and buys; existing positions and claims remain accessible.
Inputs: Image1 current desktop vault is brand/content reference; Image2 current mobile vault is responsive reference (it may be disconnected); Image3 current mobile Buyer; Image4 current mobile Seller. All are references, not exact pixel edit targets.
Output: ONE large landscape review board with a desktop vault proposal plus three readable mobile screen proposals (vault, Buyer, Seller). Keep the selected site's identity, palette, logo and existing collateral. Show realistic mobile 44px minimum targets and 54px primary actions, no microscopic text. Prioritize user's position/actions over global TVL. Reduce repeated panel borders, redundant labels and paragraph walls. Use concise plain English, supporting explanation behind a native 'How it works' disclosure. Preserve chain/asset/strike choice, selected states, position refresh and card controls, accurate signed returns, real data fields, histories, paused/loading/disconnected/disabled distinctions and ability to Withdraw.
Do not invent financial numbers, new APY, sparklines, charts, new functionality or unsupported badges; use figures only from inputs, or an em dash if unavailable. No endless sidebars, oversized hero, repeated widgets, decorative financial illustration or jargon disclaimers. A paused market must remain visibly paused and listing/buying disabled. Numerical meanings and equations cannot change. Buyer metrics use options, not raw vault shares. Don't promote fees as total return. Keep user's brand artwork rather than inventing logo.
Site: Gyro: dark navy and teal, technical but approachable. Multichain controls must remain fully usable. Current read-only account mode stays read-only.
Direction C — Quiet precision: Explore maximum clarity with restrained rules, typography and grouping, minimal cognitive load, useful whitespace not huge gaps. Strong accessible contrast, comfortable mobile targets. Keep exact brand palette; Eiko may show its existing optional dark mode as a supporting inset, not change light default.
```


## Cross-design triage and implementation

Gyro A supplied compact account grouping; B made the action ticket easier to find but introduced a heavy desktop sidebar and unsupported menus; C reinforced quiet typography but removed controls/real history context. Adopted: a stronger neutral holdings headline, continuous fee/return sections, signed return amount and percent on one line, and shorter Markets guidance. Rejected: copied sidebars, new order controls, collapsing current history, invented freshness badges, green unsigned-fee emphasis and small raster targets. Pass 2: straighten separators, improve seller input borders and restore a visible native help marker. The diff board incorrectly reintroduced the empty-epoch badge and green fees; those were not copied.

Across all nine designs, the useful pattern was a stronger holdings headline, less nested framing, position/actions before site-wide totals, concise role-specific guidance and a nearby action form. The browser—not imagegen—sets 44px minimum targets, 54px vault actions, 16px mobile form input text and responsive width. Each site owns its own stylesheet. Existing artwork is enough: no new raster control or decorative element improved the task, so logos, inputs and disclosure icons stay native.

A preexisting real defect was found in review: paused Eiko/Meryl still painted an enabled seller-submit button. Each app now wraps only that submit in its own native fieldset, initially disabled and driven by the existing market/factory pause state. It fails closed while status is unknown, does not clear a button's own busy/read-only state, and leaves cancellation/claims/withdrawal outside the fieldset. This is a UI availability fix; no contract calls or financial calculations changed. Tests cover transitions and recovery. Empty options no longer instruct users to buy from a hidden depth board.

## Second imagegen pass — screenshot diff

Inputs: before-desktop.png, before-mobile.png, pass1-desktop.png, pass1-mobile.png, pass1-seller-mobile.png. Output: `img/designs/2026-09-13/designer-diff.png`.

```text
Use case: ui-mockup. You are the independent senior UI/UX designer doing the SECOND PASS: compare the actual before and implemented after screenshots for GYRO, then propose a very restrained final visual refinement.
Image1 BEFORE desktop vault; Image2 BEFORE phone vault (possibly disconnected); Image3 AFTER desktop vault; Image4 AFTER phone vault with real public-account position; Image5 AFTER phone seller. Images3,4,5 are targets for refinement. Others are comparison context only. Desktop1440CSSpx, phone390CSSpx. Do not interpret real balance differences between captures as errors or changes requested.
Product/user journeys: vault holders choose asset/strike, review holdings/fees/signed actual return versus a passive limit order, Deposit/Withdraw and inspect historical epochs. Passive sellers list existing shares at chosen IV and order lifetime, convert only when filled; active buyers choose option amount/expiry and assess total cost/buyIV. Preserve both roles, claims and ability to cancel, and all existing transaction gates.
Output ONE landscape review board showing refined desktop vault, phone vault and phone seller, with a small separate annotation column explaining at most THREE specific visual changes after comparing before/after. Focus only alignment, density, readable type, contrast and touch affordances that can be implemented with a small CSS patch. The after layouts already improve hierarchy and seller copy; keep the brand identity and approved design. Gyro stays navy/teal, all three chains usable, account stays read-only.
CRITICAL invariants: Use ONLY exact numbers and signs from AFTER inputs. Never hide negative returns, fees or return refresh control. Holdings are NOT 'guaranteed exit'. No made-up APY/history/graphs, no extra disclaimers, duplicate units or panels. Retain position card and refresh, Deposit and Withdraw side-by-side >=54px, other controls >=44px; do not shrink phone text or targets to squeeze. Keep all assets/strikes and actual selected values; preserve paused/loading/disabled states, native closed help/disclosures and OPEN Current Vault Epoch Results. Don't delete actual histories or read-only labels. Keep seller lead concise with optional How listing works; do not reintroduce paragraph walls or guaranteed claims. Do not add sticky overlays, menus, logo redraws, contracts or controls that don't exist. Don't mistake generated aesthetics for evidence that finance math is correct.
```

## Saved deliverables

All assets are in `img/designs/2026-09-13/`: `concept-a.png`, `concept-b.png`, `concept-c.png`, `designer-diff.png`; real before/pass1/final desktop and phone captures. Gallery: `designs.html#sep13`. Generated designs are clearly marked proposals. Earlier dated gallery sections remain intact.

## Verification

Final checks: all 15 targeted suites rerun successfully after the listing gate
fix (including 101 buyer quote/UI scenarios, 25 market quote cases and minimum
deposit tests). All 63 linked deliverables across the three latest gallery
sections returned HTTP 200. Final vault, buyer and seller captures at 390px and
1440px had no horizontal page overflow. New and changed app resources use fresh
cache versions; the staged indexer README and unrelated work are preserved.

Fresh independent Astra reviews: shell promotion, responsive controls, modal/history scope, and the listing pause-state fix. Fifteen targeted suites passed before the final UI gate fix; the expanded 16-case Markets pause suite and alpha/layout/demo suites passed afterward. Reviewer independently checked 320px widths, visible 44px controls, the Eiko position-card modal, and historical epochs. No transaction signed and no public share card minted.

Known unrelated checks: old M-cutover test hashes evolving Gyro code; no-swap Eiko harness expects a newer Gyro helper; chain-focus expects two deliberately independent forks to remain byte-identical. Those broader stale tests are not evidence of financial regression or blanket suite success. Existing history info spans use mouse-only title tooltips; not expanded in this design-only cycle. RPC cap/rotation warnings occurred during live reads; no indexer mutation performed.