Design a light-mode website section: high-precision devsecops marketing where generative point-cloud terrain bridges daylight inquiry into midnight infrastructure.
LAYOUT
The page establishes an asymmetric two-part rhythm. The upper half is an open, airy light canvas containing left-aligned copy, actions, and trust proofs spanning 55% width, while the right 45% accommodates the flowing point cloud. Below, an abrupt full-width boundary drops into a tightly structured 6-column mega-footer, capped by a minimal legal copyright bar at the extreme base.
PALETTE (use these exact hex values)
- #ffffff — Canvas Light: Primary surface for the conversion headline, value propositions, and generative art field
- #0b0f17 — Canvas Obsidian: Deep structural background for the global navigation footer and newsletter block
- #5754ea — Electric Indigo: Primary CTA fill, active link accents, brand logomark highlight, and headline gradient origin
- #7f89fc — Periwinkle Accent: Section category headers in the dark footer and secondary vector dot elements
- #ff7066 — Coral Spark: Kicker bullet indicator, tiny floating data markers, and gradient termination on highlighted text
- #0d111c — Obsidian Ink: High-contrast display title and primary headline text on light background
- #525c6e — Muted Slate: Explanatory paragraphs and trust checkmarks under light section
- #94a3b8 — Silver Dusk: Footer navigation links, privacy notices, and legal disclaimers on dark canvas
- #131a26 — Surface Slate Tint: Newsletter text input background and structural dark border accents
TYPOGRAPHY
Typeface Inter Display (or Geist, Plus Jakarta Sans, Helvetica Now), weights 400/500/600/700. Sizes 11px caption, 12px subheading, 13px body-sm, 14px body, 18px body-lg, 48px display. Tracking -0.025em at display, 0.08em at uppercase captions. The voice is analytical, precise, and unapologetically engineered for technical buyers. The crisp geometric grotesque brings authoritative clarity to the 48px display headline, while the subtle terminal prefix (>_) in the primary CTA immediately signals command-line fluency to developers. Inter Display or Geist are ideal matches due to their neutral apertures and dense numeric kerning.
GEOMETRY & SPACING
Corner radii — cards 12px, links 2px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through color planes and particulate layering rather than CSS box shadows. The stark transition from the white #ffffff canvas to the #0b0f17 obsidian slab gives the impression of looking down into deep infrastructure. The input box uses a recessed inner surface tone (#131a26) to suggest an inset well.
IMAGERY
The visual hero is a procedural point-cloud topographical ribbon rendering vector security scan waves. Thousands of micro-dots (1px to 2px) form a dynamic, meandering computational stream in royal blue and slate. Photographic assets or 3D glossy renders are strictly off-brand; all visual metaphor must be mathematical and generative.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the fluid generative dot-matrix contour wave that sweeps diagonally across the sterile light canvas. It translates complex machine intelligence into organic topography without resorting to generic AI sparkle tropes. It is misused if blurred, made photographic, or rendered with heavy 3D shading instead of clean vector points.
MUST
- Maintain high contrast by confining the generative dot-mesh strictly to the upper white canvas.
- Keep the footer transition crisp and unbordered; do not use gradients to blend the white and dark planes.
- Use JetBrains Mono or similar coding fonts exclusively for kicker eyebrows and terminal glyphs.
- Format all footer column categories in uppercase with at least 0.1em letter-spacing.
AVOID
- Do not invert the layout by placing the particle field inside the dark footer canvas.
- Never apply drop shadows to the primary indigo button; maintain flat, modern vector surfaces.
- Do not let the display heading wrap past three lines at desktop viewports.
- Avoid using saturated backgrounds for the email newsletter input; keep it deeply recessed.
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 中尝试 
