# Design direction

## 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
- 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
Suggested session instruction: "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.