Design a dark-mode website section: deep obsidian bio-tech canvas powered by radiant cobalt particle fields, razor-sharp typography, and precision telemetry metrics.
LAYOUT
The page follows an asymmetrical 12-column grid within a 1240px max-width container. Top navigation spans edge-to-edge with centered category links and right-aligned conversion points. The hero section splits roughly 55/45: the left stack contains badge, H1, subtext, dual CTA, and compliance credentials, while the right stack houses the annotated particle visualization. The section resolves into a full-width telemetry metric shelf centered beneath the fold.
PALETTE (use these exact hex values)
- #07090E — Obsidian Deep Base: Primary full-bleed background canvas across the entire viewport.
- #0C0F17 — Obsidian Shelf: Background for bottom telemetry metrics panel and badge containers.
- #181C26 — Subtle Surface Border: Fine 1px dividing lines, button outlines, and metric shelf border.
- #2B66FF — Electric Cobalt: Primary action buttons, badge accents, and upper particle funnel illumination.
- #6393FF — Cobalt Glow Core: Inner glow highlights on particle cloud and focused state borders.
- #FFFFFF — Pure White: Hero display headlines, primary button text, and leading stat values.
- #8A94A6 — Muted Slate Text: Secondary descriptions, feature explanations, and nav link default states.
- #535C6E — Dim Microcopy: Feature footnote tags, metric captions, and chevron icons.
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 18px body-lg, 36px heading, 56px display. Tracking -0.03em at display, 0.05em at caps microcopy. The typographic tone is ultra-modern, clinical, and precise, mirroring modern enterprise infrastructure software. Inter (or Geist) provides neutral grotesque clarity with tight negative tracking on large display headers, creating an authoritative, architectural presence. Uppercase micro-labels add bio-computational precision without feeling cluttered or illegible.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created strictly through atmospheric luminescence and planar contrast rather than traditional drop shadows. The pure obsidian background recedes infinitely, while the 3D particle simulation provides an optical glow that projects forward. Structural containers such as the metric shelf achieve separation via subtle elevation surfaces (#0C0F17) bounded by razor-thin 1px borders.
IMAGERY
Visual assets consist exclusively of procedural, math-driven particle fields rendered as fine point clouds in an hourglass or vortex topology. Glow transitions dynamically from cobalt blue at the rim to incandescent white at the singularity. Stock photography, photorealistic lab hardware, or generic illustrative graphics are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-funnel particle vortex: a mathematical point-cloud structure glowing from cobalt blue to white singularity, paired directly with clinical callout pins that map abstract computational workflows to physical lab infrastructure. It is misused when replaced with flat vector blobs, excessive color spectrums, or low-density particle effects lacking technical density.
MUST
- Restrain vivid electric cobalt (#2B66FF) strictly to CTAs, active status indicators, and luminous particle vertices.
- Maintain high typography contrast by setting display headlines in pure white (#FFFFFF) against deep obsidian (#07090E).
- Use 1px borders (#181C26) rather than heavy drop shadows to define boundaries on dark surfaces.
- Track all uppercase badges and section eyebrows with at least +0.05em letter-spacing for clinical legibility.
AVOID
- Do not introduce multi-colored gradients or secondary accent hues outside the monochromatic blue-to-white spectrum.
- Do not apply blurred drop shadows or diffuse colored halos under rectangular cards or buttons.
- Do not set long-form paragraphs in pure white; degrade secondary text to #8A94A6 to avoid eye strain.
- Do not crowd the particle visualization; maintain at least 48px clearance from hero text columns.
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 中尝试 
