Design a light-mode website section: tactile parchment warmth meets maritime precision and deep midnight industrial structure.
LAYOUT
The viewport splits into two stark structural bands: a luminous 96px-padded hero on top and an expansive multi-column navigation footer below. The hero adopts an asymmetrical split with copy and CTAs stacked left (520px column) and a 16px-radius product preview card floating right. The footer distributes five structural link columns alongside an anchored newsletter subscription module, capped with a bottom legal bar.
PALETTE (use these exact hex values)
- #081424 — Midnight Abyss: Primary surface for the comprehensive footer section and deep contrast base.
- #F8F6F2 — Parchment Linen: Hero background canvas overlaid with fine paper grain and mountain photography.
- #FFFFFF — Card Pure White: Elevated dashboard preview panel and light-mode interactive components.
- #1D5DFF — Electric Cobalt: Focal action color for primary CTAs, active states, and headline emphasis.
- #0A111E — Industrial Obsidian: High-contrast text for hero headings and primary metric values.
- #5E6C84 — Slate Steel: Secondary copy, body text in the hero, and supporting labels.
- #8EA0B8 — Muted Sky: Footer navigation links, copyright text, and quiet legal disclaimers.
- #10B981 — Emerald Verified: Trust checkmarks, completed workflow step markers, and status indicators.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 48px display. Tracking -0.025em at display, +0.06em at uppercase. Plus Jakarta Sans conveys a sharp, engineered, yet modern software voice. The aggressive negative tracking at large scale (-0.03em) renders the primary display heading solid and dependable, while the 11px uppercase captions provide aviation-grade precision. If self-hosting, Inter or SF Pro Display offer direct drop-in technical parity.
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 created primarily through the elevated dashboard container, which uses an expansive, low-opacity drop shadow (0 20px 40px -15px rgba(10, 25, 45, 0.08)) against the tactile parchment hero. The footer deliberately rejects elevation layers, choosing planar, structural separation through hairline dividers (1px solid rgba(255, 255, 255, 0.08)).
IMAGERY
The hero integrates a muted, low-contrast photographic silhouette of ridged mountain terrain washed with warm linen undertones (#F8F6F2) and a delicate organic stipple texture. This grounds the industrial logistics subject matter in physical geography without distracting from the UI overlay. Modern vector icons inside the dashboard use crisp 1.5px stroke geometry.
SIGNATURE DETAIL — the thing that makes this design itself
The abrupt, architectural clash between tactile warm parchment (#F8F6F2) in the marketing tier and deep midnight navy (#081424) in the operational footer, bridged by a single punch of electric cobalt (#1D5DFF). Misusing it involves softening the boundary with a gradient or tinting the footer warm, which eliminates the industrial tension.
MUST
- Reserve #1D5DFF specifically for conversion anchors, interactive hovers, and focal brand moments.
- Maintain strict two-tone headline hierarchy where the concluding value clause shifts to electric blue.
- Use 11px uppercase tracking (+0.08em) for all organizational categorization labels.
- Pair rich dark footer (#081424) directly against parchment background without gradient transitions.
AVOID
- Do not use dark mode in the hero; the tactile warm parchment canvas is essential.
- Avoid pill-shaped roundings on CTA buttons; retain the disciplined 8px radius.
- Do not tint footer backgrounds warm; footer must remain strictly maritime cold midnight navy.
- Avoid noisy borders around dashboard cards; define boundary via subtle elevation shadows.
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 
