Design a light-mode website section: dense enterprise telemetry floating on soft chalk, anchored by a deep abyssal footer.
LAYOUT
Two-zone asymmetric structure. The upper zone features a 50/50 split between left-aligned headline/CTA copy and a right-aligned telemetry analytics preview card. Below, a full-bleed midnight band spans 100% width, housing brand metadata, a 4-column navigational taxonomy, and an email capture container.
PALETTE (use these exact hex values)
- #fafaf9 — Canvas Light: Background canvas for the upper hero and conversion area
- #ffffff — Card Surface: Telemetry preview card container and input pill background
- #071d28 — Footer Canvas: Dark anchor surface for footer navigation and newsletter subscription
- #0d7844 — Primary Emerald: Primary CTA button background, key headline text emphasis, and brand mark
- #5cd499 — Mint Accent: Live status indicator dots, active telemetry lines, and newsletter submit button
- #0c1116 — Charcoal Headings: Main headline text and high-contrast data values
- #525866 — Slate Neutral: Subtitles, trust micro-copy, chart axis labels, and metric captions
- #8ba1af — Footer Muted Link: Footer navigational links, copyright statement, and legal disclaimers
- #e5e7eb — Border Subtle: Hero card outline and metric grid borders
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 44px display. Tracking -0.025em for headings, 0 for body. The voice is authoritative, technical, and restrained. Set in clean neo-grotesque sans-serif with negative tracking on major titles, it conveys high-throughput engineering confidence without tech-startup hype. Inter or Geist Sans are ideal open-source equivalents.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is restrained and editorial. The light hero canvas relies on a single diffuse drop-shadow under the preview card (0 12px 36px -4px rgba(13, 30, 44, 0.07)) and delicate 1px borders. The footer uses zero elevation, functioning as a solid geological bedrock anchor.
IMAGERY
No photographic imagery is present. Visual interest is driven purely by structured product telemetry UI, precision line graphs, and SVG micro-icons (shield, lightning, terminal dots). Introducing lifestyle photography or 3D illustrations would corrupt the precise developer-tool aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone headline rhythm where the operational claim ('Ship better outputs.') sits in stark charcoal, immediately answered by the financial and performance payoff ('Spend less. Scale more.') rendered in bold emerald green.
MUST
- Keep the primary headline two-toned: charcoal for product promise, emerald green for business value.
- Use 16px radius on dashboard preview card while maintaining 8px radius on standard buttons and inputs.
- Ensure the footer contrast is strong using #071d28 backdrop with #8ba1af link text.
- Include live status dots (6px solid #10b981) beside live telemetry and availability widgets.
AVOID
- Never replace the emerald text accent with a generic blue or purple; green is the core token identity.
- Do not use dark backgrounds for the hero section; hero must stay on crisp #fafaf9 canvas.
- Never make footer column headers lowercase; use capitalized semantic labels.
- Do not add heavy dropshadows to the preview card; elevation must remain faint and diffuse.
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 中尝试 
