Design a dark-mode website section: clinical dark mode precision anchored by glowing isometric nodes and focused electric cobalt calls to action.
LAYOUT
Two-zone vertical stack. The upper region is an asymmetric 50/50 split hero/CTA with conversion copy and actions anchored on the left and an isometric node graphic balancing on the right. Below a full-bleed horizontal divider, the page transitions into a balanced five-column footer with brand capture on the left and four thematic link columns on the right, terminating in a legal sub-footer bar.
PALETTE (use these exact hex values)
- #060B14 — Obsidian Canvas: dominant global page canvas providing high-contrast backdrop for typography and neon nodes
- #1E293B — Subtle Border Slate: hairline 1px dividers and card boundaries separating the footer grid and utility modules
- #1A73E8 — Electric Cobalt: primary interactive CTA fill, subscribe button background, and focus rings
- #60A5FA — Cyan Luminescence: highlighted text span 'with confidence' and glow reflections along 3D edges
- #F43F5E — Laser Magenta: secondary energy signal line running toward approval and metric nodes
- #FFFFFF — Pure White: primary headline text, active navigation titles, and bright iconography
- #94A3B8 — Muted Slate: paragraph body copy, secondary button descriptions, and footer link lists
- #64748B — Dimmed Carbon: copyright notice, input placeholder, and inactive category labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 16px subheading, 18px body-lg, 24px heading, 48px display. Tracking -0.03em at display, 0.01em at body. Inter or Plus Jakarta Sans provides a clean, neutral, and highly technical grotesque voice. The tight letter tracking (-0.03em) on display headlines evokes institutional authority and enterprise readiness. It feels like a high-end medical-grade operating system, perfectly balanced by clear, accessible body text sizes.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 12px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered entirely through glowing highlights and translucent isometric planes rather than drop shadows. 3D pedestals feature frosted rim lighting and reflective top faces, set against deep atmospheric negative space. Linear dot trails glow with colored falloffs to imply live network activity without cluttering the UI layer.
IMAGERY
Isometric 3D glass and metallic hardware motifs floating in void space, accented with glowing neon laser conduits and clinical symbols (shield, document, charts, flower emblem). Photorealistic human imagery or casual vector illustrations would severely undermine the regulatory-grade precision. Renders must remain matte, dark, and illuminated by targeted edge light.
SIGNATURE DETAIL — the thing that makes this design itself
Dual-line action tiles pairing bold primary text with a muted explanatory sub-label (e.g., 'Book a Demo' with 'See Withpanacea in action'), set inside 12px rounded cards alongside 3D isometric glowing plinths. This immediately sets user expectations on time and effort while retaining visual polish.
MUST
- Anchor headline focus by tinting the terminal two words in bright cyan/sky blue (#60A5FA).
- Pair primary CTA buttons with a smaller supporting subtitle beneath the main label.
- Use 1px borders in #1E293B to create structure without adding visual heaviness.
- Keep dark canvas strictly neutral-to-navy (#060B14) to maintain high contrast for 3D luminous assets.
AVOID
- Never use pure black (#000000) for the background; the rich navy undertone gives clinical depth.
- Avoid flat 2D line art when paired with isometric glossy illustrations.
- Do not use saturated primary colors for secondary text; preserve muted slate (#94A3B8) for scanability.
- Never drop CTA dual-line subtitles; they are essential for clarifying time commitment and outcome.
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. Try in DraPub