Design a dark-mode website section: cosmic depth paired with pristine frosted glass creates a calming sanctuary for health guidance.
LAYOUT
The hero uses a classic split layout within a 1200px container: headline hierarchy, supporting value proposition, dual CTA group, and trust icons occupying the left 55% column. The right 45% column houses the floating assistant preview widget suspended amidst the nebula's focal glow. Below the hero section, the cosmic scene smoothly gives way to a clean, rounded white sheet (#ffffff) representing grounded reality.
PALETTE (use these exact hex values)
- #090d24 — Cosmic Void: Deepest dark blue ground of the night sky canvas and atmospheric backdrop
- #ffffff — Translucent Frosted Surface: Light mode chat card surface with 90-95% opacity and backdrop blur
- #ea7564 — Coral Sunset: Warm peach-coral starting stop for primary CTA gradients and headline accents
- #7b68ee — Electric Iris: Soft purple-blue end stop for primary gradient fills, icons, and text highlights
- #f6b896 — Atmospheric Amber: Nebula glow tint, subtle border reflections, and warm typographic highlights
- #ffffff — Text Canvas Dark: Primary white text on cosmic dark sections, headings, and nav links
- #9eabcf — Text Canvas Muted: Secondary descriptive copy, sub-bullets, and subtle metadata labels
- #1d2033 — Card Text Primary: High contrast dark text inside the floating light chat UI widget
TYPOGRAPHY
Typeface Newsreader (or Playfair Display, Instrument Serif, Source Serif Pro), weights 400. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 58px display. Tracking -0.015em. The typographic pairing bridges traditional medical credibility and modern consumer empathy. The display serif feels thoughtful, literary, and sensitive—essential for addressing chronic illness without clinical coldness. The modern grotesque sans (Inter match) provides effortless legibility in functional widgets and ensures clinical disclaimers remain sharp and accessible.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 16px, buttons 999px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved through dramatic atmospheric layering rather than flat drop shadows. A dark cosmic void serves as the floor, upon which an illuminated swirling orbital nebula casts ambient warm light beneath a floating frosted white interface card. The light card utilizes a soft, wide-spread shadow (0 24px 48px -12px rgba(4, 7, 26, 0.6)) creating the illusion that it hovers effortlessly in zero gravity.
IMAGERY
Imagery consists of photorealistic or cinematic astronomical rendering—a curved planetary horizon in deep sapphire blue illuminated by a cosmic swirl or accretion disc of dusty amber and rose particles. The imagery communicates quietude, vastness, and calm. Abstract geometric shapes, loud vector illustrations, or clinical doctor stock photos are strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone split gradient headline ('Understand. Plan.' in stark white shifting into 'Feel more in control.' in coral-to-violet) mirrored directly against the floating, pristine white chat card surrounded by amber nebula dust. This juxtaposition of cosmic wonder and grounded clinical software utility creates an instantly recognizable identity.
MUST
- Use Newsreader or an equally human, classical serif exclusively for hero headline statements.
- Pair dark cosmic photography with a single high-contrast light glass preview card for dramatic realism.
- Keep CTA buttons strictly pill-shaped (999px radius) with smooth coral-to-lavender gradient fills.
- Include subtle trust indicators (shields, checkmarks) in muted periwinkle directly under primary CTAs.
AVOID
- Do not use harsh neon saturated colors; maintain dusty, celestial pastel gradations.
- Do not apply the serif font to navigation links, form controls, or descriptive body paragraphs.
- Never make the product demo card dark mode; the light card provides essential contrast against the void.
- Avoid square or sharp 0px corners; all UI components rely on smooth 16px to 999px radii.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
