Design a dark-mode website section: clinical precision cloaked in deep void black with emerald sonar radial illumination.
LAYOUT
The layout is strictly stacked into two macro bands: an airy, centered CTA block occupying the top half, followed by a grounded 5-column informational footer. The footer arranges brand identity and compliance tokens on the left, three product link columns in the center, and a newsletter sign-up on the right.
PALETTE (use these exact hex values)
- #020609 — Obsidian Canvas: Deepest background layer for the entire CTA and footer surface.
- #080e14 — Surface Dark Plate: Footer foundation layer sitting beneath the glow gradient.
- #0f1722 — Input Surface: Background fill for the newsletter input field with subtle border.
- #10b981 — Emerald Brand: Primary CTA fill, active status dot, and glow source.
- #14b8a6 — Luminous Teal: Secondary accent in the brandmark and gradient halos.
- #0d3936 — Glow Horizon: Diffused radial back-light centered behind the CTA heading.
- #0f2f30 — Divider Line: Hairline horizontal divider between the CTA section and footer columns.
- #ffffff — Pure White: Primary headings, active states, and brand name typography.
- #94a3b8 — Slate Text Muted: Subheadings, footer links, input placeholder, and copyright note.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 22px heading, 44px display. Tracking -0.02em for headings, 0 for body. The type voice is clinical, technological, and confident, perfectly suited for deep-tech medical software. Inter provides neutral clarity at tiny caption sizes (12px-14px) while remaining clean and authoritative in the 44px headline.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous lighting rather than traditional drop shadows. A subtle ambient teal radial glow behind the CTA creates atmospheric perspective against the deep black abyss, while interactive inputs sit in subtly carved-out surface recesses.
IMAGERY
Imagery is non-photographic and relies on a graphic brand symbol: concentric glowing cyan arcs evoking ultrasound or sonar soundwaves. Vector-line icon accents (calendar, arrow) are rendered in crisp 1.5px strokes matching text color.
SIGNATURE DETAIL — the thing that makes this design itself
The sonar horizon: an ultra-subtle, wide radial teal flare emanating outward from a hairline divider line, instantly imparting the feeling of deep-sea sonar or clinical ultrasound imaging. It must remain low-opacity and diffused; turning it into a sharp gradient or vivid streak ruins the medical precision.
MUST
- Anchor the CTA section with a diffused radial teal beam that sits strictly behind the content.
- Maintain strict column alignments in the footer using a 12-column grid or standard 5-column flex.
- Use pure white text (#ffffff) only for headings and active navigation items to prevent eye fatigue.
- Pair the primary solid green button with an underlined or ghost secondary action.
AVOID
- Do not use bright saturated borders; borders must remain nearly invisible (#0f2f30).
- Do not saturate entire backgrounds with green; restrict glow to soft radial blurs.
- Avoid centered text inside the footer columns; keep all footer lists left-aligned.
- Do not place high-contrast white backgrounds inside buttons or cards in this dark palette.
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 中尝试