Design a light-mode website section: crisp white editorial marketing on the left anchoring a deep slate console demo floating in space.
LAYOUT
The section is structured as an asymmetrical two-column layout on a 1360px container with a 40/60 split. The left column hosts vertical marketing content: category eyebrow, heavy 3-line headline, explanatory paragraph, 3-up metric band, and paired primary/secondary CTAs. The right column holds an expansive 16:10 aspect ratio dark console frame partitioned into a sidebar, top control bar, interactive terminal, and telemetry grid.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary marketing background creating an airy, high-contrast base for copy
- #0B0F17 — Console Deep Slate: Deep navy-black base surface for the simulated product window
- #111827 — Console Card Surface: Elevated panels within the demo dashboard for data widgets and logs
- #1E293B — Border Subtle Slate: Subtle 1px perimeter divider separating dashboard panels and dropdowns
- #0F172A — Marketing Text Slate: Primary display heading color and dark CTA pill fill on the left
- #64748B — Marketing Text Muted: Secondary description copy and small metric captions
- #2563EB — Acceleration Blue: Key metric accent, run action button, and chart visualization glow
- #06B6D4 — Efficiency Cyan: Stat highlight for power savings and donut ring progress indicators
- #D946EF — Magenta Contrast: Comparison data lines, secondary stat highlights, and gradient fills
- #10B981 — Live Emerald: Pulsing live status dots and console success output indicators
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 24px subheading, 32px heading, 52px display. Tracking -0.03em at display, 0 at caption. The typographic tone is relentlessly technical and authoritative. Inter delivers clean, unpretentious clarity in bold marketing weights, while the developer console uses JetBrains Mono to project low-level hardware performance and engineering credibility. The tight negative tracking in the headline gives it weight and punch.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 6px, buttons 8px. Spacing on a 4px unit, 32px gaps, 80px between sections, 1340px container, comfortable density.
DEPTH
Depth is created using a single dramatic lift: the entire dark console interface casts a broad, soft shadow (0 25px 50px -12px rgba(11, 15, 23, 0.25)) onto the pure white canvas. Inside the console, depth is strictly flat, relying on 1px borders (#1E293B) and surface value steps (#0B0F17 to #111827) to separate planes without muddy shadows.
IMAGERY
No photographic imagery is present. The visual anchor is an authentic, high-fidelity mockup of a specialized developer GUI containing live code lines, sparklines, and telemetry donut charts. Any illustrative graphics or vector character art would dilute the technical rigor of this design.
SIGNATURE DETAIL — the thing that makes this design itself
The stark light-versus-dark split: a crisp, white, high-editorial marketing column paired directly alongside a glowing, highly intricate dark-mode hardware console mockup that floats with a soft drop shadow. Misusing this pattern by turning the whole page dark instantly ruins the clean, approachable developer-marketing balance.
MUST
- Keep the marketing canvas pure white (#FFFFFF) to let the dark console pop distinctly.
- Echo the dashboard's vivid neon data colors (blue, magenta, cyan) in the left marketing stats.
- Use a subtle 1px border (#1E293B) on dark console cards rather than heavy drop shadows inside.
- Set the main headline in Inter Bold with tight letter spacing (-0.035em) and crisp line heights.
AVOID
- Do not put the marketing copy on a dark background; the high-contrast split is intentional.
- Never use soft, blurred drop shadows on inner console widgets—rely solely on 1px borders.
- Avoid generic stock photography; the console itself is the sole hero visual illustration.
- Do not style the primary CTA as a gradient pill; use the solid terminal-styled dark block.
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 中尝试 
