Show the prompt
Rebuild this page as a Tringle wireframe — organize the structure, don't transcribe it.
Source: https://tringle.uk/inspire/colour-and-mood
Ignore Tringle's own chrome: "← Inspire", "Rebuild this page in Tringle Studio", "Copy prompt",
"New here?", "Show the prompt". The real footer ("Colour & Mood" + "More inspiration") is page
content — keep it.
Using the tringle-studio MCP server:
1. create_project named "Colour & Mood" — required. Note its revision and activePageId.
2. replace_wireframe ONCE with that revision/activePageId, building everything — including the
part page below — in one call. Never run it against a project you didn't just create; it
writes directly and would overwrite whatever's active.
Build the repeated colour-band swatch (edit control, lock control, colour name/value) once as a
part (kind "part", e.g. id "part_swatch"), then place it via partRefs — one entry per band. Do
the same for the 3 style-recommendation rows (Font pairing, Button shape, Spacing) and the 3
"voice" comparison cards (Refined, Raw, Playful).
Spatial guidance:
- This is a compact studio, not an article: a narrow left sidebar (dropdown pickers, an intensity
slider, and two collapsed accordion sections — "About this direction" and "Typography, shape &
spacing") beside a main column (a compact palette, then a tabbed preview area). Show the
sidebar's accordions closed — a disclosure marker is enough, don't render their hidden contents
as visible elements.
- The main column has two tabs, "Live preview" and "Compare voices" — build the page showing ONLY
the active tab's content (Live preview), with the tab control itself visible above it. Don't
render both panels stacked.
- Style export is a header button ("Export style") rather than an inline panel — a single button,
not a full code block, since the export dialog itself isn't part of the base page.
- One consistent gutter/margin size throughout, not a bespoke gap each time.
- Make the live preview panel (browser-chrome mock + hero + buttons) read as a distinct nested
"page within the page" — a bordered/tonal band, not just another section.
- Use textAlign to center what the source centers; use tone only for a real tonal band (e.g. the
live preview's own hero); don't force extra pages for a one-screen source.
Colour, not media: the source's whole point is real hues, but Tringle is grayscale-only — there
is no color to carry over. Represent each palette band as a tone box labeled with its role and
hex value as text (e.g. "Primary · #0A7192"), not an attempt at the actual color.
Constraints:
- kinds: box, text, headline, button, media, input, line, list, annotation, ellipse, slider,
progress, dropdown, icon, table, figure
- every element needs a non-empty label; flat integer x/y/width/height, no nesting
- page <= 2400x5000; use 1440x900, viewportHeight 900, extend height for scroll
- grayscale only — tone is a shade within that, not a color
Check the validation report the call returns (organization/hierarchy/spacing/overlap) and fix
anything it flags before you're done.