Enterprise Flat product page

Live example

Try the sample interactions. Open the standalone demo for a full-width view. No data is sent to a server.

Verification results

Captured 2026-10-04T13:21:38.360Z in Chromium 153.0.8010.12. The checks below match the current example assets.

• React gallery, available sizes, and validation
• Adding state, demo bag quantities, total, and clear action
• No horizontal page overflow at 1440px and 390px
• No browser runtime errors
• Automated WCAG A/AA checks at both viewports

Automated accessibility violations: 0. These checks cover the tested pages and states. They do not establish complete accessibility compliance.

• Desktop gives the product illustration more space than the choices.
• Mobile stacks gallery and details. Size labels and the add action remain visible.

Recorded prompt and source

This implementation was produced by the coding agent from the saved themx setup, then corrected during browser verification. The ZIP contains runnable HTML, assets, source templates, tokens, documents, and the saved prompt. Source templates are built in the themx repository.

You are building a web application using React (Vite) with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Build a sample product page for Field Goods with a fictional graphite canvas overshirt. Include front, back, and detail illustrations, size selection with M unavailable, a quantity field, and a local demo bag. Use a clearly labeled $48 demo price. Include missing-size and invalid-quantity feedback, an adding state, a success message, an empty bag, and a clear-bag action. Do not include checkout or real stock claims.
Target users: Shoppers using phones and laptops
Page purpose: Ecommerce
Framework: React (Vite)
CSS approach: Tailwind
UI library: shadcn/ui
Tone: Professional

## Visual direction
Base theme: Enterprise Flat (visual-style)
- Flat design with no shadows or gradients
- Consistent spacing using 4px/8px grid
- Clear information hierarchy
- Muted professional color palette
- Data-dense layouts for dashboards
- Accessible and readable at all sizes

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #2563EB, secondary #475569, accent #059669, background #F8FAFC, text #0F172A
Typography: Inter for headings, Inter for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #F8FAFC;
  --tx-font-heading: "Inter", sans-serif;
  --tx-font-body: "Inter", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #FFFFFF;
  --tx-card-border: #E2E8F0;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0.5rem;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #2563EB;
  --tx-card-shadow-hover: none;
  --tx-font-heading-weight: 600;
  --tx-font-body-weight: 400;
  --tx-text-muted: rgba(15,23,42,0.6);
  --tx-text-subtle: rgba(15,23,42,0.4);
  --tx-link-color: #2563EB;
  --tx-button-radius: 0.375rem;
  --tx-input-bg: #FFFFFF;
  --tx-input-border: #E2E8F0;
  --tx-text: #0F172A;
  --tx-primary: #2563EB;
  --tx-secondary: #475569;
  --tx-accent: #059669;
  --tx-media-filter: none;
}

:root {
  color-scheme: light;
  --radius: var(--tx-card-radius);
  --background: var(--tx-surface-bg);
  --foreground: var(--tx-text);
  --card: var(--tx-card-bg);
  --card-foreground: var(--tx-text);
  --popover: var(--tx-input-bg);
  --popover-foreground: var(--tx-text);
  --primary: var(--tx-primary);
  --primary-foreground: #FFFFFF;
  --secondary: var(--tx-secondary);
  --secondary-foreground: #FFFFFF;
  --muted: var(--tx-card-bg);
  --muted-foreground: var(--tx-text-muted);
  --accent: var(--tx-accent);
  --accent-foreground: #000000;
  --destructive: #B91C1C;
  --destructive-foreground: #FFFFFF;
  --border: var(--tx-card-border);
  --input: var(--tx-input-border);
  --ring: var(--tx-text);
  --sidebar: var(--tx-surface-bg);
  --sidebar-foreground: var(--tx-text);
  --sidebar-primary: var(--tx-primary);
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: var(--tx-accent);
  --sidebar-accent-foreground: #000000;
  --sidebar-border: var(--tx-card-border);
  --sidebar-ring: var(--tx-text);
}

@theme inline {
  --font-sans: var(--tx-font-body);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
}
```
The mapping targets Tailwind CSS 4. Merge it into the existing Tailwind stylesheet after its imports.
Read installed package versions first. Ask before migrating an existing project to a different major version.
Use library components for controls. Apply the --tx-* surface, shadow, blur, and font values where the library tokens do not cover them.
This export describes one selected color mode. Preserve any other supported modes and scope these tokens to the intended mode.
Read components.json and reuse installed shadcn/ui components. Use semantic classes such as bg-background and text-foreground.
Merge the tokens with existing :root or color-mode selectors. Preserve unrelated chart tokens and component configuration.
Reference: https://ui.shadcn.com/docs/theming

## Layout
- Use a consistent spacing scale, clear navigation, and compact readable data panels.

## Interaction
- Show validation, loading, empty, and success states close to the affected control.

## Additional user requirements
These explicit requirements take precedence over general layout and interaction defaults. Report any conflict with exact tokens before changing them.
Layout: Use a two-column product layout with a larger gallery on the left. Stack gallery and details on phones. Keep product facts and choices near the add action.
Interaction: All gallery views must change the illustration. Keep unavailable sizes disabled. Make bag totals match the selected quantities. Use React state and installed shadcn/ui controls.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Enterprise Flat: Expressive campaigns that depend on decorative visuals.

## Components
Generate the following components in this style:
- Navbar
- Cards
- Buttons
- Forms

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Supporting skills
Use these skills if they are installed in the target agent. If unavailable, report that and follow the supplied design requirements. Installation commands are references for the user; do not run them automatically.
- shadcn/ui: https://ui.shadcn.com/docs/skills
  Purpose: Read components.json and reuse installed shadcn/ui components.
  Install: npx skills add shadcn/ui
- Anti-slop: https://github.com/miqdadbadjuber/anti-slop
  Purpose: Check content, controls, and decoration against the selected design direction.
  Install: npx skills add miqdadbadjuber/anti-slop
Use antislop during for this session.
The chosen theme and layers are intentional. Check their purpose and implementation. If a skill rule conflicts with them, identify the conflict and ask the user to keep or change the named element.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.