# OpenUI Design Plan

## Variant 1

### Resolved inputs
- Topic: Bottled silence for a premium startup named Stillwell.
- Offer: A limited-release set of sealed glass bottles, each paired with a guided two-minute quiet ritual and a numbered table object for workspaces, bedrooms, and travel recovery.
- Audience: Design-conscious founders, creative directors, urban professionals, and hospitality buyers who treat quiet as a scarce luxury good.
- Primary user action: Reserve the first release.
- Deliverable: Single-file HTML with embedded CSS and JS.
- Style direction: Gallery-grade product editorial with acoustic-lab restraint.
- Tonal key: Topic-derived light: porcelain, graphite, wet glass, pale mineral green, and a restrained amber seal accent.
- Icon policy: Minimal topic-native marks used only in the lower support cluster.
- Proof assets: none.
- Motion intensity: Rich but controlled.

### Composition contract
- Hero archetype: immersive
- First-viewport structure: A full-bleed pale gallery environment carries a large translucent bottle form slightly right of center, with the headline occupying the left and lower-left negative space. The primary and secondary CTAs sit directly under concise copy. A quiet horizontal attenuation trace crosses behind the bottle and visibly flattens near the product. The first viewport height leaves the top of the lower support cluster visible on desktop and mobile.
- Primary visual/proof artifact: A topic-native product specimen: a generated translucent glass bottle cutout at `assets/stillwell-bottle-cutout.png`, with an HTML label reading "Stillwell Silence No. 01" and an attenuating sound trace crossing behind it.
- Interaction behavior: The primary CTA opens a short reservation drawer inline at the hero bottom; hovering or focusing the hero bottle reduces the animated waveform amplitude to reinforce the product premise.
- Reuse boundary: Basic reset, typography scale, focus styles, and responsive layout utilities may be shared with future pages. The generated bottle asset, HTML label overlay, attenuation trace, copy, support marks, reservation drawer behavior, and first-viewport composition are custom to this variant.

### Filled generation prompt
Create one high-concept landing page for bottled silence for a premium startup named Stillwell.

## Inputs
- Topic: Bottled silence for a premium startup named Stillwell.
- Offer: A limited-release set of sealed glass bottles, each paired with a guided two-minute quiet ritual and a numbered table object for workspaces, bedrooms, and travel recovery.
- Audience: Design-conscious founders, creative directors, urban professionals, and hospitality buyers who treat quiet as a scarce luxury good.
- Primary user action: Reserve the first release.
- Deliverable: Single-file HTML with embedded CSS and JS.
- Style direction: Gallery-grade product editorial with acoustic-lab restraint.
- Tonal key: Topic-derived light: porcelain, graphite, wet glass, pale mineral green, and a restrained amber seal accent.
- Icon policy: Minimal topic-native marks used only in the lower support cluster.
- Proof assets: none.
- Motion intensity: Rich but controlled.

## Objective
Design one premium, memorable landing page concept with a dominant hero and one coherent visual world derived from bottled silence itself. The page should feel specific, intentional, and conversion-minded, not like a generic startup or SaaS template.

Choose the strongest clear solution. Do not collapse the concept into a simpler generic pattern just to make execution easier.

## Effort and resolution policy
- Do not infer that the task is simple merely because the deliverable is a single file, a direct chat response, or a self-contained component.
- Output directness is not a signal to reduce conceptual ambition, visual specificity, interaction richness, implementation care, or production quality.
- Even when the final deliverable is concise, resolve the concept fully rather than defaulting to the quickest acceptable structure.
- Treat single-file execution as a packaging constraint, not a creative constraint.
- Prefer the strongest fully resolved concept that fits the constraints, not the fastest concept that merely fits in one file.

## Ambition and scope discipline
- Do not treat missing implementation detail as permission to reduce conceptual ambition, visual specificity, or interaction richness when the concept clearly benefits from them.
- Prefer the simplest structure that preserves the strongest concept, not the simplest structure that merely satisfies the rules.
- Do not add extra content sections unless they are structurally necessary.
- If conceptual depth is needed, absorb it into the hero, proof gesture, support highlight copy, CTA behavior, or background logic rather than creating a new section by default.
- When choosing between restraint and richness, keep the stronger topic-native idea and remove only what weakens clarity, hierarchy, or credibility.
- Implementation simplicity is not a goal by itself. Concept strength, coherence, and usability take priority.

## Internal concept choice
Use an immersive hero, embedded gesture proof mode, a palette driven by porcelain, graphite, wet glass, mineral green, and amber seal wax, a topic-derived light tonal key, ambient and interactive motion, and minimal topic-native icon marks.

