Design a light-mode web interface screen: clinical wellness packaged in breezy azure glows, crisp neo-grotesque type, and structured micro-metric cards.
LAYOUT
The page adheres to a 1200px centered grid with generous vertical rhythm (64-80px gaps). It opens with a light utility header, descends into a 55/45 asymmetric hero split between typography and packaging aura, followed by a centered 3-column product showcase. It transitions smoothly into a full-width dark navy banner that divides editorial claims from technical certification proof points.
PALETTE (use these exact hex values)
- #FFFFFF — Pure Canvas: Primary page background and clean interior fill for product cards and controls.
- #0B2038 — Midnight Forest: Foundation container for footer feature matrix and high-contrast value proposition sections.
- #2A75E8 — Electric Cobalt: Global primary call-to-actions, cart badges, active indicators, and hero eyebrow badges.
- #DDF4FD — Aura Cyan: Soft atmospheric radial glow positioned behind hero packaging renders.
- #0F172A — Deep Obsidian: High-contrast headings, hero claims, and primary titles across light surfaces.
- #64748B — Slate Muted: Paragraph copy, secondary navigation links, and nutritional spec descriptions.
- #1EB889 — Botanical Jade: Product badge and accent color for the digestive/original product variant.
- #E5A919 — Active Amber: Product badge and accent hover state for performance and power formulations.
- #E2E8F0 — Border Subtle: Card outlines, secondary button borders, and data grid divider lines.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 36px heading-lg, 48px display. Tracking -0.02em at display, 0.01em at body, 0.06em at caps. Plus Jakarta Sans delivers an immaculate blend of precision biotechnology and accessible consumer wellness. Its wide geometric bowls communicate transparency, while crisp ink traps and tight letter-spacing lend authority to performance metrics. If unavailable, Inter provides equivalent technical neutrality, or Outfit can be substituted for slightly more geometric warmth.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created atmospherically through soft color dissipation rather than harsh physical shadows. Hero assets rest over a subtle, non-directional circular gradient (#DDF4FD to transparent), while product mockups project faint, translucent contact shadows beneath their bases. Product cards remain almost completely flat, relying on 1px borders (#E2E8F0) to separate layers.
IMAGERY
Packaging mockups are pristine, studio-rendered white matte stand-up pouches with crisp centered typography and vivid color-coded base strips. Supporting iconography is ultra-lightweight, 1.5px monoline vector art with selective dual-tone color accents. Avoid gritty, uncurated lifestyle photography; keep all visual assets clinical, luminous, and botanical.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious integration of soft cyan atmospheric ambient glows behind clinical white pouches, tethered to high-contrast nutritional micro-grids below. Losing the luminous backlighting degrades the design into a generic e-commerce grid, while over-saturating the glow ruins the pharmaceutical-grade purity.
MUST
- Keep product card boundaries crisp using 1px solid #E2E8F0 borders rather than heavy drop shadows.
- Limit radiant color pops to the formulation badges (#1EB889, #29A9E0, #E5A919) to preserve medical-grade credibility.
- Pair product renders with gentle, low-opacity sky-blue ambient background glows (#DDF4FD).
- Maintain strict 4-column alignment for macro-nutrient stat summaries inside product modules.
AVOID
- Never apply muddy drop shadows or heavy blur cards to product packaging imagery.
- Avoid using bright green or yellow for primary interactive links; reserve those for formulation variants.
- Do not allow product pouch mockups to touch container edges without 24px minimum breathing room.
- Never replace uppercase micro-caps (11px, 0.06em tracking) with default lowercase body styling.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2880:2880. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
