Design a dark-mode website section: clinical rigor illuminated by a subterranean thermal glow, anchored in architectural obsidian black.
LAYOUT
The viewport adopts a two-act drama: an atmospheric split-screen hero followed by a structured, utilitarian enterprise footer. In the hero, high-impact typography and dual CTAs command the left 45% of the grid, while an extensive application mockup anchors the right 55% over a glowing radial field. Below this threshold, the composition transitions sharply to an ink-black multi-column footer, terminating in a single-line horizontal copyright bar split across an ultra-faint divider.
PALETTE (use these exact hex values)
- #070708 — Obsidian Base: Solid foundation background for footer and lower page structural content
- #140403 — Ember Dark Canvas: Deep wine-black base of the upper stage before gradient diffusion
- #f5642b — Thermal Glow: High-intensity atmospheric radial backlighting behind hero content and dashboard preview
- #ff4f38 — Coral Primary: Primary conversion button fills, logo sparkle mark, and active focal elements
- #1d1414 — Card Surface: Semi-translucent container fill for dashboard cards and floating widgets
- #3d2b29 — Border Glass: Subtle boundary stroke on cards, badges, and the lower copyright divider
- #ffffff — Text Stark: Highest hierarchy headings, primary CTA text, and selected link titles
- #a69593 — Text Warm Muted: Hero paragraph descriptions, navigation links, and descriptive subheaders
- #615453 — Text Low-Contrast: Metadata timestamps, copyright notices, and secondary form placeholders
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 18px body-lg, 36px heading, 52px display. Tracking -0.025em for display, 0 for body. The typographic stance is measured, authoritative, and human-centric. By utilizing a contemporary geometric grotesque like Plus Jakarta Sans with tightly controlled negative tracking (-0.025em) on display headlines, the system conveys clinical precision without becoming sterile. For production environments lacking custom licenses, Inter or DM Sans serve as direct fallbacks without forfeiting optical clarity.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is manifested strictly through atmospheric luminosity rather than physical drop shadows. A radiant thermal glow emanates from behind the interface mockup, casting backlighting over the canvas while the card edges are sharpened by faint 1px hairline borders (rgba(255,255,255,0.12)). Below, the footer discards all elevation, flattening into an absolute obsidian planar foundation.
IMAGERY
Visual assets eschew generic medical stock photography in favor of direct, dark-mode software interfaces and abstract organic forms. The sole expressive image element is a warm, luminous 3D volumetric ember orb nestled inside the chat widget, evoking an empathetic artificial intelligence core. Any bright, daylight, or clinical lab photography would immediately rupture the cinematic mood.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable hallmark is the molten thermal backlight (#f5642b radiating behind #140403) which casts a life-like human warmth across an otherwise clinical dark interface. It is implemented by placing an intense, soft radial gradient behind the product interface mock, simulating biological heat. Misusing this effect—such as spreading it indiscriminately as an all-over background wash—destroys its role as a focused source of artificial intelligence illumination.
MUST
- Ground rich thermal orange gradients against pitch black (#070708) to maintain clinical seriousness.
- Use 10px radius on primary buttons rather than full pills to retain enterprise authority.
- Maintain high contrast white (#ffffff) for primary headlines over dark atmospheric gradients.
- Pair coral accent elements directly with medical and AI messaging to signify warmth and vigilance.
AVOID
- Never use pure cold grey (#808080) for muted text; always infuse it with warm taupe undertones (#a69593).
- Avoid using bright daylight blues or greens; thermal embers establish the proprietary aesthetic.
- Do not let the warm hero background glow bleed into the lower black footer section.
- Never omit the safety credentials (e.g. HIPAA) directly below the primary conversion button.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
