Product carousel showcase

# Product carousel showcase

## Product direction

- **Page type:** landing
- **Layout archetype:** carousel
- **Audience:** Customers comparing a visual product collection
- **Goal:** Let each product story take the stage without losing collection context.
- **Tone:** Bold, cinematic, and tactile

## Visual system

- Use the semantic palette below; never use color without meaning.
- Heading: Inter, ui-sans-serif, system-ui, sans-serif; body: Inter, ui-sans-serif, system-ui, sans-serif; code: JetBrains Mono, ui-monospace, monospace.
- Density is spacious; base radius is 18px; shadows are elevated.
- Icons: Lucide-style outline icons with consistent 1.75px strokes.
- Imagery: Use product-specific imagery only when it explains the workflow; never use decorative filler..

## Semantic palette

| Role | Value | Intended use |
| --- | --- | --- |
| Background | `#15100d` | Page canvas and the deepest application layer |
| Surface | `#28201b` | Cards, panels, navigation, and raised regions |
| Text | `#fff7ed` | Primary copy, labels, and high-emphasis content |
| Muted | `#c4b5a8` | Secondary copy, metadata, and inactive controls |
| Accent | `#ff8a3d` | Primary actions, focus, selection, and active state |
| Success | `#74c69d` | Confirmed success and healthy state |
| Warning | `#ffd166` | Caution, pending review, and non-blocking risk |
| Danger | `#ef6f6c` | Errors, destructive actions, and blocking risk |

The optional `design-tokens.css` from the full export pack mirrors these values. This `DESIGN.md` remains complete when used on its own.

## Layout and content

1. Featured release
2. Material story
3. Color collection
4. In use
5. Details
6. Shop collection

## Responsive and accessibility

- Collapse sidebars into an explicit drawer and preserve the primary task before secondary metadata..
- Meet WCAG AA contrast, preserve visible focus, and respect reduced motion.
- Do not reduce essential content or actions on mobile.

## Machine-readable OneLiners DesignBrief

<!-- oneliners-design-brief:v1 -->
```json
{
  "schemaVersion": "1",
  "name": "Product carousel showcase",
  "pageType": "landing",
  "layoutStyle": "carousel",
  "audience": "Customers comparing a visual product collection",
  "goal": "Let each product story take the stage without losing collection context.",
  "tone": "Bold, cinematic, and tactile",
  "palette": {
    "background": "#15100d",
    "surface": "#28201b",
    "text": "#fff7ed",
    "muted": "#c4b5a8",
    "accent": "#ff8a3d",
    "success": "#74c69d",
    "warning": "#ffd166",
    "danger": "#ef6f6c"
  },
  "typography": {
    "heading": "Inter, ui-sans-serif, system-ui, sans-serif",
    "body": "Inter, ui-sans-serif, system-ui, sans-serif",
    "mono": "JetBrains Mono, ui-monospace, monospace",
    "baseSize": 16,
    "scale": 1.2
  },
  "density": "spacious",
  "radius": 18,
  "shadow": "elevated",
  "sections": [
    "Featured release",
    "Material story",
    "Color collection",
    "In use",
    "Details",
    "Shop collection"
  ],
  "iconStyle": "Lucide-style outline icons with consistent 1.75px strokes",
  "imagery": "Use product-specific imagery only when it explains the workflow; never use decorative filler.",
  "mobileStrategy": "Collapse sidebars into an explicit drawer and preserve the primary task before secondary metadata.",
  "accessibility": {
    "contrastTarget": "WCAG AA",
    "reducedMotion": true,
    "visibleFocus": true
  }
}
```