Design a light-mode website section: bipolar high-contrast transition from daylight engineering clarity into deep obsidian infrastructure control.
LAYOUT
The page flows from an asymmetric split hero into a comprehensive multi-column footer ledger. The top section gives roughly 60% width to the left-aligned narrative pitch and paired CTAs, while the right 40% houses a vertically stacked set of 4 key metrics. Directly below, a full-bleed midnight footer breaks into an identity/newsletter column on the left and 4 balanced navigational columns, anchored by a terminal legal and SOC-2 trust bar.
PALETTE (use these exact hex values)
- #FAFBFC — Canvas Daylight: Background canvas for the upper conversion section and metric proof blocks.
- #080C14 — Canvas Obsidian: Dense structural container for the entire site directory and compliance bar.
- #2152FF — Cobalt Electric: Primary interactive button fill, uppercase eyebrow text, and metric stat headlines.
- #0B0F17 — Ink Navy: High-contrast display headlines and body text on the light canvas.
- #525D73 — Muted Slate: Supporting paragraph descriptions and metric sub-labels on light canvas.
- #FFFFFF — Pure White: Footer column headers, brand wordmark, and primary button labels.
- #94A3B8 — Faded Silver: Footer navigation links, legal copyright text, and trust badge annotations.
- #E5E7EB — Divider Subtle: Hairline rule separating individual metric rows in the light panel.
- #0F1626 — Dark Trench: Embedded background fill for dark mode email input field.
- #1E2638 — Divider Dark: Horizontal hairline separating footer directory from the bottom compliance row.
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 16px subheading, 28px heading, 44px display. Tracking -0.02em at display, 0.08em at eyebrow. The typographic tone is authoritative, spare, and uncompromisingly efficient. Inter delivers cold technical precision that mirrors enterprise code execution, using heavy optical display tracking (-0.03em) to convey institutional weight without feeling decorative.
GEOMETRY & SPACING
Corner radii — cards 0px, links 2px, inputs 6px, buttons 8px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Elevation is purely flat and planar. No drop shadows, floating layers, or skeuomorphic bevels are used; depth is achieved exclusively through the hard chromatic contrast between #FAFBFC daylight and #080C14 obsidian.
IMAGERY
The only graphic presence is a pale, ultra-faint technical dot-matrix blueprint watermark in the top-right quadrant suggesting automated architectural precision. Photography or cartoonish 3D enterprise illustrations would completely break the clinical rigor.
SIGNATURE DETAIL — the thing that makes this design itself
The stark compositional division between the left conversational value-prop and the right-aligned, hairline-separated numeric stack (10x, 70%+, 100s, Zero) executed in electric cobalt. It is commonly misused by turning the metrics into floating cards with drop shadows, destroying its restrained architectural ledger feel.
MUST
- Retain the strict 60/40 horizontal grid balance between narrative headline copy and stacked metric items.
- Use uppercase 12px Cobalt Electric typography strictly for category eyebrows and tracked tags.
- Separate metric data points with delicate 1px #E5E7EB borders spanning the metric block width.
- Keep footer column headers in crisp white 600 weight with secondary links in #94A3B8.
AVOID
- Never add drop shadows or ambient blurs beneath primary CTA buttons or input fields.
- Do not round card containers or section corners; all structural bounds must terminate at 0px.
- Never replace the electric cobalt metric figures with standard black or grey type.
- Avoid centering the main headline copy; keep the primary CTA narrative strictly left-aligned.
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 中尝试 
