Design a light-mode website section: clinical saas clarity grounding a glowing window into cinematic synthetic worlds.
LAYOUT
The section employs an asymmetric two-column split layout across a 1440px desktop frame. The left 35% is dedicated to conversion copy: eyebrow badge, 48px display heading with colored emphasis, three stacked feature rows, and proof indicators. The right 65% accommodates a comprehensive, multi-pane application window with top bar, slim tool rail, and a 2-column tiled workspace.
PALETTE (use these exact hex values)
- #F8F9FC — Canvas Background: ambient page background providing slight contrast behind pure white cards
- #FFFFFF — Surface White: primary container fill for the simulated dashboard window and left icon badges
- #F3F4F8 — Subtle Surface: secondary card nesting background for sub-panels and timeline tracks
- #4353FF — Electric Indigo: hero headline highlight, active tab underlines, primary action buttons, and active timeline indicators
- #EEF2FF — Brand Tint: active sidebar icon background and soft pill fills
- #0F172A — Text Primary: primary headings, active navigation items, and strong data figures
- #64748B — Text Muted: body copy descriptions, timestamps, subheadings, and terminal output text
- #E2E8F0 — Border Subtle: 1px structural dividers between workspace panes and card outlines
- #10B981 — Success Emerald: console success markers, growth metric badges, and active status pips
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 24px heading, 48px display. Tracking -0.03em at display, -0.01em at body, +0.02em at metadata. The typography relies on Inter or an equivalent modern geometric grotesque, delivering a neutral, engineered SaaS posture that lets the product capability speak directly. Tight letter-tracking at the 48px scale gives marketing statements authority, while tall x-height at 12-14px guarantees rapid scanning across dense tabular metrics and console feeds.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1440px container, comfortable density.
DEPTH
Depth is created flatly and architectural: a soft, wide-radius ambient blur (0 20px 48px -12px rgba(15, 23, 42, 0.08)) separates the primary dashboard window from the canvas. Inside the application interface, elevation drops to zero, relying entirely on 1px borders (#E2E8F0) and nested white surface planes to organize hierarchy.
IMAGERY
Visual imagery is concentrated exclusively within the game viewport preview, showcasing a photorealistic, neon-lit cyberpunk cityscape in rich blues, purples, and deep blacks. No whimsical vector illustrations or generic 3D graphics are permitted; imagery must feel like a live, rendered production outcome.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-clean, clinical white productivity workspace containing a cinematic, dark-mode game viewport card. This communicates that professional, technical precision on the outside effortlessly generates immersive, AAA-grade game worlds on the inside.
MUST
- Use pure white cards (#FFFFFF) atop the cool grey background (#F8F9FC) to define structural planes.
- Reserve the saturated cobalt blue (#4353FF) exclusively for key conversion phrases, active state indicators, and primary triggers.
- Maintain strict hairline borders (1px solid #E2E8F0) to delineate sub-modules inside the dashboard frame.
- Stack avatar chips tightly with -6px negative margin and a 2px white outline ring.
AVOID
- Do not use dark backgrounds for the outer canvas; this interface relies on crisp high-key contrast.
- Avoid colored backgrounds on secondary feature icons; keep icon container tiles white with 1px borders.
- Do not use heavy drop shadows; depth is strictly indicated through hairlines and soft ambient diffusion.
- Never apply saturated accent colors to neutral metadata, timestamps, or inactive steps.
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 中尝试 
