Design a light-mode website section: warm editorial linen grounded by clinical precision, isometric data layers, and atmospheric landscape topography.
LAYOUT
A 12-column asymmetric hero structure. Top contains a full-width header with brand mark far left, grouped center links, and dual auth actions right. The hero divides into a left-hand 6-column content stack (category pill, 64px display heading with terracotta terminal phrase, 3-line body copy, and dual CTA buttons) and a right-hand 6-column space accommodating the 3D isometric stack overlaid on the landscape. A unified horizontal metrics dock anchors the bottom spanning all 12 columns.
PALETTE (use these exact hex values)
- #FAF8F4 — Linen Base: Primary surface background across the entire viewport giving an organic editorial foundation.
- #141716 — Slate Void: Primary headings, solid button fills, and high-contrast pill tooltips.
- #B84435 — Clinical Terracotta: Headline emphasis on healthcare AI and comparative metric highlights.
- #2E7D47 — Clinical Green: Active telemetry status indicators, 14M+ stat callout, and security badges.
- #1E63A5 — Diagnostic Blue: 98.7% metric callout and middle network pipeline visual plane.
- #666B67 — Muted Slate: Secondary descriptive body copy, sub-labels, and metadata notes.
- #FFFFFF — Card Surface: Floating proof metrics footer container and white layer planes.
- #EAF3EC — Mint Tint: Background fill for the terminal 'Live environments' success module in footer.
- #E3DFD7 — Subtle Border: Outline for secondary ghost buttons, metric dividers, and pill borders.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 64px display. Tracking -0.03em at display, 0em at body. The typographic tone is authoritative, academic, and deeply technical yet approachable. Plus Jakarta Sans (or Inter/Geist) provides clean neo-grotesque structural clarity with tight display tracking that mimics high-end print editorial journals. The restrained pairing of neutral dark slate with an earthy terracotta punch gives life sciences AI a grounded, grounded-in-reality presence.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1320px container, comfortable density.
DEPTH
Depth is handled predominantly through translucent optical layering rather than heavy drop shadows. The isometric compute stack utilizes variable opacity planes, soft white specular reflections, and backdrop blurs to float over the photo background. The lower proof bar uses an ultra-soft ambient shadow (0px 20px 40px -15px rgba(20,23,22,0.06)) to hover above the canvas bottom.
IMAGERY
The imagery fuses natural landscape photography—specifically rolling green agricultural or highland hills veiled in morning mist—with fine geometric point-cloud vectors and terrain contour lines. It contrasts organic earth with structured digital modeling. Cheesy stock photos of doctors, stethoscopes, or generic glowing brain nodes are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of misty real-world topography seamlessly fading into an ivory canvas, overlaid by an isometric glass data-plane stack with connected dark pill annotations. It instantly visualizes 'real-world data turned into structured AI compute'. Misusing this involves flattening the planes or removing the atmospheric landscape backdrop.
MUST
- Use warm linen (#FAF8F4) rather than stark paper white (#FFFFFF) for the overarching canvas.
- Reserve clinical terracotta (#B84435) strictly for key medical AI phrases and strategic emphasis.
- Ensure isometric planes feature real translucent layering with subtle wireframe meshes and glowing nodes.
- Maintain strict vertical hairline dividers (#E3DFD7) between items in the proof metrics container.
AVOID
- Do not introduce generic tech purple or neon cyan gradients anywhere in the interface.
- Never make the metric dock span edge-to-edge without margins; it must float gracefully above the bottom edge.
- Avoid plain white backgrounds for the hero, which immediately flattens the editorial tone.
- Do not use solid filled icons inside the stack annotations; keep them monoline wireframes.
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. 在 DraPub 中尝试 
