Design a light-mode web interface screen: precision enterprise logistics elevated through deep navy authority, crisp oceanic blues, and editorial display italics.
LAYOUT
The page opens with a commanding dark photographic hero framed by a top sticky navbar. The hero seam is deliberately broken by a 5-column service strip overlapping the light body background. The body alternates between centered 4-column trust pillars, an asymmetrical split media-and-metrics block, and an asymmetric 1/3-to-2/3 solution carousel with navigation triggers, terminating in a dark-banded newsletter bar and corporate 4-column footer.
PALETTE (use these exact hex values)
- #051329 — Midnight Navy: Dominant dark foundation for hero overlay, secondary action buttons, and full-width footer sections.
- #0D6EFD — Electric Blue: Primary interactive brand color for CTA buttons, active state cards, text links, and small accent underlines.
- #FFFFFF — Pure White: Primary surface for cards, body container backgrounds, light section panels, and reverse text.
- #F8FAFC — Slate Canvas: Subtle cool-tinted alternate surface for background contrast and container fills.
- #0F172A — Charcoal Text: Main high-contrast body and heading color on light surfaces.
- #64748B — Muted Slate: Supporting subheads, meta descriptions, unselected card details, and secondary UI metadata.
- #E2E8F0 — Soft Border: Delicate dividing lines, card outlines, and pill input borders.
- #10B981 — Success Emerald: Checkmark icon fills for trust and verification lists.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 24px subheading, 32px heading, 40px heading-lg, 56px display. Tracking -0.02em at display, 0 at body. The typographic tone is authoritative, corporate, and modern-editorial. Plus Jakarta Sans conveys operational efficiency and technological reliability, while the singular italic serif word in the hero headline ('around') injects a bespoke humanistic grace note. System substitution can reliably be achieved with Inter paired with Playfair Display italic.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled predominantly through crisp layering rather than heavy shadow stacks. Key floating panels use a soft, diffused ambient shadow (0px 12px 32px rgba(5, 19, 41, 0.08)), allowing cards to hover cleanly above light canvas backdrops. Photographic surfaces establish dramatic depth through darkened gradient overlays.
IMAGERY
Photography emphasizes modern, large-scale industrial infrastructure: towering shipping container terminals, sleek blue modern trucks, and dockyard cranes captured under bright overcast or cinematic twilight lighting. Imagery must always remain clean, operational, and technologically advanced—never gritty, dilapidated, or generic stock-business handshakes.
SIGNATURE DETAIL — the thing that makes this design itself
The signature maneuver is the floating 5-card service dock that bridges the seam between the deep navy hero photo and the stark white main body, featuring one highlighted electric blue active tab that visually anchors the entire page fold.
MUST
- Use the italic serif accent strictly for one key evocative word per page hero.
- Overlap the floating service card dock 50% across the hero-to-body transition seam.
- Maintain high contrast by keeping interactive links and primary actions in #0D6EFD.
- Enclose input groups in a unified 999px white pill container with nested button.
AVOID
- Do not use sharp 0px corners; maintain systematic 8px and 16px radii everywhere.
- Never replace the deep midnight navy (#051329) with desaturated pure neutral black (#000000).
- Do not apply heavy dark drop shadows to white content cards; keep them below 8% opacity.
- Avoid using the italic serif font on body copy, navigation, or data tables.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2112:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
