Design a dark-mode website section: deep nocturnal command center balancing electric cobalt energy with sober enterprise healthcare compliance.
LAYOUT
The composition follows a two-tier vertical hierarchy. The top tier features a high-impact centered card spanning roughly 1200px wide, orchestrating pill badge, display headline, body description, dual button CTA, and trust icons in a strict vertical stack. The lower tier expands into a comprehensive footer containing brand identity and socials on the far left, four compact link columns in the center, and a newsletter capture unit pinned to the right, capped by a single-line copyright bar.
PALETTE (use these exact hex values)
- #06090e — Base Void: Deep foundational canvas background behind the hero container and bottom footer band
- #0a101d — Card Midnight: Primary surface container background for the elevated CTA showcase block
- #2b66ff — Cobalt Primary: High-contrast action color for primary CTA buttons, newsletter triggers, and subtle focal gradients
- #90b4fe — Periwinkle Accent: Emphasized display headline text and selected interactive icon highlights
- #34d399 — Active Emerald: Live system status indicator dot inside the pre-headline pill badge
- #ffffff — Text Crisp: High-priority titles, primary button text, and column header navigation anchors
- #94a3b8 — Text Slate: Paragraph descriptions, column links, secondary navigation, and input placeholder labels
- #64748b — Text Dim: Trust credentials, copyright notice, legal links, and tertiary metadata
- #1e293b — Border Subtle: 1px hairline borders on cards, inputs, secondary buttons, and horizontal dividers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px subheading, 16px body-lg, 44px display. Tracking -0.03em at display, 0 at body. The typographic character is precise, clinical, and institutional. By employing a tightly-tracked grotesque sans-serif with strong geometric terminals, the system communicates mission-critical software reliability suitable for enterprise healthcare. High visual weights in the headline convey authority, balanced by open, highly legible body weights at smaller scales.
GEOMETRY & SPACING
Corner radii — cards 28px, links 6px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is rendered purely through optical illumination rather than mechanical drop shadows. The primary CTA card glows organically via an asymmetric radial gradient (#1d4ed8 into #0a101d) blooming in the top-left quadrant, simulating an off-canvas light source. Secondary elements like input fields and social icons appear lightly recessed via dark matte fills surrounded by razor-thin borders.
IMAGERY
Vector line graphics and technical abstractions only. The top-right of the CTA card features faint, thread-like topographic contour curves rendered in 1px translucent cyan-slate. Photography or illustrative human figures are strictly excluded to preserve an automated, infrastructure-grade developer aura.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the asymmetric electric cobalt bloom seated within an ultra-dark 28px rounded enclosure. It turns an otherwise standard CTA container into an illuminated portal, punctuated by contrasting periwinkle text and anchored by an ultra-crisp, multi-column directory footer.
MUST
- Anchor the CTA card with an intense left-sided radial blue gradient fading to pure darkness on the right.
- Highlight key headline endings using soft periwinkle (#90b4fe) against pure white phrasing.
- Use strict 1px hairline borders with low opacity (0.08 to 0.15) on dark cards and inputs.
- Maintain high typography contrast between column headers (#ffffff) and their child links (#94a3b8).
AVOID
- Do not apply heavy multi-directional drop shadows; rely entirely on ambient surface glows for depth.
- Avoid centered text in the footer navigation columns; keep all directory lists left-aligned.
- Never make the newsletter submit button transparent; it must visually match the primary hero CTA.
- Do not use saturated accent colors other than electric cobalt (#2b66ff) and the tiny emerald status dot.
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 中尝试 