## Non-negotiables
- Use a strong hero-first composition.
- Headline: 3-12 words, max 3 lines.
- Supporting copy: 1-2 short sentences, concise, specific.
- CTAs: exactly 1 primary and 1 secondary.
- CTA labels must be specific to the offer and action, not generic.
- Supporting highlights: shown only in a single lower support cluster beneath the hero.
- Keep the hero dominant, focused, readable, and uncluttered.
- Proof is optional. Use it only if it clearly strengthens the concept.
- If no real proof assets are provided, do not invent metrics, testimonials, customer logos, screenshots, or fake UI proof.
- CTA behavior may be simple or richer, but it should fit the offer; do not default to generic anchor-link behavior if a more specific interaction model would strengthen the concept.

## Composition
- Use an immersive product-gallery composition rather than a default two-column marketing layout.
- The hero must be a fully integrated composition, not a panel, dashboard, device mockup, rounded card, or floating showcase.
- Build hierarchy through scale, contrast, spacing, alignment, overlap, rhythm, and composition before using frames, dividers, or containers.
- Keep supporting content clearly subordinate to the hero.
- Do not interpret structural restraint as a reason to flatten the concept into a generic or minimal default.

## Visual system
- Build one coherent visual world derived from bottled silence itself.
- Treat style as design logic, shaping typography, spacing, contrast, geometry, motion, and proof language.
- Derive palette character, accents, contrast behavior, motifs, materials, and shape language from sealed glass, silence, acoustic attenuation, and gallery object language.
- The background must actively contribute mood, depth, and topic logic through soft laboratory light, subtle paper grain, glass shadows, and attenuating sound traces.
- Show physical product logic directly through a generated sealed translucent bottle image instead of abstract technology decoration.
- Treat headline typography as an active part of the visual system, with one emphasized word receiving a quiet mineral-green attenuation treatment.

## Background and tonal diversity
- Use a light tonal world because quiet, glass, and gallery presentation are stronger than a default dark cinematic look.
- Build contrast from transparency, mineral color, ink, amber seal detail, scale, and quiet negative space, not only from darkness.

## Proof and concept expression
- Use one precise embedded proof gesture: a sound trace that visibly attenuates around the bottle.
- Do not invent metrics, testimonials, customer logos, screenshots, or fake proof.
- Typography may carry part of the concept through a single softened treatment on the word "silence."
- Avoid decorative pseudo-proof, dashboards, floating panels, and generic marketing geometry.

## Icons and symbolic language
- Use minimal topic-native marks only in the lower support cluster.
- Keep icon style consistent: fine-line acoustic marks, seal marks, and pause marks.
- Do not let icons compete with the hero headline, bottle specimen, or CTA hierarchy.

## Support cluster
- Show supporting highlights only once, in a single lower cluster beneath the hero.
- Use three concise highlights: "Sealed glass ritual", "Desk-to-hotel scale", and "Refill releases by season."
- These modules may use one subtle surface treatment and must remain uniform, non-nested, and visually subordinate.
- Do not use card-like structures in the hero, proof, CTA area, or as nested containers anywhere else on the page.

## Motion
- Use rich but controlled motion only when it supports atmosphere and feedback.
- Animate the attenuation trace gently, the glass highlight slowly, and the reservation drawer briefly.
- Hovering or focusing the bottle reduces waveform amplitude.
- Respect reduced-motion preferences.

## Accessibility and readability
- Preserve strong readability and clear hierarchy at all viewport sizes.
- Maintain sufficient contrast between graphite text and pale background.
- Avoid cramped spacing, visual collisions, and weak focal hierarchy.
- Use semantic HTML, visible focus states, keyboard-friendly interactions, and reduced-motion handling.

## Anti-drift rules
- Do not drift into bland corporate SaaS styling.
- Do not default to generic dashboard aesthetics, feature-grid thinking, or boxed-section composition.
- Do not use disconnected motifs, random color choices, or interchangeable abstract-tech shapes.
- Do not use card-within-card composition, nested surfaces, fake proof, or stock-looking UI.
- Do not let the page feel template-like, compartmentalized, or overly modular.

## Output
Return only the final single-file HTML with embedded CSS and JS.

If the deliverable is code:
- Output a complete production-ready file.
- Keep dependencies minimal.
- Make it responsive.
- Keep support highlights in one lower support cluster only.

## Final self-check
Before returning, verify that the result keeps one dominant hero, one coherent visual world, no invented proof, no cardification outside the lower support cluster, no generic SaaS drift, no unnecessary simplification justified only by ease of execution, no nested containment, and no floating sub-surfaces.

## Recap
Make one clear, memorable, topic-native landing page. Hero first. One visual world. Specific CTAs. Optional proof only if justified. Lower support cluster. No generic SaaS drift.

### Output target
- Path: index.html