Design a light-mode website section: clean enterprise clarity anchoring industrial automation with quiet borders and tactile photo splits.
LAYOUT
The section adopts a 3-column asymmetrical bento grid. The top-left cell acts as the anchor header block, followed by two split feature cards filling out the top row. The second row displays three consecutive split feature cards. The bottom anchors the layout with a full-width horizontally distributed metrics bar.
PALETTE (use these exact hex values)
- #FAFAFA — Canvas Background: Global page background providing light contrast beneath pure white cards
- #FFFFFF — Card Surface: Base surface for all interactive bento cards and summary banners
- #E5E7EB — Border Subtle: 1px structural outline around cards, dividing lines, and icon boxes
- #111827 — Text Primary: Headings, primary stat metrics, and card titles
- #6B7280 — Text Secondary: Body copy, feature descriptions, and stat label subtitles
- #4F46E5 — Indigo Brand: Primary brand accent used for category badge text, card icons, and text links
- #EEF2FF — Indigo Soft: Background fill for category pill badges and feature icon boxes
- #16A34A — Metric Green: Accent icon color in the bottom metrics ribbon highlighting performance gains
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 24px heading, 38px display. Tracking -0.02em at display, 0 at body, 0.05em at badge. Inter provides an unpretentious, high-clarity voice that mirrors modern industrial engineering. It handles dense mechanical terminology gracefully at small scales while remaining authoritative at 38px. Free open alternatives include Geist Sans or standard system sans-serif stacks.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is communicated almost exclusively through 1px border outlines (#E5E7EB) separating white surfaces from the #FAFAFA canvas. Faint ambient diffusion (0 2px 8px rgba(0,0,0,0.03)) is used sparingly underneath the main stats bar. No harsh directional drops or floating layers are permitted.
IMAGERY
Photography depicts actual robotic automation hardware in authentic warehouse and distribution centers. Imagery features direct documentary lighting, natural concrete floors, realistic industrial bins (blue, grey), and cardboard parcels. Stylized, AI-generated, or abstract vector illustrations are strictly excluded.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal split-card anatomy: the left half houses a structured micro-hierarchy (icon badge, title, concise copy, and arrow link) while the right half is occupied flush by crisp, documentary-style industrial photography sharing the card's 16px outer corner curvature.
MUST
- Keep photographic aspect ratios uniform across all split feature cards.
- Use exactly 1px solid #E5E7EB borders for surface definition rather than prominent drop shadows.
- Maintain high-contrast industrial authenticity in photographic assets with real warehouse backgrounds.
- Align the bottom baseline of textual descriptions across adjacent horizontal grid items.
AVOID
- Do not add inner padding between the card image and its right/top/bottom perimeter borders.
- Avoid conceptual 3D renders or illustrations; only use authentic robotic photography.
- Do not use dark or colored backgrounds for the main section canvas.
- Avoid heavy multi-color icons; limit to single-tone indigo glyphs on soft fills.
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. Try in DraPub 
