Design a light-mode website section: crisp white engineering clarity anchored by a dark technical telemetry viewport.
LAYOUT
The layout follows an asymmetrical multi-tier rhythm: the top tier splits into a hero headline/badge column on the left and a 4-column metric card group on the right. The middle tier balances a tall primary testimonial card against a wide split-screen technical terminal. The lower tier resolves into an even 4-column row of compact testimonials, followed by a centered bottom CTA strip.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary background for cards, hero area, and main surface container
- #0B131B — Terminal Deep Slate: Dark technical console container background housing code editor and 3D simulation
- #0F172A — Slate Text Primary: High-contrast headings, primary quotes, and active tab states
- #64748B — Muted Slate Secondary: Metric descriptions, subtitle copy, author titles, and inactive code tabs
- #0E766E — Telemetry Emerald: Metric counter numbers, badge text/icons, and active status indicators
- #22C55E — Status Green: Terminal status dots, live simulation indicators, and 200 OK badges
- #E2E8F0 — Border Subtle: Card outlines, divider lines, and metric card containment
- #1E293B — Terminal Border: Outline and interior splits within the dark telemetry console
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 32px heading, 44px display. Tracking -0.03em on display, 0 on body. The typographic tone is uncompromisingly technical, rigorous, and understated. Executed using modern geometric sans-serif (Inter) with condensed tracking at large sizes, it mimics high-reliability enterprise developer consoles. JetBrains Mono provides the mechanical precision required for the terminal interface.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 6px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled entirely flat and structural, relying exclusively on 1px borders (#E2E8F0 on light cards, #1E293B on dark console) rather than diffuse box shadows. Layering is conveyed through stark contrast: the deep #0B131B terminal console acts as a recessed or focused viewport cutting into the bright #FFFFFF surface.
IMAGERY
Visual imagery centers strictly on technical accuracy: volumetric CFD (computational fluid dynamics) airflow simulations rendered in turquoise-to-red thermal gradient streams over wireframe server racks. Author avatars are authentic headshots set in clean 36px circles with no borders.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-dark developer execution console and thermal twin render embedded cleanly beside sterile, bordered enterprise customer proof cards.
MUST
- Keep card borders razor-thin using 1px solid #E2E8F0 with no drop shadows.
- Use deep forest/emerald (#0E766E) sparingly for data numbers and accents.
- Enclose the dark terminal in #0B131B with a subtle #1E293B border to ground the light canvas.
- Pair customer quotes with real partner logos and circular author portraits.
AVOID
- Never apply heavy gaussian drop shadows beneath metric or testimonial cards.
- Do not use generic illustrative vectors; use genuine 3D CFD physics visualisations.
- Avoid warm yellows or saturated primary blues for primary data accents.
- Do not center-align quote text; keep all testimonial copy 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 中尝试 
