Design a light-mode website section: crisp dual-canvas saas where luminous daylight execution transitions into an authoritative deep-indigo command footer.
LAYOUT
The rhythm opens with a dual-column hero module inside a unified rounded daylight container, positioning sales copy on the left and a product telemetry dashboard on the right. Directly beneath the action buttons, a horizontal trio of trust markers reinforces legitimacy before transitioning into the page floor. The bottom zone expands into a 5-column dark footer: brand identity and social proofs on the far left, three structured link directories centrally, and a newsletter capture stack pinned on the right.
PALETTE (use these exact hex values)
- #080D1A — Midnight Base: Full-bleed footer surface creating structural visual weight and enterprise authority at page bottom.
- #FFFFFF — Card Daylight: Main canvas for the hero section, housing headline copy and the floating dashboard preview.
- #161F30 — Dashboard Slate: Dark surface for the floating product card preview, contrasting sharply against the white hero.
- #3B5BFE — Electric Cobalt: Primary conversion drivers, brand mark petals, inline text highlights, and newsletter submission button.
- #0D1424 — Ink Primary: High-contrast headings in daylight sections and dark icon glyphs.
- #5E6C84 — Muted Slate: Secondary hero descriptions and light-mode trust badge descriptors.
- #8A99AD — Footer Muted: Navigation link labels, copyright text, and legal links in the dark footer.
- #10B981 — Active Mint: Trust indicator padlocks, status badges, and integration health dots within the preview.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist Sans, Public Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 40px display. Tracking -0.02em on headings, -0.005em on body. The typographic tone is authoritative, analytical, and uncluttered. Using a modern neutral grotesque like Plus Jakarta Sans or Inter allows the quantitative figures (e.g. 2.4x, 342) and interface text to feel native to a professional marketing suite. The choice of medium weights over heavy black weights prevents the interface from feeling aggressive, leaning instead toward quiet competence.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through contrasting surface planes rather than diffuse drop shadows. The hero container floats as a flat white card over an off-white background, while the dashboard preview inside relies on a sharp #161F30 block. The dark footer intentionally eliminates elevation, relying on an architectural flat-slab plane.
IMAGERY
Visual interest is driven by functional UI data widgets, integration chips, and metric scoreboards rather than photography or abstract 3D art. Previews must show authentic product modules: campaign status dots, numerical lift deltas (+82%), and third-party SaaS badges. Any decorative, non-functional illustration would contradict the precision-tool aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-canvas split: an inviting daylight hero container nesting an authentic dark data preview, terminating abruptly into an all-navy command footer. It gives marketing buyers the approachability of a light theme while conveying developer-grade rigour through the dense dark dashboard and footer architecture.
MUST
- Retain the sharp visual cut between the white upper section and the #080D1A footer.
- Use Electric Cobalt (#3B5BFE) exclusively for high-intent links, hero keywords, and primary actions.
- Maintain 12px to 14px vertical item gaps in dark footer navigation groups.
- Pair security badges with subtle green (#10B981) or muted blue outlines for genuine enterprise trust.
AVOID
- Do not apply soft drop shadows or gradients to the dark footer surface.
- Never replace the high-contrast royal blue CTA with low-contrast muted slate fills.
- Do not place colored background tiles behind individual footer link columns.
- Avoid using uppercase styling on footer column header titles.
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 
