Design a light-mode website section: deep midnight cockpit framing crisp automated product telemetry against an airy editorial white canvas.
LAYOUT
Asymmetric two-column split layout across a 1360px container. The left 38% column houses marketing typography, four structured capability rows with tinted icon badges, and a footer trust bar. The right 62% column houses an integrated multi-panel application dashboard containing an internal sidebar, top-line metric cards, recent changes feed, priority opportunities, an AI activity console, and a live diff code window.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Background: Outer presentation background supporting editorial left-hand copy
- #090D16 — Cockpit Base: Primary surface for the dark UI dashboard application frame
- #0F1523 — Cockpit Card: Internal card containers inside the dark dashboard preview
- #1B2333 — Subtle Cockpit Border: 1px hairline borders dividing widgets, tables, and sidebar
- #3B82F6 — Accent Blue: Headline emphasis keyword, CTA buttons, and interactive icons
- #10B981 — Status Green: Positive delta metrics, live indicators, and added diff code lines
- #EF4444 — Diff Danger Red: Code removal diff background and strikethrough text
- #EC4899 — Eyebrow Pink: All-caps product demo badge typography on the light canvas
- #0F172A — Text Primary Dark: Headline and primary body text on the light canvas
- #F1F5F9 — Text Primary Light: Primary headers and high-contrast values inside the dark UI
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Display,Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 44px display. Tracking -0.03em at display, -0.01em at body, 0.05em at caps. The typography is pragmatic, sharp, and authoritative, evoking developer-tooling precision. Tight tracking on large display headings creates an assertive product voice, while the transition to monospace for terminal outputs grounds the value proposition in immediate engineering reality.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1360px container, tight density.
DEPTH
Depth is created purely through canvas contrast rather than standard blurred elevation. The dark software container casts an ultra-wide, soft ambient shadow (0 25px 50px -12px rgba(15, 23, 42, 0.25)) over the pure white backdrop, while interior cards within the cockpit rely strictly on 1px stroke borders without drop shadows.
IMAGERY
There are no lifestyle photographs or 3D character illustrations. The visual proof is entirely typographic, schematic, and data-dense, simulating an operating system cockpit through real HTML diffs, metric counts, and system telemetry feeds.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-canvas split featuring an ultra-dark developer cockpit embedded seamlessly against an editorial pure-white marketing column, highlighted by the royal blue keyword accent at the sentence terminal.
MUST
- Reserve vibrant royal blue (#2563EB) for the final punchline word of the hero headline.
- Enclose the entire software demonstration in a single unified dark slate shell (#090D16).
- Use 1px borders (#1B2333) with zero heavy inner drop shadows to delineate dashboard modules.
- Pair monospace 11px log lines directly alongside GUI metric cards to communicate developer credibility.
AVOID
- Never make the marketing background dark; the high-contrast dual-canvas split is fundamental.
- Avoid decorative gradients inside the dark dashboard widgets; keep fills flat and near-black.
- Do not use saturated primary red for UI borders; reserve red strictly for code diff removals.
- Do not increase headline tracking; tight letter spacing (-0.03em) is essential for this display tone.
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 中尝试 
