Design a light-mode website section: engineered enterprise clarity blending high-density technical cards with crisp sapphire blue accents on pure white canvas.
LAYOUT
The top half is an asymmetrical two-column hero: left-aligned value proposition, CTAs, and trust checklist; right-aligned dense technical card against a faint blueprint dot grid. The bottom half is separated by a full-width 1px divider, resolving into a comprehensive 6-column footer grid (logo column, 4 link stacks, and 1 newsletter column) capped by an edge-to-edge legal sub-footer bar.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary page background and top-level card fill
- #f8fafc — Subtle Surface Tint: Background for dashboard card frames and input backgrounds
- #1665d8 — Engineered Electric Blue: Primary CTA buttons, text emphasis on key value propositions, and brand logo
- #0f172a — Deep Slate Text: Primary hero headings, section headers, and high-emphasis numbers
- #475467 — Muted Slate Text: Explanatory subtext, footer links, and secondary metric labels
- #eaecf0 — Hairline Border: Dividing lines, footer separators, button outlines, and card containment borders
- #12b76a — Verification Green: Success badges, checkmark bullets, and pass status indicators
- #f79009 — Status Orange: Micro-indicator dot within the pre-header announcement pill
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 48px display. Tracking -0.025em at display, -0.005em at body. The typography is strictly pragmatic, sharp, and confident. A neo-grotesque sans like Inter conveys rigorous engineering accuracy without looking cold or unapproachable. The high x-height and tight tracking (-0.03em display) ground the hardware-focused copy firmly.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Elevation is achieved primarily through structural hairline borders (#eaecf0) rather than heavy drop shadows. The technical dashboard card uses an ultra-diffuse, subtle shadow (0 12px 32px -4px rgba(16, 24, 40, 0.06)) to hover cleanly above the background canvas. Secondary panels inside cards rely entirely on outline strokes with zero blur.
IMAGERY
This design avoids photographic imagery completely. Visual interest is established via authentic software interfaces: simulated simulation tables, parameter tolerances, dynamic blue sparkline waveforms, and crisp vector iconography.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of a high-density, accurate hardware-simulation card (complete with pass/fail chips, sparkline graphs, and verification states) directly opposing high-conversion marketing copy, unified by a single signature electric blue accent (#1665d8).
MUST
- Reserve vibrant blue #1665d8 exclusively for primary interactive states and key headline punchwords.
- Pair deep slate headers (#0f172a) with neutral slate body text (#475467) for precise visual hierarchy.
- Use micro-status chips with soft green pastel backgrounds (#ecfdf3) to confirm technical metrics.
- Enclose floating interface screenshots in a 1px border (#eaecf0) with subtle 12px rounded corners.
AVOID
- Do not use dark backgrounds, high-contrast dark mode segments, or harsh black (#000000) fills.
- Avoid colored drop shadows; only use faint slate-tinted diffusion (0 4px 12px rgba(15,23,42,0.04)).
- Never apply rounded pill borders (999px) to primary functional buttons; keep button radii disciplined at 8px.
- Do not crowd technical metrics; preserve at least 16px internal padding inside simulated UI cells.
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 中尝试 
