---
schema_version: 1
id: "pop-commerce"
name: "Pop Commerce"
summary: "A bold product-to-price hierarchy, colorful original objects and clear buying choices connect a single-product offer with a filtered product shelf."
family: "commercial"
tags: ["product-led", "playful", "high-contrast"]
best_for: ["commerce", "products"]
avoid_for: []
density: "balanced"
image_dependency: "low"
motion_level: "subtle"
complexity: "medium"
signature: {"composition": "Dominant illustrated product beside price and choices in A; three category-filtered product bays in B.", "typography": "Heavy short sans display meets readable product names, prices and practical specifications.", "navigation": "Visible bottle/shelf/bag routes and actual product-category buttons.", "content_rhythm": "Product offer, useful specification rows and related-object stage versus shelf, set arithmetic and live bag.", "imagery": "Original CSS bottle, cup and carry-bag silhouettes with large flat commercial color fields.", "color_and_material": "Warm ground, plum action/object, sunny display field and pink supporting illustration; restrained thin boundaries.", "interaction": "Real finish and quantity controls, category filtering and a live local demo bag with exact totals and clear reset.", "motion": "Immediate choices and brief color changes; no ticker, countdown or moving product."}
status: "ready"
prompt_path: prompts/pop-commerce/prompt.en.md
---

# Pop Commerce

## Intent

Pop Commerce makes a small product offer immediately understandable. The fictional Tumbelo collection presents an everyday bottle, a cup and a carry bag through strong scale, clear names and visible prices. A visitor can inspect a single product, change a finish, choose a quantity or browse the full shelf. A real local demonstration bag calculates totals without claiming that a shop, stock system or payment service exists. Commercial clarity is the organizing idea; visual energy should help a decision rather than manufacture urgency.

## Signature

Preserve four relationships: a dominant product silhouette; abrupt but controlled product-to-practical scale contrast; a visible product name beside its price; and a small set of literal purchase-related choices. Use broad saturated fields with clean boundaries instead of rough exposed construction. The illustration must be recognizable before a visitor reads its caption. Keep the primary action directly beside its relevant options. The shelf may use product bays because comparable items need a consistent name, price and action structure.

## Typography

Use Arial for display and Arial for body copy, both with explicit system fallback stacks. The display voice must remain distinct from captions, navigation and sustained reading. Keep paragraphs near sixty characters per line, let long headings wrap, and preserve useful caption sizes. The reference includes ĄČĘĖĮŠŲŪŽ and lowercase glyphs so the actual installed font can be inspected. There are no remote font requests or bundled font binaries. A new licensed font requires a recorded asset before use.

## Color and surfaces

Semantic tokens define the page, supporting surface, readable foreground, secondary labels, action accent, boundary and focus outline. Reference CSS consumes generated tokens.css; artwork may retain its separately authored material palette. Preserve the contrast relationships when replacing colors rather than copying an arbitrary accent. Do not use muted type for essential instructions if it becomes difficult to read. A successful token ratio is only one part of checking the rendered interface and every actual text background.

## Layout A

A short demonstration notice and visible shop navigation lead to a split product offer. The bottle occupies a sunny oversized stage while the adjacent column explains its purpose, price, finish and quantity. A useful-details section changes to restrained specification rows, followed by a related-object composition linking the full shelf. The local bag and a final scope note complete the page. The offer is specific and usable without fake ratings, stock scarcity, shipping promises or an unimplemented checkout.

## Layout B

Begin with a collection proposition and short shopping premise. Three actual category buttons filter three complete product bays, each with an original illustration, name, price, specification line and operable demo-bag action. A broader set note explains that bottle plus cup costs forty euros by ordinary addition. A live bag and source/scope note close the page. This is a browsing and comparison structure rather than the single-object choices and large product stage in A.

## Imagery

Bottle, cup and carry bag are original CSS illustrations of fictional products. The bottle has a screw-cap silhouette and a small label; the cup includes an open rim and handle; the carry bag uses two handles and a rectangular textile body. Their scale and color make the category legible without a placeholder image. Purely ornamental geometry is hidden from assistive reading because adjacent text names each product. There are no downloaded photos, fonts, logos or textures and the asset registry is empty.

## Navigation and interaction

Ordinary links reach the product, shelf, details and demo bag. A real select changes the illustrated finish, and a bounded whole-number quantity input controls how many bottles are added. The bag lists quantities, finishes and line totals, updates a polite announcement and exposes an enabled clear action only when populated. B category buttons preserve focus and report their pressed state and visible count. State is local to each page and resets on reload. There is no persistence, order submission or collection of personal information.

## Motion

Content is present immediately. Short state transitions are allowed when they explain an operable control; essential copy never waits for a reveal. The reduced-motion media query removes nonessential animation, transitions and smooth scrolling. If an adaptation introduces movement, keep a useful static composition, avoid autoplay distractions and give visitors control over any sustained activity. A decorative motion effect must not turn the page into a different design direction or hide its navigation.

## Responsive behavior

At 1440 pixels give the single product and offer distinct broad columns; the shelf uses three comparable bays. At 768 reduce display scale and spacing while retaining useful object size and actual controls. At 360 stack the product before the offer, keep finish and quantity labels visible, wrap category buttons and place shelf items in one column. Practical prices stay attached to their names. Decorative handles and caps remain inside their stages rather than extending the document or covering actions.

## Accessibility

Use one main landmark, one descriptive h1, ordered headings, visible keyboard focus and a skip link. Links navigate and buttons change state; native disclosures expose real information. Provide informative alternatives for meaningful images, while purely ornamental geometry stays out of the reading order. Check actual loading, contrast, focus, control coverage and horizontal overflow at 360, 768 and 1440 pixels. The accompanying task evidence records what was executed; these bounded checks are not a full WCAG certification or a guarantee for adapted content.

## Adaptation

Replace the fictional range with verified product records and local rights-cleared photographs or original illustrations. Preserve the name-price-choice relationship when changing the brand or platform. A real store must connect inventory, tax, delivery and checkout to truthful data; the local demonstration bag is only an interaction reference. Keep category state and totals testable. A larger catalogue may add search and pagination, but it should not lose clear comparison fields or hide essential buying choices behind decorative animation.

## Avoid

1. Do not invent ratings, stock counters, discounts or delivery claims to fill a commercial layout. 2. Do not replace operable buying choices with decorative purchase buttons or a false checkout. 3. Do not turn broad product color fields into thick rough frames, offset shadows and event-poster manifesto bands.

## Closest styles

Neo Brutalist is the nearest ready expressive neighbor. It uses exposed thick frames, hard shadows, a manifesto and a framed event programme. Pop Commerce instead organizes a large illustrated product beside price and choices, then a filterable shelf with comparable item records and a local bag. Boundaries stay thin, product forms are smooth and navigation follows product/category/bag tasks rather than event/day/programme tasks. Composition, navigation and content rhythm differ beyond the shared heavy display and vivid colors.