Design a light-mode website section: pastel bento grid with hyper-detailed product telemetry on a warm cream canvas.
LAYOUT
Centered hero headline and paragraph sit directly atop an asymmetrical multi-column bento grid. The grid is organized in three primary vertical columns: left contains compact search and stat widgets, the center contains a full-bleed app dashboard and bottom collab widget, and the right contains workflow steppers, integrations, and analytics tiles.
PALETTE (use these exact hex values)
- #FCFAF6 — Warm Canvas: Global backdrop behind all bento modules and header copy
- #FFFFFF — Card Surface: Base interior fill for all bento cards and dashboard panels
- #1C75FD — Electric Blue: Primary metric highlights, sparklines, pill badge text, and library chip icon
- #E94A3F — Coral Sunset: Automations widget header icon chip and secondary line chart strokes
- #128A58 — Emerald Growth: Search chip, team collaboration widget icon chip, and positive delta values
- #F49F1C — Golden Amber: Real-time alerts bell chip icon and status alert warnings
- #6C5CE7 — Violet Analytics: Insights card chip icon, integrations badge chip, and analytic sparkline trends
- #181B20 — Primary Text: Headline display copy, card titles, and high-priority stat values
- #6B7280 — Muted Text: Subtitle paragraphs, micro copy, table headers, and timestamp labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Text), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px subheading, 18px heading, 24px heading-lg, 40px display. Tracking -0.02em at display, 0.01em at caption. Modern, metric-driven, and highly utilitarian. The font (Inter or equivalent) operates as an invisible, authoritative vehicle for high-density SaaS data, shifting effortlessly from massive 40px numerical callouts down to 10px graph axis markers without degrading clarity. Free alternatives like Inter or Plus Jakarta Sans are exact replacements.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, tight density.
DEPTH
Depth is flattened and structural rather than simulated with lighting. Cards rest directly on the warm #FCFAF6 ground, differentiated solely by their pure white (#FFFFFF) fills and delicate 1px perimeter outlines. No heavy diffuse drop shadows or multi-stage blurs are used.
IMAGERY
Contains zero photographic human lifestyle images. Imagery is entirely functional, consisting of micro UI previews, realistic thumbnail strips for indexed video items (rounded 4px with timestamp tags), and SVG telemetry graphs.
SIGNATURE DETAIL — the thing that makes this design itself
Vibrant saturated squircle icon chips paired with faintly hue-matched card borders on a warm cream canvas. Recreate it by tinting each white bento card's 1px border with the specific 10% opacity hue of its top-left 40px solid icon badge. Avoid using flat neutral gray borders on all cards, which destroys the playful categorical zoning.
MUST
- Ground the entire grid on an unbleached warm cream canvas (#FCFAF6) rather than pure white.
- Give each bento card a dedicated, solid-color 40px squircle icon chip in its header.
- Subtly tint card borders to match the category icon chip at 10-15% saturation.
- Display dense product metrics with high typographic contrast between 40px figures and 11px labels.
AVOID
- Never use dark dropshadows; tiles should rely on border strokes and white fills.
- Do not use generic gray outline icons in headers; always use white icons inside saturated squircles.
- Avoid harsh cold gray backgrounds; the background must stay warmly cream.
- Do not let bento cards span arbitrary, misaligned row heights.
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 
