Design a light-mode website section: crystalline enterprise infrastructure with high-density data cards and an editorial italic spark.
LAYOUT
The section employs an asymmetric two-column split at the top: a left column (approx. 45% width) housing the headline, value pitch, action buttons, and inline guarantees; and a right bento cluster (55% width) containing two stacked tiers of data cards. Below this primary conversion block, a full-width divider introduces a centered trust heading and a 4-column horizontal feature strip separated by vertical hairpins.
PALETTE (use these exact hex values)
- #F8F9FC — Base Canvas: Full section background providing an airy, high-key ambient surface
- #FFFFFF — Card Surface: Elevated panels, metric boxes, and secondary interactive elements
- #5F55EE — Primary Indigo: Primary CTA fill, italic headline accent, and core infrastructure metrics
- #E05A47 — Terracotta Rust: Secondary metric figures (CO2e, battery storage) and icon badges
- #111827 — Charcoal Ink: Display headlines, section titles, and key value indicators
- #5B6475 — Slate Muted: Supporting descriptions, subheaders, and metadata labels
- #E5E8F0 — Border Subtle: 1px hairline borders delineating cards, stat cells, and secondary buttons
- #EEF0FD — Soft Indigo Tint: Low-contrast circular badge background for technical icons
- #FDF2EF — Soft Peach Tint: Low-contrast circular badge background for financial and scalability icons
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 17px subheading, 24px heading, 52px display. Tracking -0.025em on display, 0.04em on uppercase tags. The typographic hierarchy is precise and institutional yet distinctly modern. The dominant sans-serif (Plus Jakarta Sans match) communicates engineered reliability and enterprise readiness, while the sudden inclusion of a classic italic serif in the primary headline ('On *your* terms') injects custom boutique confidence. Free substitutions like Inter paired with Instrument Serif perfectly preserve this tech-forward bespoke tone.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated through border definition rather than shadow. All cards rest flat on the #F8F9FC canvas with 1px #E5E8F0 boundaries, creating a crisp blueprint-like aesthetic. Minimal ambient diffusion (0 2px 6px rgba(17,24,39,0.02)) is allowed only on the highest surface cards.
IMAGERY
Iconography consists of minimal, technical 16-20px monoline glyphs (solar panel, battery cells, server racks, globe, shield). Icons sit either freely beside text or centered inside 36px circular badges with soft pastel background fills. Photo imagery is deliberately absent, prioritizing hard data and architectural clarity.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the deliberate typographic contrast inside the hero headline: an engineered, heavy sans-serif abruptly punctuated by a warm, fluid serif italic ('your') tinted in indigo gradient (#5F55EE). It softens an otherwise rigorous infrastructure layout, signaling bespoke control. It is commonly misused by applying the serif style across entire sentences rather than restricting it to a single focal word.
MUST
- Keep card outlines at exactly 1px #E5E8F0; avoid heavy drop shadows in favor of surface isolation.
- Restrict the italic serif style exclusively to a single emphasized word within the main display header.
- Use semantic alternating colors (#5F55EE and #E05A47) for metrics to prevent data visual fatigue.
- Maintain high internal card padding (20px to 24px) to preserve an airy, precise architectural feel.
AVOID
- Do not apply drop shadows heavier than 0 4px 12px rgba(0,0,0,0.03); the interface relies on clean strokes.
- Do not use saturated yellow, bright green, or unrelated primary colors; preserve the violet and terracotta duo.
- Do not italicize secondary headers or regular body paragraphs.
- Do not collapse the whitespace between the copy column and the bento cards below 32px.
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 中尝试 
