# MILK / 01 — Product launch website ## Constraints - Work only in this directory. - Ship a static site: `index.html` at the root of this directory, with an optional `assets/` folder for generated media and any other static files you need. - Front-end showcase only. No cart, quantity selector, authentication, inventory, payment processing, or backend. - Use image generation for photographic imagery. Do not use stock-photo URLs, placeholder images, lorem ipsum, unfinished interactions, or temporary stand-ins. - Stop when the site is done. --- ## Goal Build a visually exceptional single-product website that sells one carton of whole milk with the theatrical polish of a flagship technology launch. **Product:** `MILK / 01` — pasteurized whole milk, 1 L. **Primary impression:** “This is an absurdly beautiful website for ordinary milk.” --- ## Creative direction ### Core concept Treat milk as though it were a newly unveiled, category-defining object. The visual language should combine: - Apple-style product restraint - High-fashion editorial photography - Industrial product documentation - Slightly self-aware copy - Warm, tactile dairy imagery - Precision without fake scientific claims The joke should remain understated. Do not make the page look like a parody or comedy site. The design must be credible first; the humor comes from applying excessive product-launch seriousness to milk. ### Brand ```text MILK / 01 ``` Product designation: ```text WHOLE PASTEURIZED 1 L ``` Primary line: ```text Milk. Reintroduced. ``` ### Design personality - Minimal - Monolithic - Cold and precise at first - Warmer and more tactile as the visitor scrolls - Large typography - Considerable negative space - Very few conventional “cards” - Deliberate motion rather than constant movement - Photography that looks physically real ### Avoid - Rustic farms - Barns - Cows in fields - Generic breakfast-table stock photography - Blue sky and green pasture clichés - Neon purple gradients - Glassmorphism dashboards - Excessive rounded cards - Fake testimonials - Fake sustainability claims - Fake awards - Fake laboratory language - Baked-in text inside generated images - Scroll hijacking - Autoplay audio - Gratuitous loading screens - Custom mouse cursors that impair usability --- ## Visual lean (preferences, not prescriptions) Aim for a restrained product-launch palette: near-black, warm paper whites and creams, soft fog greys, brushed chrome, and a *minute* cobalt accent used sparingly (cap detail, fine rules, focus, small status labels)—not a blue UI. Typography should feel large and editorial: a clean modern sans for interface and labels; a refined serif for selected editorial words and quotations is a natural fit if you want that contrast. Hero type can be enormous and tightly tracked; body copy comfortable and readable with a clear measure. Layout should feel spacious and aligned—generous section padding, strong gutters, full-bleed photography used sparingly. Surfaces: dark hero and closing, warmer paper mid-page, fine hairlines, optional subtle grain that never fights body copy. Shadows belong on the product and photography, not on generic cards. Visual ambition should come from photography, typography, compositing, and restrained motion—not heavy 3D/WebGL complexity unless you have a clear reason. --- ## Product copy and content Use this product content (wording can be lightly adapted for layout, but keep the meaning and claims grounded): | Field | Value | |-------|--------| | Brand | MILK / 01 | | Name | Whole Milk | | Volume | 1 L | | Price | $5.00 | | Descriptor | Pasteurized whole milk | | Hero eyebrow | WHOLE MILK · PASTEURIZED · 1 L | | Hero title | Milk. / Reintroduced. | | Hero body | Cold, creamy, and naturally equipped with protein and calcium. The familiar carton, treated like a breakthrough. | **Facts (illustrative):** - **8 g** Protein — Illustrative amount per 240 mL serving - **1** Ingredient — Whole milk - **4°C** Keep chilled — Refrigerate at or below 4°C / 40°F - **4** Operating modes — Pour, steam, blend, and bake **Operating modes:** 1. **Pour** — Cold. Direct. No setup required. 2. **Steam** — Built for microfoam, coffee, and morning rituals. 3. **Blend** — Adds body, protein, and a smooth base. 4. **Bake** — Water, fat, and milk solids—useful chemistry. **Packaging callouts:** 1. **Opaque paperboard** — Helps shield the milk from light. 2. **Resealable cap** — Open, pour, and close with one clean turn. 3. **One-liter format** — Enough to be useful. Small enough to finish fresh. ### Section copy **Product introduction** - Heading: `The original white paper.` - Body: `No algorithm. No subscription. Pasteurized whole milk in a resealable one-liter carton. It pours, steams, blends, and bakes. That is the pitch.` - Supporting label: `ONE INGREDIENT / MANY APPLICATIONS` **Specifications** - Heading: `Specs you can taste.` - Body: `Milk does not need invented features. It already brings protein, calcium, richness, and structure to the table.` - Footnote: `Nutrition figures shown are illustrative for a whole-milk concept. Replace them with values from the verified commercial product label before a real launch.` **Texture** - Heading: `Texture is the technology.` - Body: `Milk brings body to coffee, tenderness to baking, and a clean, cold finish on its own.` **Packaging** - Heading: `A carton with a job.` - Body: `Opaque, resealable, and sized for the refrigerator door. The package exists to protect the product—not distract from it.` **Closing purchase** - Heading: `The next big thing was already in the fridge.` - Purchase line: `MILK / 01 · WHOLE · 1 L · $5.00` - Button: `Buy one carton` - Demo disclosure: `Concept storefront. Checkout is intentionally not connected.` --- ## Page architecture (story, not implementation) The page should feel like one continuous story rather than unrelated blocks. In narrative order, include: 1. Fixed navigation 2. Cinematic hero 3. A bridge that moves the visitor from cold/dark precision into warmer material territory (a liquid or color transition is a natural metaphor) 4. Product introduction 5. Product specifications 6. Full-bleed texture sequence 7. Four operating modes 8. Interactive packaging anatomy 9. Closing purchase section 10. Minimal footer 11. An accessible way to understand that “purchase” is a demo (notification, inline disclosure, or equivalent) --- ## The product object The milk carton is the hero object. Branding on the carton should stay sharp and consistent wherever it appears. Prefer a crisp, deterministic graphic treatment (for example vector/SVG) so the mark does not smear or bake text into photographs. The carton should feel like a real one-liter package: opaque board, resealable cap, clear `MILK / 01` / whole / pasteurized / 1 L designation—serious, not cartoon. --- ## Imagery Generate real photographic assets for the experience. Shared art direction for photography: > High-end editorial product photography in a black-chrome studio environment. Restrained palette of black, warm white, brushed silver, and a minute cobalt accent. Physically realistic dairy liquid, crisp highlights, controlled directional lighting, tactile detail, subtle film grain, generous negative space, no text, no logos, no visible brand packaging, no people, no malformed objects, no surreal colors, no generic stock-photo appearance. Scenes worth covering (realize them in whatever framing and count serves the design): - **Hero halo** — A sculptural milk crown or fluid halo on near-black, empty enough at center to compose with the carton; refined, physical, not chaotic. - **Texture pour** — Macro luxury material study of milk folding into a glossy pool; space for type. - **Steam** — Milk steamed in a minimal steel pitcher; fine vapor, microfoam, dark studio, warm light; no café clutter. - **Blend** — Controlled pale vortex; sculptural liquid; restrained white/chrome; no fruit smoothie clichés. - **Bake** — Milk ribboning into pale batter; warm cream; sophisticated studio light; no rustic kitchen. - **Closing glass** — A single cold glass of milk on a dark reflective plinth; cinematic; room for typography. Regenerate anything with gibberish text, broken fluid, dirty-looking milk, farm clichés, or busy chaos that fights the layout. --- ## Experience notes **Navigation** — Quiet, precise, available; works on desktop and small screens without stealing the hero. **Hero** — First viewport should feel like a flagship campaign: product presence, enormous type, atmosphere. Motion, if any, should feel intentional (entrance, light parallax, or similar)—not constant noise. **Modes** — Four modes should feel like product documentation with soul, not a feature grid from a SaaS template. **Packaging anatomy** — Let the visitor inspect what the carton is *for* (board, cap, format) in an interactive but calm way. **Purchase** — One carton, fixed price, explicitly a demo. No fake checkout. **Motion** — Prefer a few memorable moments over constant animation. Respect reduced-motion preferences. The page should still feel premium with motion minimized. **Responsive** — Readable and composed from narrow phones to large desktops; no horizontal overflow; touch targets usable. **Accessibility** — Keyboard operable where interactive; real text (not only images of text) for core copy; sufficient contrast; meaningful structure; focus states that fit the visual system. **Performance** — Fast enough to feel intentional; images appropriate to a marketing page; no needless weight. **Metadata** — Sensible page title and description for a concept product page. --- ## Definition of done You are done when: 1. The first viewport looks like a premium flagship product campaign. 2. Generated imagery is coherent and free from obvious throwaway artifacts. 3. The milk carton branding is sharp and consistent. 4. The page has a small number of memorable motion moments without becoming exhausting. 5. The site works with keyboard, touch, reduced motion, and narrow screens. 6. Product claims stay grounded in real milk attributes (with illustrative nutrition clearly framed as such). 7. No checkout or quantity logic exists. 8. Purchase is explicitly a demo. 9. There are no placeholders, unfinished sections, or generic template leftovers. 10. A visitor could reasonably say: “That is an unreasonable—and remarkably beautiful—website for milk.”