Design a light-mode web interface screen: industrial deep blue meets warm terracotta with structured card overlays grounded in commercial confidence.
LAYOUT
The page adheres to an assertive top-down hierarchical flow: full-bleed dark hero container with an integrated transparent navigation bar, followed immediately by the overhanging segmented feature card row. Below the fold, alternating content sections oscillate between 4-column icon feature rows, 50/50 image-and-text narrative storytelling, and a 3-column service photo card grid, terminating in an expansive stat banner and slate footer.
PALETTE (use these exact hex values)
- #0F1B2B — Navy Abyss: Dominant background for hero, footer, and highlighted feature card states.
- #FFFFFF — Pure White: Base canvas for service cards, content sections, and pure white text on dark surfaces.
- #F9F8F6 — Soft Warm White: Subtle low-contrast backgrounds for value bands and metrics banners.
- #C85A32 — Terracotta Orange: Primary CTA button fills, eyebrow micro-labels, and subtle accent lines.
- #1E293B — Charcoal Slate: Primary heading and body text on light backgrounds.
- #64748B — Muted Ash: Secondary descriptive body copy, subtext, and subtle inactive icon strokes.
- #E2E8F0 — Subtle Border Divider: Hairline vertical splitters between horizontally aligned service items.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Work Sans), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 34px heading, 56px display. Tracking -0.02em at display, 0.08em at micro uppercase. The typographic tone is robust, precise, and corporate, projecting reliable infrastructure rather than fleeting tech startup minimalism. The geometric sans-serif typeface functions with structural weight in display sizes and shifts to clear, readable humanist neutrality for long-form service descriptions. If Plus Jakarta Sans is unavailable, Inter or DM Sans should be utilized to sustain the same clean industrial balance.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created primarily through overlapping spatial geometry rather than heavy drop shadows. White card surfaces float above the dark hero image boundary using a subtle ambient shadow (0px 20px 40px rgba(15, 27, 43, 0.08)), giving physical tactility to the navigation deck. Secondary content surfaces remain almost completely flat, relying on soft background shifts to communicate layer hierarchy.
IMAGERY
Photography is grounded, cinematic, and industrial, featuring deep port cranes, cargo containers, modern commercial freighters, and professional logistics operations. Images maintain a cool architectural grade that harmonizes with the deep navy slate canvas, accented by the natural rust and orange of shipping containers.
SIGNATURE DETAIL — the thing that makes this design itself
The floating segmented service deck spanning the lower boundary of the dark hero into the white content area. One item is rendered in inverted navy with an inset arrow badge to communicate interactive discovery. It is commonly misused by cluttering each card with dense copy or using disparate card heights instead of a disciplined, uniform horizon.
MUST
- Position the five-card service deck overlapping precisely 50% across the hero baseline.
- Use terracotta #C85A32 strictly for micro-eyebrows, primary buttons, and textual hover links.
- Retain delicate 1px stroke weight on all iconography across both dark and light modes.
- Keep card inner padding generous (24px to 32px) to preserve executive corporate airiness.
AVOID
- Never saturate background panels with bright primary blues; rely on dark navy #0F1B2B instead.
- Avoid harsh heavy drop shadows; use diffuse multi-stop elevation (y: 12px, blur: 32px, alpha: 0.06).
- Do not use lowercase or sentence-case for the small terracotta section eyebrows.
- Avoid fully rounded 999px pills on rectangular CTA buttons; cap border-radius at 6px.
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 中尝试 
