Design a light-mode website section: crystalline enterprise light canvas with chromatic pastel tags and floating cards set over ambient radial mist.
LAYOUT
Vertical progression starting with a centered header block (eyebrow, two-line heading, two-line paragraph constrained to 640px). Below, a rigid 3-column, 2-row card grid with uniform 24px gaps houses six use cases. The sequence terminates with a single full-width horizontal pill banner tying all features back to the central value proposition.
PALETTE (use these exact hex values)
- #F8F9FE — Canvas Ground: ambient background fill with very subtle cool lavender tinting across the section perimeter
- #FFFFFF — Surface White: solid white surface used for all primary feature cards and the bottom summary bar
- #0F172A — Primary Text: high-contrast slate for main headlines, card titles, and primary emphasis callouts
- #64748B — Muted Body: neutral slate for section subheadings, card descriptions, and secondary metadata
- linear-gradient(90deg, #6366F1 0%, #EC4899 100%) — Brand Gradient: headline punch gradient applied across selected terminal words to draw immediate eye focus
- #6366F1 — Indigo Accent: eyebrow indicator, developer tool icon line, and active link chevron coloration
- #F97316 — Coral Accent: warm tint for platform and GTM icons and light pastel tag text
- #0EA5E9 — Sky Accent: cool tint for marketplace icons and metadata tag pills
- #EEF2FF — Indigo Soft Tint: icon badge background and tag pill surface for developer-focused cards
- #F1F5F9 — Card Separator: ultra-faint hairline dividing description text from the lower category tag row
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 44px heading-lg. Tracking -0.02em at headlines, +0.06em at uppercase labels. Inter provides neutral, highly legible programmatic precision suited for enterprise AI tooling. The tight -0.025em tracking on display titles gives modern compression without sacrificing clarity. Replacing with a serif or expressive display face would compromise the direct, reliable, infrastructure-first voice.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created strictly through diffuse ambient lighting rather than layered borders. Cards float above the #F8F9FE background with a subtle box-shadow (0 10px 30px -4px rgba(99, 102, 241, 0.05), 0 2px 8px -1px rgba(15, 23, 42, 0.04)). The bottom banner shares this soft elevation, grounding the section without heavy borders.
IMAGERY
Vector line icons (2px uniform stroke) encased in soft-tinted rounded square containers act as the sole graphical imagery. Visual interest stems purely from color modulation across the palette (violet, coral, cyan, blue). Photorealistic imagery or busy 3D renders would disrupt the clinical, high-clarity SaaS interface tone.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the chromatic triad pairing: assigning each white card a dedicated tonal color (indigo, coral, sky) represented symmetrically in the top-left icon badge and repeated across the bottom keyword pills.
MUST
- Render the primary headline's final phrase with an indigo-to-coral text clip gradient.
- Pair each card's icon badge tint with its bottom metadata tag palette.
- Use a generous 20px border radius on white feature cards for friendly soft geometry.
- Separate the card body from the tag footer using empty vertical whitespace or a hairline rule.
AVOID
- Do not use dark stroke borders around the feature cards; rely strictly on soft shadow.
- Never apply high-contrast dark backgrounds to the tag pills.
- Do not mix more than one accent color family within an individual feature card.
- Avoid harsh black drop shadows; keep elevation blur subtle and tinted with cool slate.
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 中尝试 
