Design a dark-mode website section: dark surgical telemetry balancing obsidian depth with bioluminescent electric blue and clinical cyan accents.
LAYOUT
The layout uses an asymmetrical two-column hero section followed by a structured 6-column global footer. The hero left column holds the hierarchy: trust badge, display headline, clinical explanatory copy, and dual CTA cluster. The right column houses the self-contained telemetry dashboard card. The footer divides into a brand identity block on the left, four navigation link columns in the center, and a newsletter capture form on the right.
PALETTE (use these exact hex values)
- #06080E — Deep Void Canvas: Root page background providing maximum contrast for bioluminescent accents and clinical imagery.
- #0C101A — Telemetry Surface: Elevated background for telemetry dashboard panels, input fields, and social button containers.
- #1668FE — Cobalt Luminescence: Dominant call-to-action color for primary buttons, highlighted active states, and focal glow drops.
- #2DD4BF — Clinical Mint: Status indicators, trust badge outlines, verified checkmarks, and high-confidence metrics.
- #FFFFFF — Sterile White: Primary headings, high-priority numeric scores, and active link labels.
- #94A3B8 — Muted Slate: Explanatory body copy, inactive footer links, subtext labels, and copyright notices.
- #1E2638 — Subtle Border: Card outlines, divider lines, and text field boundaries across dark surfaces.
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px subheading, 24px heading, 44px display. Tracking -0.03em at display, -0.01em at body, 0.02em at captions. The typography communicates clinical certainty, computational rigor, and surgical precision. Using an ultra-clean neo-grotesque sans with tight display tracking evokes medical software interfaces like Epic or Philips telemetry consoles. Geist Sans or Inter provide ideal open-source equivalents with crisp hinting on dark displays.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created without physical drop shadows by layering translucency and luminosity over deep void black. Telemetry cards lift from the base canvas using 1px borders in #1E2638 and slightly lightened surface fills (#0C101A). Primary actions and parametric data waves cast soft, ambient colored light into the background rather than casting structural shadows.
IMAGERY
Imagery strictly consists of high-contrast orthopedic radiographs (X-rays) overlaid with surgical telemetry overlays, cyan alignment rings, and coordinate pins. Organic lifestyle photography or casual human portraits are strictly off-brand. Graphic flourishes are limited to vector parametric sine curves evoking biological wave dynamics or neural fiber tracks.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the bioluminescent surgical preview: an authentic X-ray viewport embedded inside a dark telemetry dashboard, framed against sweeping cyan-blue parametric fiber lines and anchored by an electric blue glowing CTA button. It immediately bridges clinical credibility with next-generation deep learning.
MUST
- Use clinical mint (#2DD4BF) exclusively for confidence scores, successful checks, and precision markers.
- Pair the electric blue button with a diffuse blue drop glow (0 8px 24px rgba(22, 104, 254, 0.35)).
- Keep card surfaces at #0C101A with subtle 1px borders (#1E2638) to define boundaries without heavy shadows.
- Format multi-column footers with bold 14px white category headers and 14px muted slate link stacks.
AVOID
- Do not use warm accent colors like orange, yellow, or red unless signaling an explicit surgical hazard.
- Never drop raw photographic stock imagery into cards; all medical visuals must resemble monochrome radiographs or telemetry.
- Avoid thick, opaque borders greater than 1px around telemetry cards or badge pills.
- Do not remove the diffuse blue glow behind the primary CTA 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 中尝试