Build a direct-to-consumer product page for one product that comes in a size run, styled as a small paper-goods brand. Page archetype: ecommerce product detail page, expressive brand register, vivid light ground.
Ground and palette: a flat vivid tangerine field (#FB7A25) carrying a faint repeat tile of nested rectangle outlines in a slightly deeper orange (#E4661A, 2px strokes, 96px tile) so the ground reads as branded wrapping paper, never as a gradient. A single continuous cream product sheet (#F7ECD5) holds everything below the hero, with warm sand (#ECD3A2) for tinted panels and tags. Ink is navy (#0D162B). One accent only, deep teal (#035E5E, deepened to #02494A for text links), used for the buy button, the hotspot pins, and italic display lines. Small text on the tangerine uses dark rust (#3A1604), never teal, because teal fails contrast on orange.
Type: a wide monospace with a heavy weight (Azeret Mono 800) for the product title, section heads, item titles, and the wordmark; the same mono at 500 for every label, caption, table cell, and spec; a serif with optical sizing (Source Serif 4) for body at 19px and line-height 1.7, with its italic for the one pullquote and the one-line art direction summary. Body never goes below 18px and is never justified. Measure stays between 60 and 70 characters.
Masthead is the buy box. The hero is a two column grid, 7 to 5. Left: a gallery figure holding one painted product image with a mono caption, and beneath it a size run legend built as a flex row of four bars with flex-grow values of 1440, 1024, 768, and 390 and heights stepping down from 34px to 16px, each labelled in mono, so the widths are true to each other. Right: a cream buy box with a wordmark and issue number line, the headline as the product title at 28 to 38px, the description as the deck, a four row size table in mono with a caption, a date and read-time line where the price would go, and one solid teal button with cream text linking down into the first section. No boxed grid of meta cells anywhere.
Under the hero, the cream sheet begins with a four column spec sheet: a definition list with a 2px navy top rule, hairline column dividers, mono uppercase terms, serif definitions. It reduces to two columns under 980px.
Section markers are hotspot pins from the product detail idiom: a 38px teal teardrop (border-radius 50% 50% 50% 0, rotated minus 45 degrees) with the section number in mono counter-rotated inside, sitting on the same line as the section heading. Sections: Tooling, Technique, Workflow, Design Move, Prompt Lab, Field Note, Sources. Items inside a section are a 4 to 8 grid, a title column with a mono source line and a serif body column capped at 66 characters, separated by hairlines; the grid stacks under 980px.
The Design Move is a care label: a sand panel with a bordered mono tag, a heading, two short paragraphs, and a second square painted plate on the right with a mono caption.
Images: gouache illustrations only, opaque matte paint with visible brush marks and paper grain, the product in deep teal with cream painted layout shapes, on the same tangerine as the page so the plate sits without a frame. One wide plate showing every size in one row at true relative scale, one square detail plate. No readable text inside any image.
Guardrails: body 19px and line-height at least 1.7; contrast at WCAG AA against the actual rendered surface; radii 3 to 8px on panels and 2 to 4px on bars and buttons, nothing pill shaped; one restrained motion only, links thicken their underline on hover and focus over 150ms and the buy button darkens and lifts one pixel, both wrapped in a prefers-reduced-motion guard; visible focus outlines in teal; no glow, no gradient text, no drop shadow on more than the gallery plate and the buy box, no left border stripe on callouts, no fake size selector or add-to-cart state, and no container taller than the content inside it.
Paste it into Beaver Builder AI, Lovable, Figma Make, Cursor, or Claude Code.
