Design a light-mode website section: clinical aerospace minimalism paired with high-fidelity live robotics telemetry and softly illuminated white containment surfaces.
LAYOUT
The section employs an asymmetric two-column split across a 1360px container: the left 38% hosts marketing copy, an eyebrow label, three icon-led value props, and twin CTA triggers. The right 62% hosts the expansive, self-contained dashboard shell containing a header bar, a 3-column operational body (camera bay, timeline, telemetry/console), and an anchored bottom workflow ribbon.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ice: Outer background fill providing subtle cool contrast against the elevated white board
- #FFFFFF — Panel Pure White: Primary surface for interactive dashboard cards, containers, and elevated modals
- #0B0F19 — Console Abyss: High-contrast dark background for real-time terminal diagnostics and system logs
- #2563EB — Cobalt Blue: Primary brand colour used for main CTA, active progress bars, and completed step badges
- #EC4899 — Active Magenta: Attention accent applied to the active in-progress state indicator and workflow highlight
- #10B981 — Telemetry Emerald: System status indicator, positive delta percentages, and live telemetry pulses
- #0F172A — Slate Obsidian: Primary text colour for display headings, metric values, and bold structural labels
- #64748B — Muted Slate: Secondary copy, passive timestamps, pending states, and metric unit labels
- #E2E8F0 — Subtle Hairline: Structural grid divider borders, button outlines, and card separators
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 18px subheading, 28px heading, 44px display. Tracking -0.03em at display, -0.01em at body, 0.05em at caps. The typography communicates aerospace precision, reliability, and automated efficiency. Neutral neo-grotesque typefaces (Inter or Geist) with tight tracking at large sizes give headline statements weight without corporate stiffness, while the monospaced terminal logs provide tangible authenticity to the telemetry story.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created strictly through an elevated central stage metaphor: the entire application mock sits on surface level 1 (#FFFFFF) with an ultra-soft, low-opacity drop shadow hovering above the cool grey canvas (#F8FAFC). Interior components are flattened into level 2 surfaces defined by 1px crisp hairline borders, with the exception of the console which recedes visually via its dark near-black fill.
IMAGERY
Visual assets are exclusively top-down or orthographic engineering-grade 3D renders of automotive hardware and robotic gantry arms illuminated with cool blue LED task lighting. Subject matter must depict precise automation, cleanly lit machinery, and high-tech bay floors. Cartoons, abstract vector graphics, or generic lifestyle photography are completely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-contrast diagnostic interface: a pristine white multi-column hardware dashboard that embeds an orthographic top-down camera viewport alongside a recessed obsidian terminal console, bridging marketing clarity with raw industrial telemetry.
MUST
- Use strict 1px hairline borders (#E2E8F0) to compartmentalize sub-panels inside the dashboard window.
- Reserve vibrant magenta-pink exclusively for active, real-time in-progress states.
- Maintain high optical contrast between the light UI panel and the deep black console sub-card.
- Align timestamps and telemetry deltas strictly to right tabular data columns.
AVOID
- Never apply heavy black borders or harsh drop shadows to inner modules.
- Do not use saturated yellow or amber for warnings; rely on magenta for focus and emerald for status.
- Avoid using decorative illustrations; all visual media must be photorealistic technical 3D or real hardware renders.
- Do not make the marketing column wider than the dashboard; keep a 40/60 horizontal split ratio.
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 中尝试 
