Design a light-mode website section: crystalline white surfaces suspended over an atmospheric field of violet-blue point-cloud dust.
LAYOUT
The section employs an asymmetrical two-column desktop arrangement capped by a light floating header (logo, center links, CTA). The left column commands 48% width, stacking an eyebrow badge, a 3-line stacked 56px headline, a 2-line 18px body paragraph, and dual button CTAs. The right column (52% width) hosts the wide product preview card wrapped in particle clouds, terminating in a bottom-centered trust divider rule.
PALETTE (use these exact hex values)
- #F8FAFF — Canvas Ice White: Base hero background tone blending seamlessly into pure white at upper boundaries
- #FFFFFF — Card Surface White: Floating interactive simulation cards and elevated pill container fills
- #F9FAFC — Subtle Well Fill: Internal prompt input panels and inactive comparison frames
- #0D1322 — Deep Obsidian Navy: Primary headings, company mark, and prominent state labels
- #3A66FF — Electric Royal Blue: Primary CTA fill, headline accent line, and key metric display callouts
- #6C5CE7 — Iris Violet: Eyebrow badge sparkle icon, tag text accents, and particle cloud accents
- #5A6578 — Slate Body Muted: Hero body paragraph copy, navigation menu links, and sub-labels
- #10B981 — Success Emerald: Pill indicator dots for compressed token state and token counts
- #E3E8F2 — Hairline Border: Card borders, secondary button outlines, and prompt input boxes
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,SF Pro Display,General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 36px heading, 56px display. Tracking -0.03em on display headings, +0.06em on all-caps badges. Inter Display (or high-neutral neo-grotesques like Plus Jakarta Sans) provides a razor-sharp, developer-tool precision that feels modern without being eccentric. Tightly tracked display weights (-0.035em) produce high-density visual authority in the headline, while spacious, neutral body copy ensures technical clarity.
GEOMETRY & SPACING
Corner radii — cards 24px, links 9999px, inputs 12px, buttons 10px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1240px container, airy density.
DEPTH
Depth is created using a high-key layering paradigm rather than physical drop shadows. The bottom layer is a misty gradient canvas dotted with semi-transparent violet-blue particles, above which floats an immaculate white card (#FFFFFF) bounded by an extremely soft, wide ambient shadow (rgba(13, 19, 34, 0.05) 0px 24px 64px -12px). Micro-depth within the card relies on subtle #F9FAFC recessed wells.
IMAGERY
The visual identity relies entirely on computational generative stipple art: a 3D toroidal cloud of cyan, indigo, and lilac point particles swirling like a galaxy. No human photography, 3D clay illustrations, or skeuomorphic glass objects are present. Off-brand imagery includes flat corporate illustrations, heavy 3D isometric models, or glossy renders.
SIGNATURE DETAIL — the thing that makes this design itself
The swirling, generative point-cloud particle halo that surrounds the floating product demonstration card. It visually communicates 'data token compression' as dispersed points condensing into order, transforming what would be a standard white SaaS card into an AI-native spatial object.
MUST
- Use deep obsidian #0D1322 for headline lines one and two, then shift the final kicker line to vibrant electric blue #3A66FF.
- Render the product demonstration card with pure white fill #FFFFFF and 24px border-radius over the soft gradient backdrop.
- Maintain generous ~80px horizontal clearance between copy column and floating product card.
- Use miniature 4-point star/sparkle glyphs as visual anchors in badges and processing nodes.
AVOID
- Do not use harsh dark drop shadows; ambient shadow blur must exceed 40px with opacity under 8%.
- Never replace the particulate point-cloud background with solid vector shapes or photographic renders.
- Avoid heavy uppercase typography; restrict all-caps strictly to 11px tracked badges.
- Do not color all three lines of the main display headline; reserve electric blue only for the concluding phrase.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
