Design a light-mode website section: crystalline supply chains rendered through translucent telemetry and precision vermilion accents.
LAYOUT
The hero uses an asymmetric split-screen layout anchored by a rigid 1360px container. The left 42% contains the value proposition stack: brand header, tight display title with colored punchline, explanatory copy, side-by-side action buttons, and an anchored live SLA metric. The right 58% opens completely into an uncontained isometric 3D canvas that bleeds gracefully across the viewport.
PALETTE (use these exact hex values)
- #FBF9F6 — Canvas Warm Alabaster: Global background providing subtle warm tone beneath crisp white glass overlays
- #FFFFFF — Frosted Card Surface: Semi-transparent backdrop (60-80% opacity) for floating data pills and telemetry widgets
- #B83A32 — Cinematic Cinnabar: Primary conversion CTA fill, headline emphasis on 'deliver.', and active route glow
- #191A1D — Ink Charcoal: Display headlines, logo typography, and primary numerical readouts
- #595B62 — Slate Muted: Body paragraph, unselected navigation links, and subheadings
- #8A8D95 — Subtle Caption Gray: Micro-labels, timestamps, and metric auxiliary descriptions
- #3BB368 — Telemetry Emerald: Live status indicator dots and positive percentage variance pills
- #5096F2 — Glow Azure: Waterway and rail route light traces in the 3D isometric plane
TYPOGRAPHY
Typeface Inter Display (or SF Pro Display, Geist, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 32px heading, 56px display. Tracking -0.03em at display, -0.01em at body, +0.06em at micro-caps. The typographic tone is ultra-engineered, pragmatic, and authoritative, evoking automated German logistics and high-velocity Silicon Valley platforms. Inter Display provides clean geometric apertures, crisp horizontal terminals, and tightly tracked figures suited for financial and temporal dashboards. Free alternatives like SF Pro or Geist Sans perfectly preserve this algorithmic crispness.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through layered physics rather than heavy drop shadows: a warm base plate sits beneath an illuminated 3D relief of glass tracks and physical freight carriers. Floating UI cards cast very soft, diffuse ambient occlusions (rgba(0, 20, 40, 0.06) with 30px blur and 10px y-offset) while light refractions along frosted edges imply real volumetric thickness.
IMAGERY
Hero visual is a bespoke isometric diorama composed of frosted acrylic, polished glass tracks, and translucent architectural blocks. Stylized scale models of semi-trucks, container ships, and freight trains navigate luminous neon-lit conduit tracks. Photorealistic or flat vector illustrations would break the high-tech industrial aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious synthesis of a clinical, frosted isometric 3D supply chain playground with high-precision telemetry HUD cards floating directly inside the virtual perspective plane. The hallmark interaction is the luminous cinnabar path (#B83A32) leading directly from the truck model to mirror the crimson accent in the headline 'deliver.'. Misusing this signature involves detaching HUD cards from the isometric grid or using opaque white backgrounds.
MUST
- Keep typography predominantly dark charcoal against light, warm alabaster surfaces.
- Use the cinnabar red (#B83A32) selectively for the final word in the headline and primary CTAs.
- Render data visualization overlays with thin 1px semi-transparent borders and 16-24px backdrop blur.
- Align all metric tags to the isometric perspective angles of the underlying transit visualization.
AVOID
- Do not use harsh pure black (#000000) for text; rely on calibrated ink charcoal (#191A1D).
- Do not saturate secondary buttons; maintain delicate 1px neutral borders and transparent fill.
- Never replace the frosted glass card treatment with completely opaque flat cards.
- Avoid generic stock photos of trucks; visuals must remain stylized, precision-engineered translucent 3D models.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
