Design a light-mode web interface screen: crisp modern product canvas punctuated by royal blue accents and ambient violet glows.
LAYOUT
The page follows a strict vertical single-column narrative centered at a 1200px max container width. A minimalist navbar leads into a split hero featuring left-aligned sales copy and a right-aligned elevated UI preview. Content cascades sequentially: a 4-column feature deck, a split-column core features matrix, a 3-column pricing table, a 3-column testimonial row, and ends with a wide gradient banner.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Ground: Main page background and card fill across all light surfaces.
- #F8FAFC — Subtle Surface: Section backdrops, badge fills, and inner data card surfaces.
- #0F172A — App Sidebar Charcoal: Dashboard sidebar surface inside the floating UI preview window.
- #0F172A — Midnight Ink: Primary headings, display titles, and prominent metrics.
- #64748B — Slate Body: Descriptive body copy, metadata, secondary links, and subtext.
- #2563EB — Royal Blue: Primary call-to-action buttons, active navigation, key icons, and focal borders.
- #EFF6FF — Soft Blue Tint: Category pill badge backgrounds and selected navigation states.
- #E2E8F0 — Hairline Border: Card borders, divider lines, and button outlines.
- linear-gradient(90deg, #2563EB 0%, #D946EF 100%) — Banner Gradient: Bottom conversion card fill and atmospheric hero light glow.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 32px heading, 52px display. Tracking -0.03em at display, 0em at body. The typographic tone is objective, precise, and distinctly modern SaaS, communicating speed and developer competence. Inter or Plus Jakarta Sans provides clean geometric clarity with tight display tracking that eliminates looseness in large headers. Free open-source alternatives like Geist or General Sans match this technical, high-polish voice effortlessly.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is minimal and strictly reserved for product showcase elements. Flat surfaces are outlined with 1px hairline borders (#E2E8F0), while the floating hero UI window utilizes an expansive low-opacity shadow (0 25px 50px -12px rgba(15,23,42,0.12)) coupled with an ambient soft-focus radial color glow beneath the canvas.
IMAGERY
Visual imagery is entirely vector- and UI-driven, relying on pixel-accurate application mockups with clean line charts, data donut meters, and tabular lists. Circular author avatars (32px to 40px) provide human scale in testimonials. Abstract 3D objects, stock photography, and hand-drawn illustrations are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable motif is the crisp product dashboard floating above an expansive, diffused blue-to-violet atmospheric radial glow. To use it properly, keep the glow strictly behind the elevated preview card with broad blur (120px+) at low opacity, letting the high-contrast interface metrics sit cleanly on top without color bleeding into body copy.
MUST
- Use 1px solid #E2E8F0 borders to delineate content boundaries instead of heavy drop shadows.
- Limit atmospheric gradients strictly to the hero mockup background glow and bottom conversion banner.
- Pair #2563EB primary buttons directly with transparent hairline outline buttons for visual balance.
- Maintain -0.03em tracking on display typography above 40px to ensure a tight, engineered aesthetic.
AVOID
- Do not apply dark mode backgrounds to the main page canvas; maintain dominant white #FFFFFF space.
- Avoid colored backgrounds on standard feature cards; keep them white with hairline borders.
- Do not use sharp 0px corners on interactive controls; adhere to the 8px button radius standard.
- Avoid low-contrast grey text for titles; use #0F172A to preserve high visual hierarchy.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2192:3760. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
