Design a light-mode website section: tactile industrial precision softened by calm editorial serif typography and pastel isometric vignettes.
LAYOUT
A 2-part header splits the viewport with the serif headline and deck copy occupying the left 60% and a self-contained 3-metric proof card occupying the right 40%. Below, a 5-column flex/grid array hosts evenly sized vertical feature cards across a 1280px maximum container. The composition is grounded by a full-span horizontal ribbon containing reassurance copy and a primary action button.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Dominant background surface across the entire page layout and card interiors
- #eaecf0 — Card Outline Gray: Subtle 1px perimeter outlines on feature cards, metric modules, and bottom banner
- #111827 — Charcoal Slate: Display headlines, card titles, stat digits, and primary emphasis text
- #64748b — Muted Slate: Body copy, feature descriptions, list labels, and metric captions
- #1d4ed8 — Cobalt Primary: Eyebrow badge text, active category highlights, and high-contrast CTA button fill
- #ede9fe — Iris Lavender: Background fill for retail and device metric squircle badges
- #dcfce7 — Mint Emerald: Background fill for uptime metrics and logistics indicator badges
- #e0f2fe — Sky Ice: Background fill for support and field operation icon containers
TYPOGRAPHY
Typeface Newsreader (or Playfair Display, Source Serif 4, Georgia), weights 400/500. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 17px subheading, 24px heading, 44px display. Tracking -0.015em. The typography balances humanistic intellectual authority with robotic hardware precision. The bracketed editorial serif (Newsreader/Playfair match) conveys trust, longevity, and serious research, while neutral Inter keeps dense technical features frictionless and legible. If substituting, choose high-contrast traditional text serifs rather than decorative display serifs.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Elevation is rendered flat and graphic through crisp 1px borders (#eaecf0) rather than layered CSS box-shadows. The only sense of z-space originates inside the bottom vignettes, where isometric models project soft, diffused radial color shadows directly onto the white ground.
IMAGERY
Imagery consists exclusively of clean, clay-like 3D isometric renders of the square hardware unit paired with contextual monochrome accessories (chat bubble, bag, hardhat, parcel, shield). All assets share a uniform top-left light source, minimal specular reflections, and soft monochromatic ambient occlusion.
SIGNATURE DETAIL — the thing that makes this design itself
The rhythmic five-card deck where each column acts as an isolated micro-system: a pastel utility icon at the peak, crisp technical bullets in the center, and a bespoke isometric hardware vignette grounding the bottom.
MUST
- Retain the sharp contrast between an expressive editorial serif title and minimalist neo-grotesque sans UI.
- Enforce a uniform 16px border-radius and 1px #eaecf0 border across all cards.
- Assign a consistent pastel colorway to each card that coordinates the top icon squircle, list checks, and base 3D illustration.
- Ensure all isometric illustrations maintain matching camera angles, lighting direction, and ground plane shadows.
AVOID
- Do not use dark or colored backgrounds for the cards; keep the canvas and card backgrounds strictly white.
- Do not use heavy drop shadows; depth is strictly outlined with delicate 1px borders.
- Never substitute the editorial serif headline with a bold sans-serif or industrial display face.
- Do not mix photographic imagery with the isometric vector 3D models.
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 中尝试 
