DESIGN BRIEF 02
Less noise. More character. Build “form & field”, a fictional contemporary furniture studio website, around one signature product: the Arc chair. The visitor should be able to understand the chair, compare two finishes, review its specifications, and add a chosen quantity to a local demonstration bag. Deliver a working responsive interface, not a static mockup.
VISUAL DIRECTION
Create a quiet editorial composition with warm ivory (#f3f0e8), deep olive-black (#292d25), muted taupe, and fine rules. Use a confident, restrained serif for display headlines and Inter for navigation, product information, and controls. The studio wordmark is lowercase “form & field” with a small registration-style mark; it is fictional, not an existing brand claim. Give the page a deliberate grid, generous but purposeful spacing, readable supporting text, and one obvious action in each area. Avoid decorative gradients, floating badges, fake ratings, invented awards, and unnecessary cards.
PAGE STRUCTURE
At the top, show a slim, clearly labelled prototype strip with a link back to the prompt and “Fictional studio · no real orders”. Below it, place the wordmark on the left, Objects / Our approach / Details navigation, and a Bag button with the current item count. Narrow screens replace those navigation links with an accessible menu.
The hero pairs an editorial statement on the left (“Room for the everyday.”), a short studio introduction, and an Explore the Arc chair anchor with a large product image on the right. Add a small collection note and a product caption. Keep the chair silhouette, legs, grain, and shadow visible. Follow with a fine-rule information strip describing the demo product: solid oak, two finishes, and its dimensions. These are fictional product specifications, not verified manufacturing or sustainability claims.
The product section has a larger chair image and a detail column: Arc chair, £420 including VAT, a concise description, Natural oak and Smoked oak selection buttons, a visible selected finish name, and quantity controls from 1 to 8. The two finishes use distinct generated product images from the supplied diptych. Add a single emphasized “Add to bag — £[line total]” button. Place a clear demonstration-only notice near it. Use expandable Details, Materials & care, and Delivery information sections. Dimensions: width 52 cm, depth 48 cm, height 78 cm, seat height 45 cm. Do not imply actual shipping availability: delivery information must state this is a fictional product and no shipment can be booked.
Add an “Our approach” editorial section explaining the design intention: simple forms, tactile material, and an object that can sit comfortably in different rooms. Use a close crop of the same product asset as a material study, identified as generated imagery. Finish with a restrained footer and links back to the product, details, and prompt. Do not add fake testimonials, a nonfunctional newsletter, or unrelated products.
LOCAL INTERACTIONS
Changing the finish updates both the product image and its textual selection state. The hero can remain on Natural oak. Quantity cannot go below 1 or above 8. Adding a product opens a shopping-bag dialog; repeated additions of the same finish merge its quantity. Different finishes remain separate rows. Bag rows show finish, unit price, quantity, line total, quantity controls, and Remove. Show the item count, subtotal, and “VAT included · delivery not calculated”. Limit each bag row to 8 and explain that limit if an addition exceeds it. A clear demo message replaces payment or checkout. Do not ask for addresses, payment details, accounts, or personal information. An empty bag offers a Continue exploring action. State is in memory and resets on refresh.
RESPONSIVENESS AND ACCESSIBILITY
At desktop widths, use a balanced two-column hero and product layout. On a narrow phone viewport, stack the hero copy before its image, then the product image before configuration controls. Keep text readable, controls at least 44 px high, and the page free of horizontal overflow. Use real buttons and labelled controls, visible keyboard focus, aria-pressed finish states, an accessible quantity group, and descriptive product-image alternatives. The menu must close after navigation. Use a modal dialog with a title, focus containment, Escape dismissal, and focus restoration. Announce bag additions and quantity-limit messages. Respect reduced motion.
ASSETS AND HONESTY
Use the supplied local generated-chair diptych: its left half is Natural oak and its right half is Smoked oak. Crop each half in CSS without distorting the chair. Do not fetch runtime images or external services. Credit the image as AI-generated concept imagery. Keep this original UI Prompts editorial brief distinct from any externally sourced or tested prompt.
ACCEPTANCE
On a 390 px phone and a desktop viewport, a reviewer can select Smoked oak, choose quantity 2, add it, see a £840 subtotal, close and reopen the bag without losing its contents, change quantities, remove the item, and return from the empty state. All navigation, product accordions, finish controls, quantity controls, and bag actions work locally. Report what was actually checked; do not claim conversion improvements, full accessibility compliance, or reliable one-shot regeneration.
Visual identity
Original brief · Working code example 
