Design a light-mode website section: crisp freight intelligence balancing clean pastel operational badges with dense typographic telemetry on an airy porcelain canvas.
LAYOUT
The layout is divided into three vertically stacked rhythmic zones within a 1200px max-width container. Zone one features an asymmetrical 60/40 header: headline and value proposition on the left, a 4-column metric stat cluster on the right. Zone two is a 3x2 grid of uniform feature cards separated by a 20px gap. Zone three closes the module with a unified full-width horizontal banner pairing narrative clarification with a trailing primary CTA.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary screen canvas and solid card background surface.
- radial-gradient(ellipse at 85% 15%, rgba(219, 234, 254, 0.45) 0%, rgba(255, 255, 255, 0) 70%) — Atmospheric Glow: Top-right subtle luminous haze adding soft dimension behind the stat cluster.
- #0a1128 — Ink Navy: Used for primary headlines, stat figures, and card titles.
- #4b5563 — Muted Slate: Secondary copy, feature card descriptions, and operational subtext.
- #94a3b8 — Caption Gray: Third-level metadata, stat footnotes, and micro-labels.
- #1363df — Precision Blue: Main CTA buttons, emphasized inline copy, and primary action signifiers.
- #e2e8f0 — Subtle Border: 1px container outlines for cards, tag pills, and horizontal banners.
- #eff6ff — Tint Cerulean: Background for dispatch and yard operations badges and tag pills.
- #ecfdf5 — Tint Emerald: Background for live rescheduling and equipment badges and tags.
- #fffbeb — Tint Amber: Background for insights badges, performance stars, and telemetry tags.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 24px heading, 40px display. Tracking -0.03em at display, -0.01em at body, 0.05em at caps. The typographic personality is authoritative, systematic, and crisp, evoking precision logistics and industrial discipline. Plus Jakarta Sans provides contemporary neo-grotesque stability with subtly rounded stroke terminals that mitigate sterility while maintaining exceptional scannability. Tight tracking (-0.035em) on display sizes delivers punchy headline compactness, while neutral Inter or General Sans can be deployed as drop-in alternatives without visual compromise.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled with extreme restraint to favor editorial precision over tactile layering. Cards utilize a 1px solid perimeter (#e2e8f0) backed by an ultra-diffuse ambient drop shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.04). Flatness dominates, ensuring operational telemetry and badge colors retain optical precedence without cognitive clutter.
IMAGERY
This design strictly eschews photographic or illustrative graphics in favor of clean, monochrome line-icon glyphs set within tinted pastel geometric holders. Icons are 20px vector paths centered inside 44px soft-cornered squircles. Any photographic imagery or complex multi-colored 3D illustrations would break the clinical, high-speed SaaS dispatch aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the category-coordinated squircle-and-tag system: each feature card is keyed to a dedicated pastel hue that decorates both the top icon holder and the bottom cluster of micro-pills. It visually categorizes complex freight operations at a glance. Misusing it by introducing random mismatched badge colors per card ruins the systematic, calm directory impression.
MUST
- Tint icon squircle containers and footer tag pills to match the exact same category accent color.
- Keep card stroke borders at 1px using neutral #e2e8f0 to preserve light visual hierarchy.
- Emphasize critical sentence conclusions in paragraphs using bold weight and primary blue (#1363df).
- Maintain high contrast between headline #0a1128 and secondary body copy #4b5563.
AVOID
- Do not introduce dark saturated backgrounds for cards; keep all card fills purely white (#ffffff).
- Never use generic grey icons; every icon must use an intentional pastel-tinted container.
- Do not make pill tags circular; use a tight 6px to 8px corner radius.
- Avoid heavy drop shadows; cards rely primarily on clean 1px borders for structural delineation.
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 中尝试 
