Design a light-mode website section: bipartite architectural interface pairing high-key telemetry preview with deep midnight administrative infrastructure.
LAYOUT
The vertical composition is divided into two distinct geological tiers: a light high-key conversion deck on top and a monolithic midnight footer below. In the upper half, an asymmetrical two-column lockup pits bold editorial headlines on the left against a dense floating dashboard preview on the right. Below, the dark footer branches into a left-aligned brand summary, four compact vertical link columns, and a dedicated newsletter capture zone on the far right.
PALETTE (use these exact hex values)
- #0B111E — Midnight Slate: Foundational background canvas for the entire lower navigational footer and legal block
- #F8FAFC — Luminous Off-White: Atmospheric light canvas backing the top CTA and preview workspace
- #FFFFFF — Pure Elevated White: Floating insight card surface and high-contrast primary typography in dark regions
- #2563EB — Cobalt Blue: Primary action buttons, active indicator values, and uppercase section eyebrow accents
- #60A5FA — Cerulean Glow: Footer category titles, domain branding accents, and delicate backdrop radiance
- #0F172A — Deep Onyx Text: High-contrast display headlines and numerical table labels on light surfaces
- #64748B — Slate Body: Subheading explanations and secondary table column indicators
- #94A3B8 — Muted Silver: Footer navigation links, descriptive text, and legal copyright copy
- #1E293B — Midnight Border: Structural divider lines, input borders, and social icon containers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px heading, 48px display. Tracking -0.02em at display, 0.05em at uppercase labels. The typographic persona is authoritative, analytical, and uncompromisingly modern. A neutral neo-grotesque sans-serif provides technical credibility in numerical breakdowns while exerting solid industrial weight in the 48px display headline. Inter or Plus Jakarta Sans capture this construction-tech character perfectly without needing costly proprietary licensing.
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 through stark structural contrast rather than heavy drop shadows. The top analytics card floats subtly via a double-layer drop shadow (0 10px 25px -5px rgba(0,0,0,0.06), 0 8px 10px -6px rgba(0,0,0,0.03)) paired with an ultra-crisp 1px outline. The footer abandons shadows entirely, relying on rich nocturnal value hierarchy (#0B111E to #111C2E) to separate interactive surfaces.
IMAGERY
Abstract mathematical coordinate art replaces stock photography. In the CTA background, gossamer blue topological traces and micro-dot meshes create an impression of precision engineering and geospatial calculation. Real photographic assets would disrupt the analytical clarity; vector diagrams and structured software mockups are mandatory.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the stark light-to-midnight split-horizon canvas, where an ethereal light dashboard CTA sits directly flush against an ultra-dark infrastructure footer. To execute it correctly, anchor the light section with glowing topological wireframes and the dark section with vivid cerulean category headers; never compromise the transition with soft muddy gradients.
MUST
- Retain sharp contrast between the bright upper workspace and the pitch-dark navigation foundation.
- Use uppercase tracking of 0.08em exclusively on 11px kicker headings and category labels.
- Apply 16px radius strictly to software preview cards while keeping buttons at 8px.
- Use tabular lining numerals inside financial breakdown matrices for strict vertical alignment.
AVOID
- Never blur the boundary between the light and dark canvases with a harsh centered gradient.
- Do not use dark grey borders on the light dashboard card; stick to #E2E8F0.
- Never set footer navigation headings in standard sentence case or subdued grey.
- Avoid pill-shaped round buttons in this layout; keep rectangular bounds at 8px radius.
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 
