Design a dark-mode website section: executive split-canvas pairing high-contrast midnight cta with an immaculate porcelain enterprise footer.
LAYOUT
The section adopts a two-part split architecture. Top: asymmetric two-column conversion hero spanning 1280px, left column dedicated to editorial copy and dual CTAs, right column hosting the floating UI mockup. Bottom: full-width white surface with a 6-column grid footer hosting brand bio, 4 link categories, and a newsletter sign-up, terminating in a bottom legal strip.
PALETTE (use these exact hex values)
- #0D131A — Midnight Charcoal Canvas: Deep navy-charcoal background for the conversion hero section.
- #FBFBFC — Pure White Footer Canvas: Pristine white base surface for the structured footer links and newsletter block.
- #E24A3B — Terracotta Coral: Primary conversion button fills, brand icon, and interactive highlights.
- #FFFFFF — Dashboard Canvas: Crisp white surface for the floating operational preview mock-up.
- #F3F5F7 — Editorial White Text: Primary headline and accent copy against dark midnight surfaces.
- #9BA3AF — Slate Muted Gray: Body descriptions, secondary trust marks, and footer metadata copy.
- #111827 — Charcoal Footer Text: Brand title, newsletter heading, and dark accents in footer.
- #1E293B — Dark Surface Border: Subtle hairline borders on secondary dark buttons and badges.
- #E5E7EB — Light Border Divider: Hairline vertical divider lines and input borders in footer.
TYPOGRAPHY
Typeface Newsreader (or Source Serif Pro,Freight Text,Lora), weights 400. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 16px subheading, 20px heading, 44px display. Tracking -0.02em. The voice balances institutional enterprise authority with agile SaaS precision. The display serif projects legacy, trust, and executive gravitas, while the clean Inter sans-serif provides frictionless clarity for navigation and financial metrics. Substitution can safely use Newsreader paired with Inter or Geist.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled strictly through context: the top midnight section feels recessed and infinite, while the floating dashboard mockup uses an expansive 0px 20px 40px rgba(0,0,0,0.3) drop shadow to hover physically over the canvas. The footer below is completely planar and flat, relying entirely on 1px borders and whitespace for hierarchy.
IMAGERY
No photographic imagery is present; the visual authority is derived entirely from the vector dashboard preview UI mockup. Any prospective imagery must be crisp, technical application screenshots or architectural UI vector diagrams, avoiding generic stock photos of corporate workers.
SIGNATURE DETAIL — the thing that makes this design itself
The stark transition from an atmospheric dark executive hero directly into a crisp, high-density light directory footer. It communicates high-level executive pitch at the top and immediate operational utility at the bottom. Misusing it involves softening the boundary with gradients or cluttering the light footer with dark cards.
MUST
- Pair the editorial serif display headline with a disciplined sans-serif interface.
- Restrict the coral accent (#E24A3B) strictly to forward-moving interactive elements.
- Maintain high contrast between the upper midnight canvas and lower light footer.
- Use subtle hairline dividers (#1E293B dark, #E5E7EB light) to structure links.
AVOID
- Never use serif typography in the footer navigation or dashboard metrics.
- Avoid applying gradient fills to the primary coral CTA buttons.
- Do not merge the dark hero and light footer with a fuzzy gradient transition.
- Never increase button border-radius to a full pill shape.
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 
