Design a dark-mode website section: deep-tech computational biology framed in deep abyss blacks, luminescent cyan particulate meshes, and refined telemetry callouts.
LAYOUT
Asymmetrical two-column hero layout constrained inside a 1360px container with generous top spacing (96px). The left 50% column houses the text hierarchy: announcement pill, 3-line display headline, explanatory paragraph, dual CTA buttons, and bottom metric proof point. The right 50% is reserved for the organic particle landscape, interactive cell simulation, and orbital HUD cards.
PALETTE (use these exact hex values)
- #03070D — Deep Abyss: Absolute canvas background, deep void providing stark contrast for neon bioluminescence
- #72EAD6 — Bioluminescent Cyan: Primary CTA fill, keyword heading highlight, and bright focal data point highlights
- #38BDF8 — Electric Sky: Secondary accent used in the lower headline gradient text and subtle ambient glows
- #8B5CF6 — Deep Violet: Subtle bioluminescent back-scatter and particle shading in the 3D cell core
- #FFFFFF — Stark White: Dominant headline text, key metrics, and primary logos
- #94A3B8 — Muted Slate: Paragraph body copy, navigation menu links, and sub-labels
- #1E293B — Telemetry Border: Delicate hair-line borders around telemetry metric badges and secondary buttons
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 26px heading, 60px display. Tracking -0.03em at large display sizes, +0.12em on micro caps. The type choice (Inter Display / SF Pro match) feels technical, analytical, and uncompromisingly modern. Tight headline tracking creates gravitas, while high-tracking micro-caps convey precision engineering and scientific telemetry. Accessible web substitutes like Plus Jakarta Sans or Geist preserve this clinical, forward-looking computational atmosphere.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered organically through an optic black void illuminated by 3D volumetric light and luminous particulate fields. Foreground telemetry cards appear suspended on glass panes using subtle 1px translucent strokes and dark backdrop blur rather than box shadows. Point light sources from simulated cell cores create the illusion of physical space.
IMAGERY
Photorealistic scientific visualization featuring a dense bioluminescent 3D cell sphere resting on a topological particle terrain mesh. Lighting shifts between cyan and ultraviolet, evoking deep-sea biology or confocal fluorescence microscopy. Stock photography of humans, laboratories, or flat clip-art graphics would critically compromise the brand aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-detailed, bioluminescent cellular particle mesh alongside minimalist telemetry HUD cards connected by hairline orbital targeting rings. It communicates high-throughput biological computation instantly without uttering code or lab cliches. Misusing this involves putting generic stock UI around the render or omitting the subtle data callouts.
MUST
- Anchor scientific telemetry chips with precise hairline border strokes (1px rgba(255, 255, 255, 0.12)).
- Use solid electric cyan (#72EAD6) selectively for primary conversion and crucial sentence endings.
- Maintain high typography contrast: large titles in pure white (#FFFFFF), body text in cool muted slate (#94A3B8).
- Ensure dark canvas (#03070D) remains pure and unpolluted by flat grey boxes; build depth via lighting.
AVOID
- Do not use heavy multi-stop drop shadows; depth is conveyed strictly via bioluminescent light.
- Do not apply fully rounded pill shapes (999px) to rectangular telemetry HUD chips; keep them at 8px radius.
- Avoid warm colors like orange, yellow, or crimson; adhere rigidly to cyan, electric blue, and purple hues.
- Do not clutter headings with multi-word solid fills—only color the terminal breakthrough concept.
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 中尝试