# Meryl design competition — 12 September 2026

Final implementation verified at 320/390/1440px with no horizontal overflow.
DOM, fork-isolation/frozen-beta and M-wiring tests pass. Fresh Astra review
confirmed the closed-session button text remains correct at mobile specificity.
Contract wiring and calculations are unchanged; the only `app.js` edit removes
a duplicated USDC suffix beside its existing token label.

Final desktop/mobile captures contain real read-only thetadeployer holdings.
Background polling was paused in the review browser after the real return read
completed, to avoid capturing the transient loading state. This does not change
app polling or substitute data. Built-in imagegen supplied both visual passes;
their prompts, critiques and saved image paths are recorded below.

User selected **A** for implementation. Treat the raster as a guide, especially
where it repeats content. Preserve live metric meaning: the engine's
spot-marked holdings must stay labelled Holdings, not the concept's “Estimated
exit”, unless an actual executable exit result is available. No invented exit
amount or new calculation is part of the skin change.

## Implemented result

[Live app](app.html) · [Comparison and iteration gallery](designs.html) · [Final desktop](img/designs/desktop-final.png) · [Final mobile](img/designs/mobile-final.png).

Concept A is implemented in Meryl's own HTML/theme, version `statement4`. The only app.js change removes a duplicate USDC suffix from a presentation line; numeric calculations are unchanged. Existing runtime IDs, action handlers, entry gates, refresh controls and epoch records remain.

Applied after visual review: centered strike controls, compressed instrument context, aligned fee columns, reduced spacing and duplicate-unit cleanup. The single-chain selector is hidden only when the header already displays that chain. Rejected generated omissions of refresh controls, closed current-history state and undersized mobile controls. Pass 2 reduced the return gap by 8px and suppressed only the duplicate empty-epoch chip; nonempty records remain visible.

Main-agent validation: no horizontal overflow at 320, 390 and 1440 pixels; closed disclosure content stays hidden; app-fork, M wiring and DOM regression tests pass. Generated images remain design proposals rather than proof of CSS dimensions or runtime behavior.

| Stage | Desktop | Mobile |
|---|---|---|
| Initial implementation | [Screenshot](img/designs/desktop-initial.png) | [Screenshot](img/designs/mobile-initial.png) |
| Image proposal 1 | [Proposal](img/designs/desktop-visual1.png) | [Proposal](img/designs/mobile-visual1.png) |
| App after pass 1 | [Screenshot](img/designs/desktop-pass1.png) | [Screenshot](img/designs/mobile-pass1.png) |
| Image proposal 2 | [Proposal](img/designs/desktop-visual2.png) | [Proposal](img/designs/mobile-visual2.png) |
| Final app | [Screenshot](img/designs/desktop-final.png) | [Screenshot](img/designs/mobile-final.png) |

Two raster layout proposals, generated with the built-in image generation tool. These are design boards, not changes to app behavior. Reference: [current app capture](img/designs/current-app.png), used for the existing logo and asset identity only. Values are real read-only thetadeployer NVDAc $210 readings at capture time; they are not new app fixtures.

Outputs: [Concept A](img/designs/competition-a.png), [Concept B](img/designs/competition-b.png).

Recommendation: A. Its continuous statement and inline actions give the position a clearer hierarchy. B makes the actions conspicuous, but its outlined ticket competes with the position and repeats the accumulation/At roll treatment. Both preserve the required reference balances, negative return, four asset suffixes, and seven strikes after review. Neither is an implemented or mobile-tested UI.

Implementation corrections: A retains a tiny stray period after the account name despite the targeted edit. Both generated mobile views use smaller strike/disclosure targets than the requested 48px; actual CSS must enforce adequate target sizes and readable type rather than tracing the raster. Desktop/mobile widths are approximate, not validated CSS viewport measurements. Remove unrequested dropdown affordances on Base/account/expiry if no corresponding existing interaction exists. Preserve the existing SVG logo in implementation rather than the generated interpretation.

Tool metadata: built-in image_gen; initial A `exec-9242f8da-1ab6-4a50-bccd-4c4c269cf655.png`, final A `exec-548f0ee9-ebe3-4825-8b9a-fd7f9be8d0e0.png`; initial B `exec-4f878707-36cf-4316-b746-197c204d0188.png`, final B `exec-8512ae84-dc4e-4dd4-8f6e-ba9065131733.png`. Originals remain under `/home/ubuntu/.codex/generated_images/01a0942d-2f39-72e3-917a-69f0403b8358/`.

