Design a light-mode website section: crystalline bento conversion cards hovering above a midnight telemetry stipple field.
LAYOUT
The page section is divided horizontally into two primary zones: an upper high-key bento conversion module and an anchored dark footer. The bento module utilizes an asymmetric 7:5 ratio grid where the left card spans full height and the right column houses two stacked feature tiles. Below, the full-bleed midnight footer deploys a brand/newsletter column followed by four evenly distributed category link columns.
PALETTE (use these exact hex values)
- #060B18 — Midnight Telemetry: Full-width background canvas for the navigation footer and newsletter section.
- #FAFAFD — Clean Canvas: Underlying background tone for the upper conversion section.
- #FFFFFF — Card Surface: Primary fill for upper bento cards with stippled halftone underlays.
- #2563EB — Vibrant Signal Blue: Primary action button fill, headline accent span, and newsletter submit button.
- #0F172A — Deep Midnight Slate: Primary display text, main headline, and dark input fill.
- #64748B — Cool Steel: Body copy, bullet point reassurance strings, and copyright disclaimer.
- #4338CA — Indigo Spark: Title text and icon glyph for the stack correlation bento card.
- #0F766E — Teal Shield: Title text and outline icon for enterprise security bento card.
- #E2E8F0 — Subtle Wire Border: 1px stroke outlining light bento cards.
- #1E293B — Dark Trench Border: Structural dividing lines, newsletter input outline, and social button borders in footer.
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 36px heading-lg. Tracking -0.025em on headings, 0.08em on uppercase eyebrows. Clean, engineered, and authoritative. Inter (or Geist) provides neutral Swiss clarity with zero ornamental eccentricities, matching the high-precision world of DevOps and infrastructure monitoring. Small uppercase eyebrows establish technical credibility without shouting.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 72px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered flat-editorial rather than physical. Bento cards use crisp 1px borders (#E2E8F0) and background tint contrast instead of drop shadows. Stippled vector textures create atmospheric visual layers without introducing heavy elevation blurs.
IMAGERY
Graphics rely exclusively on algorithmic dot-matrix spiral particle waves and constellations. Patterns evoke telemetry data streams, radar pulses, and AI log parsing. Photographic portraits, generic 3D shapes, or illustrative cartoon characters are completely forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-zone contrast where glowing stippled-halftone bento cards float directly above a midnight telemetry landscape. The identity hinges on the cyan/blue dot-matrix orbital field radiating through the card canvases, visually representing AI data correlation.
MUST
- Use precisely 20px corner radius on all upper bento container cards.
- Accent exactly one key word in the main headline using #2563EB.
- Maintain dot-matrix vector swirls as faint, low-opacity watermarks beneath text content.
- Pair the solid primary button directly with a transparent text link button.
AVOID
- Do not drop heavy, diffused drop shadows beneath the light bento cards.
- Never use solid bright backgrounds for the feature icon containers; use soft pastel tints.
- Do not allow the dark footer background to creep into the conversion bento grid.
- Avoid centering CTA text; keep all typography in the main card strictly left-aligned.
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 中尝试 
