Design a light-mode website section: crisp split-world editorial marketing grounding a luminous, telemetry-dense operational dark cockpit.
LAYOUT
A disciplined two-column grid split roughly 40/60. The left column stacks category badge, three-part headline, paragraph, three feature rows, and dual CTA buttons. The right column showcases a framed software dashboard complete with left rail navigation, top status banner, 4-up metric row, multi-row progress lists, and a bottom integration tray.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary left-hand page background providing high readability for marketing copy
- #0D1527 — Console Deep Navy: Base surface of the right-hand dashboard application container
- #131E35 — Console Card Slate: Inner KPI cards, metric panels, and list containers inside the dashboard
- #4338CA — Indigo Brand: Headline punchline highlight, badge icons, and sidebar active states
- #0F172A — Obsidian Body: Primary headings and high-emphasis body text on light surfaces
- #64748B — Muted Slate: Descriptive paragraphs, inactive icons, and metadata timestamps
- #10B981 — Telemetry Emerald: Active system status indicators, positive delta tags, and healthy sparklines
- #1E2E4A — Console Border Stroke: Subtle perimeter outlines enclosing the console and internal metric cards
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 44px display. Tracking -0.03em at display, -0.01em at body. Authoritative, technical, and hyper-modern. The neo-grotesque type communicates industrial precision and software sophistication without stylistic indulgence. If Plus Jakarta Sans is unavailable, substitute with Inter or General Sans without losing the industrial SaaS cadence.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered flatly on the light side using whitespace and borderless surfaces, while the dark console simulates depth via tonal layering. The dark viewport floats above an ambient navy glow (#1E40AF blur 60px) bleeding subtly behind its bottom-right boundary, creating a physical screen presence.
IMAGERY
This interface rejects illustrative cartoons and stock photography entirely in favor of an authentic software interface. The dashboard UI acts as the hero image, showcasing precise vector graphs, SVG sparklines, and dense machine telemetry to convey technical readiness.
SIGNATURE DETAIL — the thing that makes this design itself
The three-phrase stacked headline concluding with an isolated brand indigo sentence, perfectly counterbalancing an ambient-backlit dark telemetry console window.
MUST
- Keep the left editorial column pure white to maintain stark visual separation against the dark UI.
- Highlight only the final third sentence of the main headline in #4338CA.
- Use 1px border strokes with low-opacity slate (#1E2E4A) to define dark card containers.
- Represent operational health exclusively through neon semantic tokens like emerald #10B981.
AVOID
- Do not invert the canvas into full dark mode; the contrast relies on the white-to-dark split.
- Never use drop shadows on light marketing elements; depth comes strictly from surface tone shifts.
- Avoid multi-color sparklines within the same metric block; keep each telemetry line monochromatic.
- Do not enlarge body copy beyond 16px in the marketing column.
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. Try in DraPub 
