Design a light-mode web interface screen: surgical white space anchored by electric royal blue accents and luminous floating service nodes.
LAYOUT
The composition follows an asymmetrical split hero anchored under a floating top bar. The left column commands the eye with a trusted badge, tight 56px headline with color accenting, subtext, dual CTA buttons, and a 3-part metric cluster. The right column holds the visual hero box, disrupted dynamically by three floating capability cards and a decorative dot matrix.
PALETTE (use these exact hex values)
- #f7f9fd — Canvas Ice: ambient background tone providing high contrast for pure white floating surfaces
- #ffffff — Pure White: floating navigation bar, hero micro-cards, and button surfaces
- #edf1f9 — Banner Pearl: recessed bottom client trust bar and decorative badge containers
- #2458f5 — Electric Royal: primary CTA buttons, text highlights, active indicators, and icon badges
- #0d1322 — Ink Navy: high-contrast display titles, primary navigational links, and key numeric stats
- #64748b — Slate Muted: body copy, secondary meta labels, and inactive footer partner logos
- #eb4886 — Neon Rose: isolated geometric accent sphere creating asymmetric visual balance
- linear-gradient(135deg, #6978f8 0%, #9cb2fe 100%) — Atmosphere Gradient: background fill for the hero image container frame
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700/800. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 24px heading, 56px display. Tracking -0.03em at display, 0 at body. The type language is confident, sleek, and contemporary tech-editorial, leaning on a modern neo-grotesk with geometric counters and tight negative tracking (-0.03em) on large titles. Plus Jakarta Sans conveys forward momentum and institutional rigor without feeling dry. Inter or General Sans are acceptable fallbacks if metrics are tuned slightly tighter.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using gentle, multi-layered ambient diffusion rather than crisp linear borders. Surfaces use box-shadow: 0 12px 32px -4px rgba(13, 19, 34, 0.06) to float neatly over both the ice canvas and vibrant hero media, producing a zero-gravity, modern tech atmosphere.
IMAGERY
Photography showcases authentic, brightly lit candid studio portraits of professional collaborators, silhouette-masked with soft blending onto a periwinkle gradient frame. Fine vector line contours and an offset pink solid disc add abstract modern agency polish; stocky or low-res imagery would instantly dismantle the premium aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the trio of floating white service pills hovering across the boundary of a saturated periwinkle-gradient photo card. This technique tethers abstract software capabilities directly to real human creators. To execute correctly, ensure badges cast soft drop shadows and overlap the perimeter by 20-30%, never trapping them fully inside or outside the frame.
MUST
- Use solid white backgrounds with soft diffused shadows for elements that layer over color fields.
- Pair electric royal blue (#2458f5) strictly with deep ink slate (#0d1322) for clear structural hierarchy.
- Apply 8px border radius consistently to buttons and 14-16px to all card containers.
- Enclose social proof metrics in uniform horizontal lockups with pastel icon backplates.
AVOID
- Do not use dark borders or harsh drop shadows; rely exclusively on tone shift and blur.
- Do not tint body typography with heavy color; retain neutral slate (#64748b) for optimal legibility.
- Avoid sharp 0px corners anywhere in the layout; all surfaces require deliberate rounding.
- Never use the magenta accent (#eb4886) for primary UI buttons or text links.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3520:2336. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
