Full Website Builder from Brief

<role>
You are a senior product designer and full-stack frontend engineer. You've shipped dozens of marketing and product sites that look distinct, load fast, and convert. You have strong, specific taste and you never default to generic template layouts.
</role>

<context>
Project: [project_description]

Primary conversion goal (the one action a visitor should take): [primary_goal]

Pages needed: [pages]

Brand personality (3-5 adjectives, plus any existing brand assets like logo, colors, fonts): [brand_personality]

Target stack: [tech_stack]

</context>

<task>
Build the complete website described above, from a cold brief to shippable code.

1. Before writing any code, state your design point of view in ONE sentence: a specific, opinionated stance on layout, type, and color that fits this brand (not "clean and modern"). Then briefly justify it against the brand personality given.
2. Define the sitemap and, for each page, a one-line purpose and the primary conversion path it feeds.
3. Choose a concrete visual system and commit to it:
   - Type: one display face and one text face (or one face at two weights), with a real modular scale.
   - Color: a full palette with hex values, one dominant color (not violet/indigo-to-pink gradient by default), and clear light/dark roles. Every text/background pair must meet WCAG AA contrast (4.5:1 body, 3:1 large text) and you must state the ratios for your key pairs.
   - Spacing/grid: a real spacing scale (e.g. 4/8px base) and grid/column structure, not eyeballed margins.
   - Motion: define 2-3 purposeful transitions or micro-interactions max. Wrap all motion in `prefers-reduced-motion: reduce` fallbacks that disable or drastically simplify it.
4. Build every page listed in [pages] in full: semantic HTML, complete CSS (or the styling approach native to [tech_stack]), and any JS/interactivity needed for nav, forms, and the primary conversion action.
5. Make every page fully responsive: mobile (< 480px), tablet (~768px), desktop (~1280px+). Use fluid type/spacing where sensible instead of a wall of fixed breakpoints.
6. Write real, specific copy for every section (headlines, subheads, CTAs, microcopy) grounded in  and [brand_personality]. Do not leave "Lorem ipsum" or bracket placeholders in the final output.
7. If the full scope is too large to output as complete code in one pass, instead output: the full file/folder structure, one fully complete flagship page (home) as proof of the system, and a clear file-by-file spec for the rest so a developer (or a follow-up prompt) can finish it without re-deciding any design questions.

Ask me up front, in a short numbered list, for anything above you genuinely need to proceed (e.g. missing stack preference, unclear primary goal), but make a reasonable, stated assumption and keep moving instead of stalling on minor gaps.
</task>

<constraints>
- Do not default to: purple/indigo gradient hero backgrounds, a floating dashboard/browser-chrome mockup in the hero, glassmorphism as the default surface treatment, identical icon-over-heading card grids repeated 3-4 times, or a tiny uppercase eyebrow label above every section heading. If you use any of these, name the alternative you considered and why this brief specifically earns it.
- No generic stock-photo-plus-gradient-overlay hero. Use typography, illustration, real product screenshots, or a distinctive layout instead.
- Every interactive element needs a visible focus state and a hover/active state; buttons and links must be reachable and operable by keyboard alone.
- No AI-slop phrasing anywhere in the output copy: avoid "delve," "seamless," "supercharge," "leverage," "elevate," "robust," "unleash," "game-changing," "cutting-edge," "effortless." Write plainly and specifically instead.
- Match [tech_stack] conventions exactly (file structure, component patterns, styling method). Do not introduce a second styling system (e.g. don't hand-roll CSS if the stack is Tailwind-only, don't add Tailwind if the stack is plain CSS).
- Respect : if given, actively steer away from those specific patterns and say how.
- No placeholder images described only as "[image here]"; specify real image direction (subject, crop, treatment) or use CSS/SVG/typographic solutions instead.
</constraints>

<output_format>
1. **Design POV**, one sentence, plus 2-3 sentences of justification.
2. **Sitemap**, page name, purpose, primary conversion path (short table or list).
3. **Visual system**, type scale, color palette with hex + contrast ratios, spacing scale, motion rules.
4. **Code**, organized by file path, complete and paste-ready, in the order a developer would create them (config/setup first, shared components/layout next, then pages). Use code blocks labeled with the file path.
5. **Open questions / assumptions**, a short list of anything you assumed to keep moving, so I can correct it in one pass.
</output_format>