Design a light-mode website section: crystalline technical workspace bathed in architectural white, electric blue currents, and high-frequency halftone dot matrices.
LAYOUT
The hero operates on an asymmetric two-column grid within a 1280px container. The left column (approximately 52% width) anchors the narrative stack: eyebrow badge, 64px display headline, 18px body explainer, action button row, and validation badges. The right column (48% width) holds the visual center of gravity: an elevated agent prompt card overlapping a floating metric dashboard, backed by halftone infrastructure art. The viewport terminates with an arched horizon line introducing the client trust marquee.
PALETTE (use these exact hex values)
- #FFFFFF — Pure Canvas: Dominant background surface providing extreme contrast for text and interface mockups
- #F8FAFC — Cool Wash Base: Subtle ambient gradient at the lower boundary separating hero from partner trust band
- #0F1728 — Signal Slate: Primary typography for headlines, navbar logo, and core metric numbers
- #475467 — Muted Slate: Body copy, navigation links, and descriptive metric subtext
- #185CF6 — Kinetic Blue: Primary CTA button background, key phrase accents, and active flow nodes
- linear-gradient(135deg, #185CF6 0%, #38BDF8 100%) — Electric Gradient: Gradient applied to the terminal word 'faster.' to emphasize speed and transformation
- #12B76A — Success Mint: Status indicator dot and lifecycle step node for active agents
- #EAECF0 — Border Fog: Subtle bounding lines for input fields, floating cards, and secondary action buttons
TYPOGRAPHY
Typeface Inter Display (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 24px heading, 32px heading-lg, 64px display. Tracking -0.03em at display, -0.01em at body, 0.06em at uppercase caption. The typography is clinical, authoritative, and frictionless. Utilizing Inter Display with aggressive letter spacing contraction (-0.03em on display) evokes contemporary developer tools like Linear or Raycast, projecting enterprise capability without corporate stiffness. Free open-source alternatives like Geist or Plus Jakarta Sans preserve this exact high-density structural feel.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 12px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled through minimal atmospheric separation rather than heavy skeuomorphism. Interactive cards utilize a hairline border in #EAECF0 paired with a diffused double shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.03) and 0 20px 32px -4px rgba(15, 23, 42, 0.06). Foreground and background elements interact via vector spline layers that pass behind and through floating cards.
IMAGERY
The visual hero uses architectural halftone engineering illustrations—specifically a bridge tower rendered as a dot-screen matrix—connoting infrastructure, stability, and scale. Delicate vector splines with nodal chips (< />, grid, checkmark) float along dynamic currents to suggest automated code pipelines. Stock photography, 3D clay characters, or generic abstract gradients are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable move is the technical halftone dot-screen bridge structure intertwined with flowing generative spline nodes directly behind a hyper-crisp, elevated AI prompt console. It visually translates invisible software agent workflows into concrete physical civil engineering. Misusing it by replacing the dot halftone with a blurry mesh gradient destroys the disciplined infrastructure metaphor.
MUST
- Reserve the electric cyan-blue gradient strictly for forward-looking outcome verbs like 'faster.'
- Keep card inner padding strictly at 24px to ensure breathing room around embedded UI components.
- Use 1px borders in #EAECF0 on all white cards against white canvas to maintain separation.
- Pair technical halftone dot patterns only with precise architectural or engineering silhouettes.
AVOID
- Do not use dark muddy shadows; keep elevations below 0.08 alpha using slate tinting.
- Never apply the gradient fill across entire sentences; it must highlight exactly one terminal keyword.
- Avoid continuous solid lines for tech illustrations; use dot-matrix stippling and spline trajectories.
- Do not set body copy below 16px or with line-height tighter than 1.5 in the hero narrative.
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 中尝试 
