Design a light-mode website section: crystalline SaaS hero with soft periwinkle ambient haze and meticulous trust-building micro-details.
LAYOUT
Strictly centered vertical flow orchestrating downward momentum. Top eyebrow badge leads into tight two-line display header, immediately supported by a 2-line centered subhead at 18px. Twin CTAs align horizontally followed directly by micro reassurance checks. The composition anchors on a horizontal 4-column glass dock card, terminating with a centered compliance footnote.
PALETTE (use these exact hex values)
- #FAFAFD — Canvas Ground: Primary light canvas background setting the soft modern foundation
- #0F172A — Deep Slate Title: High-contrast heading text and primary brand accent statements
- #475569 — Muted Body Slate: Body descriptions, explanatory subheadings, and dock details
- #6366F1 — Periwinkle Glow: Hero headline accent gradient, pill badges, and icon highlights
- #818CF8 — Soft Lilac: Secondary stop for the hero headline text gradient
- #10B981 — Trust Emerald: Checkmark icons in friction-reducing microcopy below buttons
- #18181B — Obsidian Surface: Primary call-to-action button fill
- #FFFFFF — Glass White: Secondary action button background and capability dock card fill
- #E2E8F0 — Subtle Border: Hairline outlines on badge, secondary button, and dock card
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 14px subheading, 18px body-lg, 64px display. Tracking -0.03em display, -0.01em body. Inter Display delivers a sterile, highly engineered developer-tool demeanor without feeling clinical. Its negative letter spacing on display weights anchors authority, while medium weights at body sizes ensure maximum legibility. Geist or Plus Jakarta Sans serve as natural replacements maintaining technical polish.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1120px container, comfortable density.
DEPTH
Depth is handled via feather-light ambient drops rather than hard outlines. Secondary buttons carry a minimal 0 1px 3px rgba(0,0,0,0.06) lift, while the glass dock relies on backdrop blur combined with faint edge light. Atmospheric depth relies entirely on the soft chromatic radial bloom blooming from the bottom-right corner.
IMAGERY
No photographic elements are used. Imagery is strictly vector-symbolic, consisting of refined line-and-fill micro-icons (sparkles, lightning, users, telemetry charts) enclosed in tinted pastel squircles. Photography or complex 3D renders would violate the crisp clarity.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone headline execution where solid midnight slate immediately yields to a dreamy indigo-to-periwinkle gradient on line two, hovered over a frosted four-pillar capability dock. Misuse occurs when gradients are splashed over both lines or rendered with oversaturated neon stops.
MUST
- Keep the primary headline split across two lines with the second line bathed in gradient.
- Use exact 10px border radius on both CTA buttons to maintain balanced squircle proportions.
- Ensure the bottom right indigo gradient haze remains diffuse and does not exceed 25% opacity.
- Place trust assurance checks in direct vertical proximity under the CTA pair (within 20px).
AVOID
- Do not introduce sharp rectangular borders; all shapes must observe 10px to 16px corner roundings.
- Never fill the primary CTA with bright colors; it must stay deep obsidian black (#18181B).
- Avoid multi-colored icon glyphs in the feature dock; keep all icons monochromatic indigo.
- Do not make the ambient background gradient fully cover the canvas; keep top-left pure and clean.
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 中尝试 
