Design a light-mode web interface screen: crisp corporate freight modernism grounded in cerulean accents, high-contrast photography, and clean modular cards.
LAYOUT
The page flows vertically in distinct semantic blocks: sticky utility header, cinematic photography hero with left-aligned typographic callouts, a 5-column service rail floating across the hero fold, a 2-column 'Why Choose Us' feature narrative paired with an office image card, an authoritative full-bleed dark obsidian section highlighting leadership, and finally a structured 4-column service breakdown grid. The rhythm shifts purposefully between light and dark sections to maintain momentum.
PALETTE (use these exact hex values)
- #ffffff — Canvas Pure White: Primary surface background for hero overlay, main cards, and light sections
- #0066ff — Cerulean Electric Blue: Primary call-to-action buttons, active card background, location pin accents, and icon tint
- #0b1b3d — Deep Obsidian Navy: Deep contrasting section background for corporate differentiation showcase
- #0f172a — Title Charcoal: High-contrast headings, main titles, and logo lettering
- #64748b — Steel Slate Muted: Descriptive body copy, metadata labels, and inactive chevron navigation
- #f1f5f9 — Card Border Frost: Delicate stroke on light cards, location box borders, and separators
- #ecfdf5 — Mint Emerald Tint: Soft circular icon background indicating network and efficiency status
- #fffbeb — Warm Amber Tint: Soft circular background for secondary feature badges and highlights
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700/800. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 44px display. Tracking -0.02em at headlines, +0.08em at uppercase captions. The typography relies on Plus Jakarta Sans (or Inter), projecting engineered efficiency, maritime structure, and corporate authority. The heavy display scale (700-800 weight) commands respect without aggressive industrial harshness, thanks to slightly rounded geometric terminals. For reproduction, Inter or DM Sans serve as ideal zero-cost open alternatives.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 6px, buttons 6px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created primarily through overlapping planes rather than deep drop shadows. White service cards sit halfway across the seam between the bright hero photograph and the pure white body canvas. Subtle, diffuse ambient shadows (0 12px 32px rgba(15, 23, 42, 0.06)) lift floating cards just enough to distinguish them against pale backgrounds without feeling floaty.
IMAGERY
Photography is high-contrast, natural-light architectural and industrial documentation: deep cobalt ocean containers, gantry cranes against sharp daylight skies, and candid executive team meetings in modern glass-walled offices. Stock must look editorial and documentary-grade. Avoid generic warehouse clip-art, heavy gradient vignettes, or cartoonish rendering.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the 5-item service card rail straddling the bottom edge of the hero photograph, where one single card in the sequence is inverted into solid electric cerulean (#0066ff) with white typography, while the others remain frosted white. It creates immediate visual hierarchy and signals interactive hover/focus states to the user. To preserve brand integrity, ensure only one card in the set holds this solid blue state at any time.
MUST
- Ground the top hero with high-end industrial logistics photography featuring rich blue sky and cranes.
- Use uppercase, widely tracked (+0.12em) 10-12px subheadings above major display typography.
- Anchor key category headings with a short 28px wide by 2.5px thick blue accent line underneath.
- Highlight precisely ONE card in a repetitive horizontal rail using the vibrant #0066ff solid background.
AVOID
- Never apply heavy, harsh black drop shadows; keep elevation at 0 10px 25px rgba(0,0,0,0.05).
- Avoid using saturated primary colors other than the signature electric blue (#0066ff).
- Do not use sharp 0px corners on interactive cards; strictly maintain the 12-16px radius curve.
- Never overcrowd the hero: maintain generous negative space so photography remains readable under copy.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1808:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
