Design a dark-mode website section: precision medical telemetry submerged in deep obsidian space with ethereal particle halos.
LAYOUT
The hero employs an asymmetric two-column split on a 1280px container over an uncluttered dark canvas. The left column stacks an uppercase tracking eyebrow, a massive 56px title, a two-sentence narrative block, dual action buttons, and a 4-card metric strip. The right column holds the visual hero: a centered radiographic scan flanked organically by floating glass status pills and encircled by a dynamic particle loop. A three-column trust and compliance ribbon anchors the viewport base.
PALETTE (use these exact hex values)
- #080B11 — Obsidian Deep: Dominant background canvas across the entire viewport.
- #0E1424 — Glass Trench: Semi-translucent container background for telemetry tiles and floating tags.
- #1E283D — Subtle Ridge: Hairline 1px border on metric cards, inspection windows, and secondary buttons.
- #5E6AD2 — Periwinkle Glow: Primary CTA fill, headline accent gradient stop, and active metric iconography.
- #A855F7 — Spectral Violet: Volumetric particle vortex accents and decorative orbital highlights.
- #FF6F59 — Anomaly Flare: Pathology detection heatmap spot on radiograph scans and urgent alert indicators.
- #FFFFFF — Optic White: Primary display text, metric quantities, and active button labels.
- #8E9BAE — Telemetry Slate: Secondary descriptors, navigation links, and metric dimension labels.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist Sans, Public Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 28px subheading, 56px display. Tracking -0.03em at display, 0.08em at overlines. The typographic tone is disciplined, scientific, and authoritative, matching the gravity of clinical healthcare AI. Plus Jakarta Sans or Inter provides clean geometric legibility with zero decorative clutter, allowing numbers and technical descriptors to feel instrumental. The tight display tracking (-0.03em) lends a high-density, modern tech posture to the massive hero declaration.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered entirely through luminescence and translucent glass layering rather than traditional drop shadows. Surfaces rise from the pitch-black canvas using semi-transparent dark blue-gray fills (#0E1424 at 60-80% opacity) bounded by faint 1px borders (#1E283D). Atmospheric particle streams and subtle back-glows pass behind and around cards to establish a physical sense of depth in space.
IMAGERY
Visual assets combine genuine high-resolution medical imaging (monochrome inverted X-rays/MRIs) with generative 3D particle dust streams. Pathology cues are rendered as soft internal Gaussian glows in warm ember tones (#FF6F59) pinpointed directly onto the anatomical scan. Stock photography of clinicians, friendly illustrated figures, or generic tech mockups are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-ring particle vortex cradling a clinical X-ray scan with floating glass telemetry chips. To execute correctly, wrap a dark medical image card in twin elliptical orbital particle trails (#A855F7 and #5E6AD2) and pin 1-2 glass status badges to its perimeter. It is commonly misused by making the particles too dense, creating visual noise that obscures the diagnostic data.
MUST
- Use pure white text only for primary headlines, stats, and primary CTA labels.
- Enclose all floating cards and tiles in a crisp 1px hairline border (#1E283D).
- Keep diagnostic anomaly markers tightly restricted to warm coral/orange tones (#FF6F59).
- Format overline section headers in tracked-out uppercase (0.08em) with dot separators.
AVOID
- Do not use high-saturation fills on secondary cards; keep them deep and translucent (#0E1424).
- Do not use sharp 0px corners; maintain a unified 8px button and 12px card radius.
- Do not introduce green or yellow status indicators that clash with the periwinkle-coral palette.
- Never let background particle spirals occlude typographic legibility.
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. Try in DraPub