Targeted edit A:

```text
Use case: text-localization. Edit this Concept A Meryl UI design board with one text correction only: both desktop and mobile account text must read exactly 'thetadeployer', without any trailing period or other punctuation. Preserve all other content, numbers, token capitalization, colors, composition, sizes, layout, logo and design unchanged.
```

Targeted edit B:

```text
Use case: precise-object-edit. Correct ONLY the strike selector numeric labels on this Concept B Meryl UI board. Desktop currently omits $190: make seven equally sized chips in this exact order '$180', '$190', '$200', '$210', '$220', '$230', '$240', with $210 blue selected. Mobile currently duplicates $230: it must have first row '$180', '$190', '$200', '$210' with $210 selected, and second row '$220', '$230', '$240', then Spot $219. No duplicate and no missing strike. Preserve all other content, values (≈497.18 USDC, 0.5706 NVDAc + 372.17 USDC, −1.82 USDC, −0.36%), token capitalization, colors, desktop/mobile composition, logo, dimensions and design unchanged.
```

## Implemented A — visual refinement pass 1

Built-in image generation edits from the real desktop/mobile screenshots. Outputs: [desktop](img/designs/desktop-visual1.png), [mobile](img/designs/mobile-visual1.png). Source screenshots: `/tmp/meryl-a-desktop-visual1-source.png`, `/tmp/meryl-a-mobile-visual1-source.png`.

Adopt: center strike labels; move the standalone Base control into the instrument context; align desktop fee and holdings columns; reduce mobile gaps; remove duplicate USDC presentation suffix. Preserve actual return refresh control and epoch disclosure state even where generated desktop omits/changes them. Do not adopt generated mobile green styling for unsigned fee amounts. Mobile generation resized the raster and dropped standalone Base rather than relocating it; exact CSS dimensions and controls must be verified in browser. These are spacing proposals, not UI acceptance evidence.

Desktop prompt:

```text
Use case: precise-object-edit. High fidelity UI spacing and hierarchy refinement of this actual Meryl Concept A app screenshot. Keep exact existing Meryl logo, warm white/cobalt/navy brand and real screen dimensions. Modify density/alignment/minor typography only. Preserve every current control and exact token case: NVDAc, AAPLc, GOOGLc, METAc. Seven strikes $180 $190 $200 $210 $220 $230 $240, only210selected, spot$219. Holdings ≈496.96 USDC; holdings breakdown 0.570699 NVDAc + 371.93 USDC with ONLY ONE USDC suffix after371.93. Fees Earned: This Epoch $5.29, All Time $5.29. Return vs limit order −1.82 USDC and −0.36% (confirmed real reading; replace Loading returns with these values if present). Keep Deposit / Withdraw54pxheight, otherbuttons44pxminimum. No fake data, no positive return, no APY, no chart, no estimatedexit claim, no new functionality/menu/footnote. Compact/reposition existing standalone Base control into selector/header area so it no longer consumes an entire empty row; keep its identity, no invented drop-down. Center all strike labels. Reduce excessive empty gaps between positionheading, holdingslabel/headline/breakdown, fees and return so actions closer to position. Keep clear hierarchy, breathable but efficient. Keep existing Vaultstats, LPpositions, Feehistory and CurrentVaultEpochResults disclosures/meaning and existingAtroll; no duplicates. Enabled buttons must look enabled. Output one DESKTOP screenshot, 1440pxwide. Align holdings and fees in two columns with aligned tops/baselines, tabular rightaligned fee amounts; preserve airy statement and strongholdings figure. Compact instrumentcontext above statement without removing anycontrol. Existing headers Base/thetadeployer retained. No phone/comparisonboard.
```

Mobile prompt:

