Design a light-mode website section: industrial edge intelligence framed by high-contrast pine green, clean metric grids, and tactile physical compute telemetry.
LAYOUT
The hierarchy flows from high-level positioning on the upper-left (eyebrow, massive two-phrase header, lead text, action split, micro-badges) directly into an asymmetric right-side telemetry cluster of 2x2 metric tiles hugging the physical hardware box. Below this, a 4-column balanced grid presents client validation cards, terminating in a centered category eyebrow and a five-segment divider bar across industry domains.
PALETTE (use these exact hex values)
- #FCFCFD — Canvas Ground: Global backdrop, clean clinical off-white with faint dotted texture overlay
- #FFFFFF — Surface Card: Background for metric tiles, testimonial cards, and secondary action buttons
- #0A4D3C — Pine Deep: Primary CTA fill, high-trust foundational brand colour for primary commitments
- #10B981 — Emerald Accent: Category eyebrows, metric inline highlights, status icons, and quote marks
- #2DD4BF — Holo Teal: Holographic topographical elevation mesh and device telemetry glow
- #111827 — Text Primary: Hero headers, primary statistics values, and client author names
- #4B5563 — Text Muted: Body narrative copy, quote contents, and sub-labels
- #E5E7EB — Card Border: Subtle outline on statistic containers, secondary buttons, and testimonial cards
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 32px heading, 52px display. Tracking -0.03em display, +0.08em overlines. The typography conveys engineering rigor and institutional authority through tight, architectural grotesque letterforms. The deliberate absence of decorative serif elements or quirky humanist quirks reinforces zero-latency, edge-deployed reliability.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is restrained to clinical, close-range ambient shadows (0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02)) around white cards. Physical presence is reinforced through photorealistic rendering of metallic heatsinks and directional hardware shadows rather than UI drop shadows.
IMAGERY
Hero imagery centers on precise, unadorned industrial device renders—brushed aluminum casing, machined fins, and raw peripheral ports—coupled with schematic 3D volumetric wireframes or terrain contours in glowing translucent teal. Avoid casual office lifestyle shots or vague conceptual cloud graphics.
SIGNATURE DETAIL — the thing that makes this design itself
The signature gesture is the juxtaposition of deep pine green actions against clinical white telemetry tiles and an extruded physical hardware device crowned by a glowing topographical wireframe. To execute correctly, ensure hardware lighting matches the subtle warm-gray UI daylight and that inline metric text selectively illuminates proof points in vivid emerald.
MUST
- Use deep pine green (#0A4D3C) strictly for primary commitment points and interactive CTAs.
- Highlight specific key words inside metric supporting labels using emerald (#10B981).
- Maintain strict 16px border-radius across all cards and metric enclosures.
- Pair physical industrial hardware renderings with ethereal translucent software/data projections.
AVOID
- Do not use dark backgrounds or saturated neon hues; maintain pristine technical daylight.
- Never drop shadows that exceed 8px blur or 0.05 opacity; elevation remains crisp and mechanical.
- Avoid pill radiuses on cards or metric blocks; reserve pills strictly for chips if added.
- Do not render metric digits in light weights; metrics must be 700 bold and tabular.
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 中尝试 
