# Premium Design Standard

This project sells a high-ticket AI commerce launch service. Premium visual quality is part of the product, not decoration.

## References Studied

- Douyin reference from `设计碎碎念`, video `7645234924345811112`: Radium-style work emphasizes future scenes, spatial depth, conceptual product worlds, 3D forms, translucent glass, and strong visual impact. Apply this for direction, brand tone, and premium imagination. Do not copy it blindly when it weakens real checkout usability.
- Radium / Cosmin Capitanu: Dribbble `dribbble.com/Radium`, personal site `radium.ro`, Behance `behance.net/cosmin_capitanu`, X `@CosminCapitanu`. He is a Bucharest designer trained as an architect; current public Dribbble work includes `Housekeeper 1.0`, `Omniwear`, `Layered Diffusion`, `Electrocab`, `Mirror Mirror 2`, `LightUp`, `The Ark`, `HoloDash`, and `Planetary Explorer`. Borrow the architectural scene framing, translucent operating panels, physical-world UI embedding, compact flat icon language, and high concept completion.
- Page Flows: use real user-flow references for checkout, purchasing, plans/pricing, forms, buttons, cards, tabs, and navigation patterns.
- Godly.design: use real-world website and app references for layout ideas, UX patterns, interface inspiration, and bold section composition.
- Mobbin: use product-grade mobile, web, and website references for screen structure, flows, and pattern quality.
- Desktop frontend prompt library: use it as a local pattern source for liquid glass, cinematic motion, word pull-up entrances, card staggering, video-style depth, and mouse parallax. Translate the ideas into this static site without adding unnecessary framework dependencies.

## Rules

1. Every money-facing page must look like a finished product, not a draft tool.
2. Use visual hierarchy before text volume: one dominant idea per viewport, then supporting proof.
3. Pair futuristic visuals with operational clarity: command center imagery can sell the feeling, but checkout, payment, intake, and evidence steps must stay obvious.
4. Avoid one-hue palettes. Use obsidian base, ivory typography, emerald signal, brass warmth, and a small cool-blue accent.
5. Cards stay tight and product-like: 8px radius, clear borders, no nested cards, no decorative floating sections.
6. Navigation cannot feel crowded or clipped. Overflow must be controlled, and buyer paths must remain scannable.
7. Mobile is not a reduced desktop. The first viewport must still communicate product, price, trust, and one action.
8. Generated images must be saved into `assets/showcase/` before use, with original generated files left in place.
9. Visual claims must be testable through screenshots and DOM checks, not just hand-written promises.
10. If a visual reference is only conceptual, record what was borrowed and what was intentionally not borrowed.
11. Radium-inspired visuals must still be commerce-safe: do not hide the price, CTA, payment boundary, evidence trail, or manual verification rule behind concept-art spectacle.
12. Do not copy Radium layouts or artwork directly. Use the principles: spatial depth, floating glass layers, scene context, sharp focal hierarchy, and product-world completion.
13. Run `npm run design:gate` after any serious money-facing visual change. A page does not pass the premium standard until the gate can package source links, visual borrowing map, screenshot evidence, missing markers, and stop gates into `evidence/design-gate-packet-*`.

## Current Application