```text
Use case: precise-object-edit. High fidelity UI spacing and hierarchy refinement of this actual Meryl Concept A app screenshot. Keep exact existing Meryl logo, warm white/cobalt/navy brand and real screen dimensions. Modify density/alignment/minor typography only. Preserve every current control and exact token case: NVDAc, AAPLc, GOOGLc, METAc. Seven strikes $180 $190 $200 $210 $220 $230 $240, only210selected, spot$219. Holdings ≈496.96 USDC; holdings breakdown 0.570699 NVDAc + 371.93 USDC with ONLY ONE USDC suffix after371.93. Fees Earned: This Epoch $5.29, All Time $5.29. Return vs limit order −1.82 USDC and −0.36% (confirmed real reading; replace Loading returns with these values if present). Keep Deposit / Withdraw54pxheight, otherbuttons44pxminimum. No fake data, no positive return, no APY, no chart, no estimatedexit claim, no new functionality/menu/footnote. Compact/reposition existing standalone Base control into selector/header area so it no longer consumes an entire empty row; keep its identity, no invented drop-down. Center all strike labels. Reduce excessive empty gaps between positionheading, holdingslabel/headline/breakdown, fees and return so actions closer to position. Keep clear hierarchy, breathable but efficient. Keep existing Vaultstats, LPpositions, Feehistory and CurrentVaultEpochResults disclosures/meaning and existingAtroll; no duplicates. Enabled buttons must look enabled. Output one MOBILE screenshot representing honest390pxwidth, fullcontentheight, same fontscaleasinput. Keep asset2by2 and strikes4then3layout, controls44pxminimum. Positionfigure remainsstrong; tighten heading/holdings/fees/return verticalgaps without shrinkingtext. Keep actions sidebyside54pxheight. Existingaccount/Baseheaderretained. No desktop/comparisonboard.
```

Original output metadata: desktop `exec-b2764587-857c-4887-819b-ec40aed1f2ff.png`, mobile `exec-714c2733-fa9e-4896-aac6-ecc465646bf0.png`, under `/home/ubuntu/.codex/generated_images/01a0942d-2f39-72e3-917a-69f0403b8358/`. Originals retained; copies are in the project.

## Implemented A — visual refinement pass 2

Built-in image generation final spacing proposals from the round-1 implementation screenshots. Outputs: [desktop](img/designs/desktop-visual2.png), [mobile](img/designs/mobile-visual2.png). Inputs: `/tmp/meryl-a-desktop-visual2-source.png`, `/tmp/meryl-a-mobile-visual2-source.png`.

Triage: accept the current implementation overall. The source already resolves the material hierarchy, duplicate suffix, neutral fee colors and centered selector issues. The second generation preserves the real figures, refresh controls and open epoch history. Its only useful optional adjustment is reducing empty space above the return figure slightly. Do not follow the generated mobile font/raster scaling or the desktop shaded history box: neither fixes a demonstrated usability defect. Continue browser verification of real responsive widths and touch targets.

Desktop prompt:

```text
Use case: precise-object-edit. Final very minor spacing/alignment/typography refinement of this REAL Meryl Concept A application screen. This is refinement pass2, not redesign. Preserve exact existing logo, cobalt/navy/white surfaces, controls and content. No warm glow, no new menus/buttons/charts/APY/claims/disclaimers. Preserve Base/thetadeployer header, Vault selected/Market nav, four assets exactly NVDAc/AAPLc/GOOGLc/METAc with lowercasec, seven strikes180190200210220230240 with210selected and spot$219. Preserve Holdings (NOT estimatedexit): ≈496.96 USDC, 0.570699 NVDAc +371.93 USDC with one suffix; fees This Epoch $5.29 / All Time $5.29 both neutral darkink; Return vs limit order −1.82 USDC −0.36% burgundy on singlebaseline. Keep functional 'Refresh returns' and 'Position card' and refreshicon. Keep Deposit and Withdraw sidebyside54px minimum, allotherinteractive targets44pxminimum. Keep Atroll collapsed, Vaultstats/LPpositions/Feehistory collapsed. CRITICAL Current Vault Epoch Results stays OPEN with exact body 'Results compared with a limit order at this strike.' and 'No completed epochs yet'. Preserve all data, sign, controls and states. Only consider slight improvements to scan alignment, understated rules, efficient spacing and readability; source is already good. Never shrinktypography to squeezecontent. Output just a single straight-on real-screenproposal, no board, no deviceframe. Desktop1440pxwide, preserve source layoutcolumns. Align holdings and feeslabels, keep headline dominant, maybe modestly reduce remaining emptyspace above returnamount. Show enough verticalheight for openCurrentVaultEpochResults body. No mobile.
```

