Design a dark-mode web interface screen: clinical precision meets organic freshness against deep midnight slate, punctuated by radiant white and vivid spearmint accents.
LAYOUT
Structured top-to-bottom as a sequential premium narrative: sticky dark navigation with a pill CTA, leading directly into a 50/50 hero split (typography/conversion left, wet-slate product render right). The hero smoothly meets a full-width floating white card that interrupts the dark theme with bright clinical credibility. Beneath this, the layout re-enters the dark canvas for a centered orbital ingredient diagram where the product stands on basalt stone flanked by balanced 5-tier callout lists.
PALETTE (use these exact hex values)
- #061118 — Midnight Slate Base: Deepest canvas background for the hero and interactive diagrams, setting the nocturnal organic tone
- #0a1d27 — Subtle Petroleum Tint: Radial glow zones behind hero assets and input field fill color
- #ffffff — Porcelain Sheet: Background for the central 3-column value propositions card and primary headline typography
- #20a396 — Spearmint Teal: Primary action button backgrounds, standout hero headline span, active nav indicator, and node rings
- #163140 — Slate Border: Delicate borders on dark input fields, outline pill buttons, and circular orbital ingredient rings
- #8ca0ad — Muted Cyan Grey: Secondary body text, stat descriptions, form input placeholders, and inactive nav labels
- #2b3842 — Charcoal Body: Primary titles and explanatory body text within the high-contrast white feature card
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Urbanist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 38px heading, 64px display. Tracking -0.025em for display titles, 0.08em for uppercase badges. The typography communicates clinical purity balanced by approachable wellness. Plus Jakarta Sans (or Inter) provides modern, immaculate geometry without feeling sterile, allowing the tight 64px display headline to convey authority while small uppercase captions add scientific rigor. When substituting, select fonts with tall x-heights and pure geometric roundness, avoiding serifs or expressive humanist scripts.
GEOMETRY & SPACING
Corner radii — cards 16px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, airy density.
DEPTH
Depth is handled through luminosity rather than traditional drop shadows. On dark backgrounds, subtle radial gradients (#0a1d27 over #061118) simulate studio spotlighting behind the 3D assets, while hairline strokes provide crisp boundary definition. The only true shadow appears beneath the white 3-column card (0px 24px 48px -12px rgba(0, 5, 10, 0.4)), lifting it forward as a floating clean slate.
IMAGERY
Hyper-realistic commercial CGI and product photography depicting packaging anchored on natural dark basalt stones, surrounded by dewy spearmint leaves and physical water droplets. The lighting is pristine, high-key studio rim light contrasting against dark textured organic materials. Stock photography with people or flat vector illustrations would immediately break the luxurious clinical atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The orbital node ingredient map: a centered vertical product render emerging from stacked basalt stone and mint leaves, encircled by fine cyan hairline orbits connecting circular leaf and water icons to precise scientific ingredient titles. To maintain identity, keep callout text strictly split symmetrically with equal node count on left and right.
MUST
- Anchor key value pillars in a single solid-white card with 16px radius to shock the dark palette with sterile cleanliness.
- Highlight exactly one defining buzzword in hero headlines with vivid spearmint teal (#20a396).
- Enclose ingredient and benefit iconography inside clean thin-line 36px circles with matching line weights.
- Surround 3D packaging renders with realistic tactile elements: wet river stones, mint leaves, and microscopic water drops.
AVOID
- Never introduce warm colors like amber, red, or gold; stick strictly to cool teal, petroleum slate, and clinical white.
- Do not drop shadows under dark-mode UI elements; use 1px slate-cyan strokes (#163140) instead.
- Do not invert the hero typography to dark text on light backgrounds; the primary canvas must remain nocturnal.
- Avoid thick solid borders; keep all orbital diagram lines and card dividers at exactly 1px with reduced opacity.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1360:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