- Before changing any money-facing page, run the Radium-inspired checklist in `docs/radium-reference-study.md`: strong product-world scene, one hard buyer outcome, visible CTA/price/payment boundary, functional glass panels, no private workflow links, and screenshot proof at 1440px plus 390px.
- Homepage uses `assets/showcase/premium-commerce-command-center.png` for the flagship command-center impression.
- Homepage, sales page, and AI Buyer Brief now use `cockpit-*` hero modules for status, buyer path, proof, and safety boundaries. `scripts/validate-static.ps1` requires those markers so the public hero cannot silently fall back to a plain sales card.
- Creator and proposal pages now use `radium-grade`, `control-spine`, `surface-readout`, and `signal-rail` modules: the first viewport should read like a spatial operating surface with real commerce layers, not decorative glass.
- Sales page uses `assets/showcase/premium-commerce-command-center.png` and `assets/showcase/premium-fulfillment-evidence-suite.png` to sell the end-to-end system before the buyer reaches the checklist.
- Market proof page uses `assets/showcase/spatial-commerce-command-center.png`, a generated project asset based on architectural spatial UI principles. It must stay commerce-readable: market proof, product claim, source links, and CTA must remain visible.
- Buyer demo page uses `demo.html`, `premium-motion.js`, and `demo-motion.js` as the premium motion cockpit: buyer/owner/delivery lenses, a spatial command-room asset, animated proof panels, spatial launch sequence, route trajectory, telemetry rail, live commerce vector map, liquid-glass evidence surface, word pull-up section headings, and stop-gate copy must stay visible so the dynamic treatment sells trust rather than hiding the workflow.
- Homepage, sales page, and Longge review page now reuse the Desktop frontend prompt library as static-site motion primitives: `data-word-pull` for premium title entrances, `data-scroll-copy` for below-the-fold progressive copy, and `premium-signal-strip` / `demo-liquid-glass` for compact live signal strips. Keep these effects readable first: no blur on title text, no scroll-opacity treatment on first-viewport lead copy, and CJK titles must split safely so 390px mobile does not clip.
- Homepage and sales page now add `frontier-motion-lab` / `data-cinematic-stage` sections from the Desktop frontend prompt library translation. The borrowed pieces are liquid glass, cinematic product staging, staggered proof cards, film-strip depth, and pointer-responsive parallax. The rejected pieces are CDN React/Tailwind demos, external video dependence, hidden checkout controls, and any effect that weakens price, CTA, payment boundary, or no-money-movement proof.
- Homepage and sales page now use `data-premium-reference="liquid-glass-cinematic-v2"` and `data-reference-marquee` for a tighter glass navigation, video-led first viewport, proof marquee, and reference-derived premium motion layer. Homepage also uses `data-command-readout` in the checkout card so the form reads like a controlled order console, not a cheap contact form.
- Homepage and sales page now include `cinematic-feature-reel` / `prisma-feature-grid` sections translated from the Desktop frontend reference file: one local video lens plus three proof cards. Keep these sections commerce-specific: price, checkout, manual payment gate, intake, evidence, and no-money-movement boundaries must stay visible.
- Buyer pitch page uses `assets/showcase/spatial-commerce-command-center.png` as the high-compression sales scene, then grounds it with the USD 1499 offer, manual provider-verification boundary, video storyboard, send gate, and `npm run pitch:packet`.
- Proposal room uses `assets/showcase/radium-proposal-command-room.png`, an original generated commerce command-room asset, to make the qualified-buyer approval page feel high-ticket while keeping noindex, price, scope, manual verification, and no-money-movement rules visible.
- AI Buyer Brief uses `assets/showcase/premium-commerce-command-center.png` as the product-truth command surface, then grounds it with `llms.txt`, `ai-commerce-product-feed.json`, `.well-known/ai-commerce-launch-kit.json`, `npm run ai:packet`, and explicit no-money-movement stop gates.
- Public buyer pages must remain discoverable after publish: index, sell, AI Buyer Brief, Agentic, Market Proof, Reel, Support, terms, privacy, and refund need canonical URLs, manifest linkage, and search-friendly metadata. Private operator/workflow pages stay `noindex`, and public navigation must not surface admin, prospecting, quote, invoice, fulfillment, launch, approval, or closure workrooms.
- Radium study notes live in `docs/radium-reference-study.md`; use them as a visual quality checklist before changing money-facing pages.
- Radium design gate packets live under `evidence/design-gate-packet-*`; the packet must say what was borrowed, what was intentionally not borrowed, and whether latest 1440px plus 390px screenshots exist.
- Buyer reel uses HyperFrames source under `media/ai-commerce-launch-reel/` plus rendered assets `assets/video/ai-commerce-launch-reel.mp4` and `assets/video/ai-commerce-launch-reel-poster.png`; it must preserve pain, workflow, proof, boundary, price, and no-money-movement gates.
- Local acceptance must capture `desktop-1440.png`, `mobile-390.png`, `sell-1440.png`, and `sell-mobile-390.png` after every design change.
- Local acceptance must also capture `reel-1440.png`, `reel-mobile-390.png`, `pitch-1440.png`, `pitch-mobile-390.png`, `ai-buyer-brief-1440.png`, `ai-buyer-brief-mobile-390.png`, `market-proof-1440.png`, and `market-proof-mobile-390.png`, then run a 390px layout audit for key buyer pages and fail when page-level horizontal overflow appears.