Mobile prompt:

```text
Use case: precise-object-edit. Final very minor spacing/alignment/typography refinement of this REAL Meryl Concept A application screen. This is refinement pass2, not redesign. Preserve exact existing logo, cobalt/navy/white surfaces, controls and content. No warm glow, no new menus/buttons/charts/APY/claims/disclaimers. Preserve Base/thetadeployer header, Vault selected/Market nav, four assets exactly NVDAc/AAPLc/GOOGLc/METAc with lowercasec, seven strikes180190200210220230240 with210selected and spot$219. Preserve Holdings (NOT estimatedexit): ≈496.96 USDC, 0.570699 NVDAc +371.93 USDC with one suffix; fees This Epoch $5.29 / All Time $5.29 both neutral darkink; Return vs limit order −1.82 USDC −0.36% burgundy on singlebaseline. Keep functional 'Refresh returns' and 'Position card' and refreshicon. Keep Deposit and Withdraw sidebyside54px minimum, allotherinteractive targets44pxminimum. Keep Atroll collapsed, Vaultstats/LPpositions/Feehistory collapsed. CRITICAL Current Vault Epoch Results stays OPEN with exact body 'Results compared with a limit order at this strike.' and 'No completed epochs yet'. Preserve all data, sign, controls and states. Only consider slight improvements to scan alignment, understated rules, efficient spacing and readability; source is already good. Never shrinktypography to squeezecontent. Output just a single straight-on real-screenproposal, no board, no deviceframe. Mobile honest390CSSpxwide with unchangedtypescale, fullverticalpage. Keep assets2x2 and strikes4then3, centeredlabels. Only small useful reduction between holdingslabel andvalue and between FeesEarnedlabel/feerows; maintain44pxtargets. Keep returnamountandpercent adjacent. Do not remove panels or turn disclosuretextintoicons. No desktop.
```

Original output metadata: desktop `exec-8ee6a8d9-73c0-4a03-bee0-3dfaad6f60e2.png`, mobile `exec-031984dc-0e85-4426-9709-57d712255094.png`, under `/home/ubuntu/.codex/generated_images/01a0942d-2f39-72e3-917a-69f0403b8358/`. Originals retained; copies are in the project.

## Concept A prompt

```text
Use case: ui-mockup
Asset type: high-fidelity raster design competition board for the meryl tokenized equity vault application.
Input image 1 is reference ONLY for existing meryl logo identity and asset names. Its dark teal Gyro-derived layout and colors are NOT the target style. Generate a fresh design.
Composition: a flat neutral presentation board, desktop interface on left and matching responsive mobile interface on right, both front-on without device hardware, no perspective, no overlap. Desktop layout represents 1280 CSS pixels wide; mobile represents 390 CSS pixels wide. Show both at SAME scale, ratio of widths exactly 1280:390 (about 3.28:1), enough board height to show the complete mobile content. Large sharp raster image. Each is one coherent app, with 16px-equivalent readable body text and 48px touch controls on mobile. Mobile content naturally wraps; never shrink desktop to fit phone.
Brand: cobalt #0B4FE0, navy ink #0B1A2E, white and warm-white paper. 6px corners, fine pale rules, clean sans-serif type, tabular numbers. Green/red exclusively actual signed return/status; here return is negative burgundy. No teal or lavender. Preserve meryl logo from reference as a small blue linear geometric mark and lowercase wordmark.
Exact shared content, render verbatim in BOTH desktop and mobile:
meryl; Base; thetadeployer.
Navigation: Vault (selected), Market.
Assets: NVDAc (selected), AAPLc, GOOGLc, METAc. Lowercase c suffix must stay lowercase. All four visible on mobile in a 2-by-2 selector if necessary.
Strikes: 180, 190, 200, 210 (selected), 220, 230, 240. Spot $219. Wrap strikes on mobile into two rows; never omit any.
Your position
Estimated exit
≈497.18 USDC
Holdings
0.5706 NVDAc + 372.17 USDC
Return vs limit order
−1.82 USDC
−0.36%
Deposit
Withdraw
Expiry 18 Sep 20:00 UTC
USDC accumulation
At roll (collapsed disclosure)
Secondary collapsed disclosures: Vault stats; LP positions; Fee history; Past epoch results.
Hierarchy: selected instrument and strike context, then personal position and large existing Deposit / Withdraw actions, then expiry/accumulation and secondary disclosures. No expanded form yet. All figures precisely as specified and identical between desktop/mobile. No fabricated data, no invented balances, no APY, no sparklines, no extra portfolio total, no new functionality, no fake positive return. No Markets paused notice on Vault tab. No disclaimers, footnotes, explanatory prose or tagline. Only small Concept letter above board.
Concept A — Private client statement. Warm-white aligned statement design. On desktop a narrow full-height cobalt rail at far left carries the small existing meryl mark, with wordmark and Base in main header; a calm wide single-column statement occupies the remainder. Personal position is strong hero: large exit value then beautifully aligned holdings and return rows, generous breathing space. Inline Deposit and Withdraw buttons immediately beneath statement. Technical disclosures are simple full-width fine-rule rows below. On phone remove rail entirely, compact meryl/Base/account header, stacked statement and side-by-side large action buttons. No boxed dashboard tiles; confidence comes from typography and alignment. Label board 'Concept A'.
```

