Design a light-mode website section: crisp modern enterprise intelligence wrapped in airy white surfaces, soft violet gradients, and calibrated real-time agent metrics.
LAYOUT
The section follows a rigid top-down symmetrical hierarchy centered along the vertical axis. It begins with an eyebrow, headline, and centered summary paragraph occupying the top 35% of the frame. Below sits a balanced 5-column horizontal grid of capability cards with uniform heights. The composition concludes with a panoramic integration workflow card and a discrete horizontal compliance footer.
PALETTE (use these exact hex values)
- #f8fafc — Canvas Ground: Global outer canvas background behind all cards and structural blocks.
- #ffffff — Card Surface: Background for floating feature cards, architecture blocks, and pill containers.
- #09090b — Ink Primary: Primary headings, card titles, and high-emphasis textual elements.
- #64748b — Ink Muted: Secondary description copy, subheadings, labels, and compliance list text.
- #2563eb — Brand Blue: Eyebrow typography, start of the headline gradient, and active data node indicators.
- linear-gradient(90deg, #2563eb 0%, #9333ea 100%) — Brand Violet Gradient: Hero headline emphasis phrase and central agent workflow badge highlight.
- #faf5ff — Status Violet Tint: Background pill fill for stakeholder and executive metric summaries.
- #f0fdf4 — Status Green Tint: Background pill fill for successful progression and update tallies.
- #eff6ff — Status Blue Tint: Background pill fill for active pipeline signals and sequence counts.
- #e2e8f0 — Border Subtle: Delicate border outlines on integrations, pills, and card perimeters.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 18px heading, 44px display. Tracking -0.03em on headline, 0.08em on eyebrow. The typographic character is cool, authoritative, and frictionless, relying on an ultra-clean geometric neo-grotesque sans-serif. Tight letter spacing (-0.03em) on the bold 44px display headline projects contemporary speed and intelligence. The gradient color shift on the focal phrase provides an intentional visual cadence that transforms enterprise jargon into a memorable visual signature.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved through high-radiance white surfaces resting gently above an off-white background (#f8fafc). A multi-stop ambient shadow (0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 10px 24px -4px rgba(0, 0, 0, 0.04)) creates the illusion of floating panels without visible borders. Interactive and subordinate elements like pills and icon grounds rely on flat, tinted fills rather than additional elevation layers.
IMAGERY
Iconography consists of minimal, geometric vector line illustrations housed inside soft, tonal rounded square containers. No photographic imagery, avatars, or 3D renders are present, reinforcing a focused, infrastructure-grade developer-facing aesthetic. Third-party SaaS logos in the pipeline bar are displayed at exact 1:1 scale within rounded squares.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the horizontal 5-column array of pure white capability cards, each terminated by an ambient status pill displaying live micro-telemetry (e.g., '12 high-impact signals today'). Losing these live telemetry indicators would collapse the bespoke AI agent identity into a generic SaaS marketing grid.
MUST
- Keep card backgrounds pure #ffffff against the light #f8fafc ground to preserve subtle elevation.
- Restrict multi-color gradients exclusively to the second half of the main display title.
- Ensure each feature card ends with a distinct status pill anchored at the card bottom.
- Use exactly 16px corner radius on primary cards and architecture containers.
AVOID
- Do not apply dark mode surfaces; this system relies entirely on pristine white radiance.
- Do not apply heavy saturated borders around feature cards; keep them frameless or under 1px #f1f5f9.
- Do not center-align the internal text of the five feature cards; keep them left-aligned.
- Do not use solid high-contrast buttons in place of the delicate tinted telemetry pills.
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 
