Design a light-mode website section: crisp daylight marketing meets darkroom telemetric precision in high-contrast harmony.
LAYOUT
The section adopts a two-column desktop composition: the left column (approximately 45% width) holds the editorial messaging, a 2x2 micro-feature card grid, and dual CTA buttons. The right column (approximately 55% width) hosts the overflowing dark dashboard frame. Everything aligns on a strict horizontal baseline with balanced vertical gaps of 20px to 32px.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary light canvas background hosting editorial copy and feature cards.
- #0B0F19 — Dashboard Obsidian: Primary surface for the dark telemetry mock interface.
- #111827 — Dashboard Surface Raised: Background color for metric tiles, card modules, and active navigation items in dark console.
- #2563EB — Brand Blue: Headline emphasis accent, interactive icons, and glowing line chart plots.
- #0B0F17 — Text Primary Dark: High-contrast headings and primary call-to-action button surface.
- #64748B — Text Secondary: Body copy, supporting card descriptions, and inactive sidebar links.
- #10B981 — System Green: Status indicators, operational pills, positive metric deltas, and progress bars.
- #E2E8F0 — Border Subtle: Delicate boundary line for light feature cards and secondary action button.
- #1F2937 — Border Dark Subtle: Subtle separation borders within the dark dashboard tiles.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px subheading, 16px body-lg, 20px heading, 24px heading-lg, 44px display. Tracking -0.03em at display, 0 at body. The typographic tone is authoritative, highly technical, and modern, conveyed through clean neo-grotesque sans-serif letterforms. Headings utilize tight negative tracking to feel solid and engineered, while the dashboard type achieves maximum legibility in small numeric scales. Inter or Plus Jakarta Sans are ideal replacements.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1440px container, comfortable density.
DEPTH
Depth is created primarily through color contrast and soft containment rather than harsh shadows. The light feature cards use a whisper-light elevation (0 2px 8px rgba(0,0,0,0.04)) with 1px borders. The dark dashboard mock asserts physical presence via an ethereal blue back-glow (0 0 40px rgba(59,130,246,0.15)) and subtle 1px border delineation.
IMAGERY
There is no photographic imagery; the product is heroed entirely through a functional, high-fidelity dark UI mockup. Line charts are plotted with delicate 1.5px glowing paths, and iconography relies on clear geometric line art housed in tinted rounded-square plates. Illustrative fluff is strictly avoided in favor of actionable data graphics.
SIGNATURE DETAIL — the thing that makes this design itself
The defining characteristic is the strict 50/50 dualism: a light, editorial developer-marketing section on the left paired directly against a dense, glowing darkroom telemetry interface on the right. To execute it correctly, ensure the dark dashboard mock looks operational and functional, bordered with a faint neon atmospheric halo.
MUST
- Retain the sharp juxtaposition between the pure white marketing side and the dark obsidian dashboard preview.
- Use deep saturated blue (#2563EB) selectively on the headline's key phrase to create strong visual punctuation.
- Enclose the dark dashboard in a faint blue diffuse border glow to separate it from dark edges if needed.
- Maintain high density inside the dashboard mock while keeping generous white space across the marketing copy.
AVOID
- Do not invert the layout into a completely dark-themed page; the light-to-dark contrast is the core identity.
- Do not use heavy, dark drop shadows on the light feature cards; stick to subtle, airy elevation.
- Do not introduce multi-colored gradient headlines; use a solid brand blue (#2563EB) for selective phrase emphasis.
- Do not clutter feature cards with excessive text; limit descriptions to two lines at 12-14px.
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 中尝试 
