Design a light-mode website section: industrial energy infrastructure elevated by warm terracotta warmth, pristine telemetry cards, and generous editorial whitespace.
LAYOUT
The hero section operates on an asymmetrical two-column layout set within a 1360px container. The left column (roughly 45% width) holds editorial anchor elements: eyebrow tracker, 3-line 64px display headline, descriptive body, dual action buttons, and a bottom row of 3 value pillars. The right column (roughly 55% width) presents a high-density, multi-card bento grid incorporating photographic hardware cards, an interactive dark-mode graph card, and a bottom carbon offset panel spanning both columns.
PALETTE (use these exact hex values)
- #FAFAF8 — Canvas Warm: Global background surface creating a warm, non-sterile technological feel across the viewport
- #FFFFFF — Surface Card: Background for floating telemetry badges, metric cards, and secondary controls
- #16191E — Surface Telemetry Dark: Dedicated dark card surface for high-contrast multi-channel graph telemetry visualizations
- #B93822 — Terracotta Flame: Primary brand accent used for primary CTAs, logo icon, headline highlights, and eyebrow markers
- #18181B — Ink Primary: High-contrast headings, main metric numeric values, and critical UI labels
- #52525B — Ink Secondary: Hero paragraph descriptions, inactive navigation items, and micro-metric subtexts
- #16A34A — Telemetry Active Green: Status indicators, uptime verification badges, and positive carbon offset map nodes
- #EAB308 — Telemetry Solar Gold: Line graph telemetry representing solar generation curve metrics
- #E4E4E7 — Border Subtle: Outlines for secondary pill buttons, card wrappers, and hair-thin divider accents
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 40px heading-lg, 64px display. Tracking -0.03em at display, 0.05em at micro badges. The typographic tone is authoritative, highly disciplined, and modern, conveyed through an unembellished neo-grotesque sans-serif. Tight tracking (-0.035em) on the bold headline commands immediate authority, while micro-scale metadata (10px uppercase with 0.08em tracking) reinforces scientific rigor and industrial telemetry standards. Geist or Plus Jakarta Sans serve as drop-in replacements with matching x-height and mechanical neutrality.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Elevation is achieved through stark surface contrast rather than multi-layered shadows. The primary canvas is warm off-white, cards are flat crisp white or deep graphite, and floating telemetry chips pop with an ultra-soft ambient occlusion shadow (0 4px 24px rgba(0, 0, 0, 0.07)). The interaction of physical machine photography beneath geometric vector overlays creates a natural sense of architectural depth.
IMAGERY
Photography captures real-world renewable energy and high-density computing infrastructure: expansive solar arrays illuminated by warm golden-hour backlighting, server halls with clean cable management, and modular data center pods sited in rural green fields. Imagery must look grounded, documentary, and physical, completely eschewing generic cyberpunk or abstract neon AI tropes.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the floating white telemetry pill anchored inside the corner of physical hardware photographs. This pairing directly bridges tangible steel-and-silicon reality with live digital metrics, turning static architectural photography into a dynamic dashboard. It is misused when floating badges are placed arbitrarily outside card boundaries or over cluttered, high-contrast photographic regions that compromise readability.
MUST
- Use solid terracotta (#B93822) strictly for key focal points like the primary CTA and terminal headline word.
- Pair rich, natural daylight hardware imagery directly with crisp white telemetry overlays.
- Keep typography strictly sentence case for headlines, reserving tracked uppercase exclusively for 10px telemetry tags.
- Maintain generous 20px corner smoothing across all bento cards and 10px for interactive controls.
AVOID
- Never switch the main page background to cold clinical pure white (#FFFFFF); retain the warm tone (#FAFAF8).
- Do not saturate headlines with multiple colored words; terracotta is allowed on only one terminal keyword.
- Never use fully rounded pill shapes for primary buttons; maintain the distinct 10px soft rectangle standard.
- Do not use generic 3D illustrations or abstract gradient spheres; imagery must reflect authentic industrial machinery.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
