Design a light-mode website section: crisp enterprise logistics engineered with deep pine green, soft mint surfaces, and precise terracotta punctuation.
LAYOUT
The grid uses a deliberate 2-column asymmetric split within a 1280px container. The left column (approximately 45% width) holds the contextual kicker, 48px display title, lead paragraph, 4-column metric grid, enterprise trust banner, and stack integrations. The right column (55% width) stacks five uniform 88px-tall capability cards separated by 12px vertical gaps. A horizontal bottom bar spans the base, housing a micro-value proposition and the primary CTA button.
PALETTE (use these exact hex values)
- #FAFBFC — Canvas Background: Main page surface providing subtle warmth behind cards
- #FFFFFF — Surface White: Background for stacked feature cards, chips, and containers
- #EFF7F3 — Mint Tint Surface: Background fill for the enterprise compliance card and subtle badges
- #094C47 — Pine Green Primary: Icon container backgrounds, primary CTA buttons, and high-impact stat figures
- #E06A3B — Terracotta Dot Accent: Used solely for section eyebrow marker and display headline full stop
- #0F172A — Text Primary: Headings, titles, metric numbers, and dominant card text
- #64748B — Text Muted: Card body copy, metric captions, and kicker text
- #E6EBE9 — Subtle Border: Outlines around white feature cards, stat dividers, and integration tiles
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px heading, 48px display. Tracking -0.03em at display, 0.05em at uppercase kickers. The typographic tone is authoritative, automated, and razor-sharp. Plus Jakarta Sans delivers clinical clarity in technical labels while its heavy weights provide industrial punch for headlines. Negative tracking on larger headings prevents the geometry from feeling overly playful, aligning perfectly with modern autonomous infrastructure.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created primarily through flat layer contrast rather than prominent elevation shadows. White card surfaces (#FFFFFF) sit cleanly on a slightly gray-tinted canvas (#FAFBFC) and are separated by precise 1px border lines (#E6EBE9). Very faint 2px blur ambient shadows are used solely to lift the feature cards off the page upon interaction.
IMAGERY
No photographic imagery is present; the visual weight is borne entirely by geometric iconography and crisp interface shapes. Icons utilize fine 1.5px to 2px white stroke weights centered within solid pine green rounded squircles. Introducing illustrative graphics or lifestyle photography would directly contradict the purposeful enterprise instrumentation tone.
SIGNATURE DETAIL — the thing that makes this design itself
The solitary terracotta punctuation mark (#E06A3B) concluding the deep charcoal display headline, mirroring the small terracotta indicator dot in the uppercase eyebrow kicker. This micro-accent breaks the clinical pine-and-mint palette with human intention; misuse occurs if this warm orange tone is expanded into buttons, borders, or large decorative shapes.
MUST
- Reserve terracotta (#E06A3B) strictly for the kicker indicator and the headline terminal period.
- Use 48x48px squircle containers in pine green (#094C47) with clean white stroke line icons.
- Keep card borders at hairline 1px (#E6EBE9) with zero or near-invisible spread shadows.
- Maintain high contrast by keeping right-column card backgrounds pure white against the off-white canvas.
AVOID
- Do not use terracotta as a button background or fill color anywhere.
- Never mix multiple primary saturated hues; stick entirely to deep pine green and mint accents.
- Do not drop the 16px card border radius down to sharp rectangular corners.
- Avoid heavy dark drop shadows that compromise the clean technical enterprise aesthetic.
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. 在 DraPub 中尝试 
