Design a light-mode website section: clinical bio-intelligence balanced between sterile laboratory daylight and deep abyssal data infrastructure.
LAYOUT
The upper block uses a 50/50 asymmetric two-column split, grouping headline, trust marker, and dual CTAs on the left while anchoring the right with a full-bleed dashboard card. Below this, a hard horizontal transition cuts cleanly into the dark oceanic footer. The footer arranges a branding and newsletter column on the left (spanning roughly 35% width) paired with four evenly distributed navigation columns on the right, capped by a minimal bottom legal rail.
PALETTE (use these exact hex values)
- #041B22 — Deep Oceanic Abyss: dominant background for global footer, navigation grounding, and contrast barrier
- #F7FAF9 — Clinical Field Mist: hero canvas surface providing a sterile, low-glare biological research backdrop
- #FFFFFF — Dashboard Pure White: high-elevation application preview background and input fill
- #106A53 — Bio Emerald Primary: main call-to-action button fill, primary brand accents, and check icon tint
- #2EE59D — Signal Mint: footer category eyebrow headings, system status indicator light, and active highlights
- #092730 — Abyss Input Surface: background fill for newsletter email capture within the dark footer
- #0B1D24 — Deep Cyan Text: primary display headline and body-lead text on light surfaces
- #5A7079 — Muted Slate Grey: secondary supportive descriptions on light backgrounds and border outlines
- #8CA2AA — Footer Slate Link: navigation link labels, legal items, and unselected states on dark surfaces
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Archivo), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 46px display. Tracking -0.025em for display, +0.06em for uppercase eyebrows. The type choice (Plus Jakarta Sans or Inter match) delivers an objective, empirical tone reminiscent of scientific whitepapers combined with high-growth SaaS tooling. Tight tracking on display sizes (-0.03em) makes the em-dash in 'insight—faster' feel assertive and urgent. The contrast between tiny, wide-tracked uppercase headers and clean sentence-case navigation links creates rapid visual parsing.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 12px, buttons 14px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled through crisp atmospheric contrast rather than heavy multi-layered shadows. The floating application container uses a clean, wide-spread ambient shadow (0 20px 48px rgba(4, 27, 34, 0.08)) reinforced by an 8px solid white framing ring that detaches it cleanly from the light background. The footer deliberately uses zero elevation, existing as a completely flat, grounding geological stratum.
IMAGERY
Avoid consumer-facing photography, human lifestyle portraits, or vague 3D glass shapes. Visual interest is derived entirely from functional bioinformatic interfaces: t-SNE / UMAP multi-color cellular cluster scatter plots, evolutionary score matrices, and molecular hypothesis tags. Soft topographic contour lines in 1px stroke (5% opacity teal) flow behind the light canvas to evoke biological landscape mapping.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the radical horizon line where the clinical mint-tinted hero canvas (#F7FAF9) abruptly meets the deep abyssal slate footer (#041B22), immediately illuminated by Signal Mint category eyebrows and an intricate computational dot rosette watermark. It transforms an otherwise ordinary SaaS footer into a cinematic, deep-sea research instrument.
MUST
- Anchor large light-mode hero sections with an impenetrable dark abyss footer (#041B22) for weight.
- Style uppercase category labels in Signal Mint (#2EE59D) with wide letter spacing (+0.08em).
- Keep primary button corners moderately curved (14px) instead of generic fully round pills.
- Include high-density data visualizations (scatter plots, score ratios) to build scientific authority.
AVOID
- Do not use generic saturated blues; rely strictly on clinical slate, deep oceanic teal, and mint.
- Never apply harsh black (#000000) drop shadows beneath floating product interface cards.
- Avoid centering hero headers when pairing them with asymmetric horizontal app previews.
- Do not drop footer category labels to lower case or standard sentence case.
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 中尝试 
