Design a light-mode website section: airy modular bento grid pairing tactical micro-metrics with pastel-tinted utility pills and violet ai accents.
LAYOUT
The section is arranged with an asymmetrical two-row bento structure beneath a left-aligned hero header. The left column spans the full height of the section, showcasing a two-column internal layout of assistant specs and an SMS mockup. The remaining area divides into a 2x2 grid containing security, workflow, inbox cards, and a wide analytics summary module spanning two column widths at the bottom.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: dominant canvas background and base card surface
- #f8fafc — Slate Neutral: underlying page background and subtle structural contrast
- #6254ea — Primary Violet: headline ai emphasis, sent message bubbles, active spark icons, and trend lines
- #f3effe — Soft Violet Tint: pill badges, ai assistant chips, and primary icon backing surfaces
- #101828 — Ink 900: primary section headings, card titles, and bold metric values
- #667085 — Muted Slate 500: supporting card copy, timestamps, and chart axis labels
- #e5e7eb — Card Outline Border: subtle 1px boundary enclosing every bento card and phone frame
- #e0f2fe — Compliance Sky Blue: background surface for security and team icon badges
- #fee4e2 — Automation Coral: background surface for workflow trigger badges and workflow icons
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 36px display. Tracking -0.02em at headings, 0 at body. The typographic tone is authoritative yet approachable, driven by Inter's geometric precision and legible numerals. Tight letter spacing (-0.02em) on headings gives the layout an engineered modern feel, while regular weight 14px slate copy ensures conversational accessibility for deskless operations.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 12px, buttons 999px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is rendered flat-first with intentional low-contrast separation. Cards rely primarily on a crisp 1px neutral border (#e5e7eb) and an extremely diffuse 0px 4px 16px rgba(0, 0, 0, 0.03) shadow. Nested components such as phone chat bubbles use tonal fills rather than layering shadows.
IMAGERY
Visual imagery is entirely vector and product-representational, featuring a stylized smartphone UI chassis and vector line charts. The only decorative background is an ultra-fine, low-opacity guilloche wave motif in the AI Assistant card. Photographic imagery is strictly avoided in favor of crisp UI micro-demos.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of soft semantic pastel badge pills (#fee4e2, #e0f2fe, #f3effe) anchored against a dual-column hero bento card featuring a floating SMS phone simulation. Misusing it involves oversaturating the badge backgrounds or omitting the thin card bounding strokes, which collapses the delicate hierarchy into generic flat UI.
MUST
- Keep all card corner radiuses strictly synchronized at 20px.
- Pair every functional category with its semantic pastel background container.
- Highlight only the final operative words of display headings in primary violet (#6254ea).
- Maintain 20px gaps uniformly between horizontal and vertical bento grid columns.
AVOID
- Do not use saturated, high-contrast dark backgrounds for badge or icon tiles.
- Never apply heavy black drop shadows; keep elevation blur subtle and airy.
- Do not allow card content to stretch beyond a uniform 24px inner padding.
- Never mix serif typefaces into headers or metric readouts.
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 
