Design a light-mode website section: clinical light canvas anchored by a deep obsidian control room and violet-cyan predictive telemetry.
LAYOUT
The composition follows a two-tiered hierarchy: a top split hero (40% copy and inline features on left, 60% floating SaaS console on right) followed by a balanced 4-column bento stat row underneath. Vertical rhythm transitions from open headline spacing (32px) to dense tabular data (8px gutters) and resolves in clean, equal-width summary cards.
PALETTE (use these exact hex values)
- #FAFAFD — Porcelain Canvas: Global background canvas providing crisp, high-key breathing room across the layout
- #FFFFFF — Card White: Bottom feature card surfaces with soft ambient drop shadows
- #0D111D — Obsidian Slate: Primary background for the complex reservation schedule and dark floating module
- linear-gradient(135deg, #2979FF 0%, #C837AB 100%) — Neural Blue Gradient: Primary CTA button surface and display headline gradient highlight
- #3B82F6 — Electric Indigo: Active buttons, micro-toggles, and timeline reservation indicators
- #00E5FF — Neon Cyan: Table performance metrics and sparkline data connectors
- #D946EF — Vivid Magenta: Subheading highlight word, satisfaction metrics, and guest badge tints
- #0F172A — Deep Midnight Text: Primary headlines, stat figures, and card titles on light surfaces
- #64748B — Muted Slate: Body copy, supporting descriptions, timeline axes, and caption labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 28px heading, 44px display. Tracking -0.03em at display, -0.01em at body. The voice is confident, technical, and frictionless. Inter provides an unpretentious, highly legible vehicle for granular tabular reservations while scaling up into a punchy, tech-forward geometric display face when tracked tightly. It suggests Silicon Valley engineering applied to hospitality operations.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through contextual chiaroscuro rather than heavy skeuomorphism. The dark SaaS mockup floats over an ambient dark-violet blur aura, while the foreground neural node card casts a distinct 32px diffused shadow over the schedule grid beneath it. Bottom cards rely on crisp 1px neutral borders (#E2E8F0) paired with an ultra-subtle 4px Y-offset shadow.
IMAGERY
Vector wireframes and crisp UI componentry replace photorealistic photography. The signature visual is an intricate 3D neon neural brain glowing in ultraviolet and cyan against deep indigo. Curving dotted bezier lines represent real-time programmatic routing between interface slots and the AI core.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone cognitive split: anchoring a spotless white SaaS product pitch to an obsidian, neon-piped live orchestration dashboard connected via dotted predictive bezier curves.
MUST
- Keep display typography tight at -0.03em tracking with distinct word-level gradient accentuation.
- Enclose tabular and schedule-driven SaaS previews in high-contrast dark slate (#0D111D).
- Maintain uniform 16px radius across all light metric cards and dark interface panels.
- Use color-coded category icon containers (cyan, magenta, indigo, violet) to differentiate bento cards.
AVOID
- Do not render the entire page in dark mode; the stark light-to-dark juxtaposition is essential.
- Never use harsh, fully-opaque drop shadows on the bottom white metric cards.
- Avoid solid black (#000000) for the dashboard canvas; use blue-tinted midnight (#0D111D).
- Do not allow feature bullet points to wrap into multi-line paragraphs; keep them strictly inline.
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 中尝试 
