Design a dark-mode website section: deep navy twilight grounding precision enterprise saas with electric cobalt points of action.
LAYOUT
The page flows from a dual-column hero section into a clean four-column footer separated by a subtle 1px horizontal rule. The hero distributes value proposition copy and trust badges on the left, counterweighted by a prominent dark-mode SaaS interface mockup on the right. Below the divide, the footer dedicates the left third to branding, mission statement, and email capture, with the remaining two-thirds organized into structured navigation columns.
PALETTE (use these exact hex values)
- #0a0d14 — Canvas Background: deepest structural background layer across hero, body, and footer base
- #121722 — Panel Background: surface fill for dashboard mockups, nested cards, and input fields
- #1e2638 — Surface Border: subtle 1px boundary lines for panels, card containers, inputs, and section dividers
- #2f68fd — Electric Cobalt: key accent for primary CTA buttons, active radio dots, brand logo mark, and focal typography
- #34d399 — Success Emerald: positive delta percentages, step completion checks, and system health status
- #ffffff — Pure White: primary headlines, key data figures, and high-emphasis button labels
- #8f9ba8 — Muted Slate: secondary body paragraphs, footer link labels, table subheaders, and metadata
- #505c6e — Dim Slate: copyright notice, placeholder text, and inactive navigation iconography
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 48px display. Tracking -0.02em at display, 0 at body. The typographic tone is authoritative, restrained, and unmistakably technical. Inter provides surgical clarity across tiny 11px table labels and massive 48px display headlines alike. Its neutral geometric proportions eliminate distraction, positioning the software as an enterprise-grade utility rather than an experimental consumer tool.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is rendered purely through surface value shifts and razor-sharp 1px bounding strokes rather than raster drop shadows. Base canvas (#0a0d14) sits beneath elevated container cards (#121722), which house even lighter metric tiles (#171e2c). An ambient midnight blue radial light glow emanates softly behind the app preview to elevate it above the canvas floor.
IMAGERY
This design contains no photography or generic human illustration. Visual storytelling relies entirely on a crisp, hyper-detailed vector interface preview of the software workspace, complete with real tabular data, progress steppers, and KPI cards. Any consumer photography or saturated 3D art would instantly destroy the engineering-grade credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive blue-accented wordmark accompanied by three vertical pill bars, echoed directly in the high-contrast cobalt word in the headline ('Not your tabs.') and matched precisely by the primary CTA button. This specific shade of #2f68fd knits the company's brand identity directly into user reading and clicking actions.
MUST
- Use pure white (#ffffff) exclusively for focal headings, main metrics, and high-priority CTA labels.
- Maintain high dark-mode contrast by reserving electric cobalt (#2f68fd) for active states and critical interactions.
- Frame complex UI mockups and input fields with thin 1px borders (#1e2638) instead of drop shadows.
- Pair muted slate body copy (#8f9ba8) with strict 1.5 line height for maximum legibility on deep navy backgrounds.
AVOID
- Do not use heavy multi-stop drop shadows or harsh white borders anywhere in the interface.
- Avoid solid bright colored backgrounds for secondary buttons or badges; keep them ghost or transparent.
- Never use pure black (#000000) for the canvas; the identity relies on deeply saturated dark navy-slate.
- Do not set footer link text to full white; white is reserved exclusively for footer column headers.
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 
