Design a light-mode website section: precise systems engineering softened by airy lavender geometry, floating white cards, and an anchoring dark ribbon.
LAYOUT
The top half follows an asymmetric split: a 40% width hero column on the left (eyebrow, title, narrative, micro-metrics, dual CTAs) sits opposite a 60% width 3x2 feature grid. Cards are evenly spaced with a 24px gap. The entire section is spanned below by a full-width dark anchor bar split into a 40% headline lockup and three 20% micro-columns.
PALETTE (use these exact hex values)
- #FAF9FC — Ambient Canvas: Main canvas background with soft imperceptible radial warmth in the corners
- #FFFFFF — Card Surface: Pure white background for floating feature cards and stat chips
- #0B0F19 — Monolith Dark: High-contrast dark anchor bar across the bottom of the section
- #6366F1 — Primary Indigo: Eyebrow tag text, headline highlight accent, and icon tint base
- #0F172A — Obsidian Text: Primary heading typography and primary button background
- #596375 — Slate Text: Secondary description copy, subheadings, and stat descriptors
- #F3F1FD — Lavender Tint: Background fill for card feature tags and squircle icon badges
- #FFEDE6 — Metric Peach: Background wash for the latency trend micro-stat icon
- #E6F6FD — Metric Cyan: Background wash for the SLO reliability micro-stat icon
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Manrope), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 24px heading-lg, 44px display. Tracking -0.03em at display, 0.05em at eyebrow caps. The typographic tone is authoritative, modern, and engineering-grade. Plus Jakarta Sans (or Inter) brings crisp geometric terminals and tight display tracking (-0.03em) that makes infrastructure claims feel rigorous and deliberate rather than decorative.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1360px container, airy density.
DEPTH
Depth is created purely through ambient contrast rather than layered shadows. The pure white #FFFFFF cards lift off the #FAF9FC canvas via an imperceptible diffuse blur (0px 4px 20px rgba(0,0,0,0.03)), while the bottom obsidian #0B0F19 banner introduces structural gravity.
IMAGERY
Iconography consists of minimal, technical 1.5px stroke outline glyphs (cube, microchip, price tag, chart, rocket, shield) rendered in electric violet. No photographic assets or detailed UI screenshots are present; the layout relies entirely on crisp vector geometry and color-coded status pips.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-weight headline with an em-dash purple highlight ('—at scale') resting above floating borderless white feature cards and grounded by a full-width monolithic obsidian bottom bar. Stripping the dark anchor banner transforms it into a generic SaaS grid; keeping it creates architectural contrast.
MUST
- Highlight key value proposition words within headlines using #6366F1 connected by an em-dash.
- Place card icons inside soft 40x40px squircles tinted with #F3F1FD lavender fill.
- Use a dark, solid obsidian (#0B0F19) bottom bar to anchor light-themed floating grids.
- Keep card borders invisible or matching #FFFFFF, relying solely on subtle elevation for separation.
AVOID
- Do not use harsh 1px borders around feature cards; keep them seamless and soft.
- Do not set paragraph copy in pure black; use #596375 or #64748B for comfortable readability.
- Avoid sharp 90-degree corners; enforce 16px radii across all primary surfaces.
- Do not overload cards with full-width preview images; maintain clean typographic structure.
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 中尝试 
