Design a light-mode website section: clinical engineering white space illuminated by glowing refractive glass, technical blueprints, and electric blue verification signals.
LAYOUT
Asymmetric two-column split hero inside a 1240px container. Left column contains launch pill, two-line bold headline, paragraph body, dual CTA button group, and a three-item linear feature list. Right column hosts the 3D pedestal graphic flanked organically by four floating compliance badge micro-cards. Below the hero split sits a full-width floating metric banner with four data points, immediately followed by the rounded top edge of an inverted dark section.
PALETTE (use these exact hex values)
- #F6F9FD — Canvas Ice: dominant background wash with subtle radial cyan-blue lighting on the hero right flank
- #FFFFFF — Surface Pure: elevated metric ribbons, floating compliance tags, and secondary action buttons
- #005BFF — Electric Cobalt: primary interactive buttons, link highlights, and key split headline accent text
- #0B1528 — Midnight Ink: high-contrast display headlines, metric numbers, and solid brand wordmark
- #526077 — Steel Slate: body copy, navigation links, and supportive feature labels
- #00D2FF — Radiant Cyan: 3D volumetric light emission, pedestal ring illumination, and inner shield refraction
- #10B981 — Status Emerald: compliance verification checkmark icons and live operational badge indicators
- #E2E8F0 — Subtle Outline: delicate 1px borders encasing metric bars, tags, and secondary buttons
- #070E1B — Subterranean Void: dense dark navy background for the incoming social-proof section below
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 60px display. Tracking -0.03em at display, -0.01em at body. Plus Jakarta Sans delivers an ultra-clean, engineering-grade corporate voice. Its tight display apertures and strong geometry echo hardware precision and ISO-standard rigor. If substituted, Inter or General Sans maintain the necessary technical authority without losing legibility at tiny 11px tag scales.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is minimal and air-driven rather than layered with thick shadows. Elevated elements rely on pure white cards against the #F6F9FD canvas, reinforced with a 1px border (#E2E8F0) and diffuse, expansive ambient shadows (0 12px 32px rgba(11,21,40,0.04)). The primary sense of dimension is delegated to the hyper-realistic 3D rendered glass and lighting in the right graphic.
IMAGERY
Features a realistic, photorealistic 3D hardware render: a clear optical acrylic glass cube with rounded bevels enclosing a glowing neon cyan shield. The cube rests on an illuminated brushed aluminum circular pedestal with blue edge LEDs, encircled by floating light particles and a faint perspective CAD blueprint floor grid. Never use flat cartoon vectors, generic corporate photography, or hand-drawn sketches.
SIGNATURE DETAIL — the thing that makes this design itself
The refractive translucent glass cube containing an illuminated shield, sitting on a glowing hardware testing pedestal and surrounded by satellite compliance tags ('SOC 2', 'ISO 27001', 'IEC 62443'). Misusing it involves flattening the cube into a 2D icon or removing the floating regulatory tags, which destroys the bridge between physical hardware and digital compliance.
MUST
- Use Electric Cobalt (#005BFF) strictly for focus points and the second half of key punchlines.
- Maintain high contrast between Midnight Ink (#0B1528) headings and Slate (#526077) descriptions.
- Wrap metric and verification elements in pure white cards (#FFFFFF) with subtle 1px border (#E2E8F0).
- Keep typography tracking tight (-0.03em) on headlines 32px and larger.
AVOID
- Do not use dark or colored backgrounds for the hero card wrappers; keep them pure white.
- Avoid warm tones, oranges, or muddy grays; the palette must remain strictly icy and clinical.
- Do not drop shadows heavier than rgba(11,21,40,0.08) on card elements.
- Do not color the entire headline blue; the contrast between black and blue defines the hierarchy.
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