Design a light-mode website section: clean enterprise datacenter cooling framed through pristine white surfaces and electric blue precision.
LAYOUT
The frame uses a two-column 55/45 split inside a 1360px container. The left side stacks hierarchical proof: eyebrow badge, bold dual-line headline, body synopsis, a 4-column metric strip, and a 3-card testimonial carousel. The right side features a dominant perspective render of white server racks with two floating stat callout badges anchored at diagonal intervals. A horizontal action dock spans the entire bottom grid.
PALETTE (use these exact hex values)
- #f6f8fd — Sterile Canvas Base: ambient page background with subtle horizontal linear light gradients
- #ffffff — Pure Elevation White: floating stat cards, testimonial containers, and bottom CTA bar surface
- #2f54eb — Cobalt Electric: primary CTA button fill, hardware LED indicators, active carousel dots, and stat numbers
- #edf2fe — Soft Cobalt Tint: pill badge backgrounds, icon container circles, and secondary icon chips
- #22c55e — Eco Sprout Green: CO2 reduction stat numerals and sustainability leaf iconography
- #dcfce7 — Eco Soft Wash: circular background plate behind sustainability metrics
- #0a0f1d — Deep Iron Black: h1 display headlines, stat headlines, and primary card titles
- #64748b — Slate Steel Muted: body descriptions, stat labels, metadata, and subtitle annotations
- #e2e8f0 — Border Cool Gray: subtle metric dividers, testimonial container strokes, and banner outlines
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 subheading, 32px heading, 48px display. Tracking -0.03em at display, 0.04em on uppercase pills. The typography communicates hyper-rational engineering rigor and operational calm. Using an unadorned grotesque (such as Inter) with tightened letter-spacing creates the cadence of telemetry dashboards and high-precision spec sheets. It avoids marketing hyperbole by treating proof points, percentages, and uptimes with scientific typographic uniformity.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is produced through subtle layered physical proximity rather than aggressive shadow gradients. Floating metric cards hover cleanly over realistic 3D server racks with a translucent soft shadow (0 12px 32px rgba(10, 25, 50, 0.06)) and crisp 1px borders. The bottom banner lifts gently off the background to establish a clear visual end-cap.
IMAGERY
Features hyper-clean, studio-rendered industrial enterprise hardware: modular cooling units, white server doors with blue indicator LEDs, and industrial overhead piping. Renders should always look factory-fresh, clean-room certified, and free of dust, grime, or dramatic cinematic lighting. Avoid casual office photography or generic tech illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of clinical, photorealistic white server racks with floating, high-contrast metric callout cards featuring circular pastel icon badges. The design relies on this exact contrast—sterile cold infrastructure grounding bright, highly legible proof statistics in absolute physical reality.
MUST
- Use pristine white card surfaces to cleanly cut through industrial machinery imagery.
- Pair electric cobalt (#2f54eb) exclusively with high-value proof metrics and key interactive triggers.
- Maintain negative display tracking (-0.03em) on all numbers above 28px for an engineered look.
- Separate horizontal metric sequences with hairline vertical strokes tinted with #e2e8f0.
AVOID
- Do not use saturated dark or muddy gray backgrounds; keep the environment crisp and cold.
- Avoid heavy borders over 1px thickness on cards or input fields.
- Do not color headline text in blue; reserve electric blue strictly for stats and interactive states.
- Never hide customer avatars or titles in testimonial cards; technical buyers require pedigree proof.
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 中尝试