## Concept B prompt

```text
Use case: ui-mockup
Asset type: high-fidelity raster design competition board for the meryl tokenized equity vault application.
Input image 1 is reference ONLY for existing meryl logo identity and asset names. Its dark teal Gyro-derived layout and colors are NOT the target style. Generate a fresh design.
Composition: a flat neutral presentation board, desktop interface on left and matching responsive mobile interface on right, both front-on without device hardware, no perspective, no overlap. Desktop layout represents 1280 CSS pixels wide; mobile represents 390 CSS pixels wide. Show both at SAME scale, ratio of widths exactly 1280:390 (about 3.28:1), enough board height to show the complete mobile content. Large sharp raster image. Each is one coherent app, with 16px-equivalent readable body text and 48px touch controls on mobile. Mobile content naturally wraps; never shrink desktop to fit phone.
Brand: cobalt #0B4FE0, navy ink #0B1A2E, white and warm-white paper. 6px corners, fine pale rules, clean sans-serif type, tabular numbers. Green/red exclusively actual signed return/status; here return is negative burgundy. No teal or lavender. Preserve meryl logo from reference as a small blue linear geometric mark and lowercase wordmark.
Exact shared content, render verbatim in BOTH desktop and mobile:
meryl; Base; thetadeployer.
Navigation: Vault (selected), Market.
Assets: NVDAc (selected), AAPLc, GOOGLc, METAc. Lowercase c suffix must stay lowercase. All four visible on mobile in a 2-by-2 selector if necessary.
Strikes: 180, 190, 200, 210 (selected), 220, 230, 240. Spot $219. Wrap strikes on mobile into two rows; never omit any.
Your position
Estimated exit
≈497.18 USDC
Holdings
0.5706 NVDAc + 372.17 USDC
Return vs limit order
−1.82 USDC
−0.36%
Deposit
Withdraw
Expiry 18 Sep 20:00 UTC
USDC accumulation
At roll (collapsed disclosure)
Secondary collapsed disclosures: Vault stats; LP positions; Fee history; Past epoch results.
Hierarchy: selected instrument and strike context, then personal position and large existing Deposit / Withdraw actions, then expiry/accumulation and secondary disclosures. No expanded form yet. All figures precisely as specified and identical between desktop/mobile. No fabricated data, no invented balances, no APY, no sparklines, no extra portfolio total, no new functionality, no fake positive return. No Markets paused notice on Vault tab. No disclaimers, footnotes, explanatory prose or tagline. Only small Concept letter above board.
Concept B — Blue ticket. More decisive modern brokerage desk while restrained. Thin navy/cobalt horizontal header with white meryl mark/wordmark, Base and account. Compact white instrument/strike selector strip. Desktop central workspace: large white personal position statement on LEFT with oversized navy exit figure and clean holding/return rows; immediately adjacent on RIGHT a cobalt-edged compact action ticket containing large Deposit and Withdraw buttons, then expiry and USDC accumulation/At roll. Secondary disclosures form a quiet full-width lower section. Strong cobalt rule around ticket and disciplined 6px corners; no added form fields. Phone header same identity, position statement first, large Deposit/Withdraw buttons next, expiry and accumulation next, all disclosures below. Use white paper and clear dark/navy type, no sidebar. Label board 'Concept B'.
```