Design a light-mode website section: clinical bento product storytelling meets high-contrast cad simulation and telemetry for deep-tech hardware workflows.
LAYOUT
The section opens with an asymmetric hero header on the left, immediately followed below by Step 1 (Setup). The center column dominates visually with a large double-height card for Step 2 (Simulation and API), while the right column houses Step 3 (Factory Monitoring). Across the bottom span Step 4 (Inspection/Approve) and Step 5 (Final Outcome), forming a clean five-stage sequential narrative grid.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Overall page background creating a surgical, clinical foundation.
- #FFFFFF — Card Surface: Primary surface for individual workflow step containers.
- #0B101B — Dark Viewport Surface: Simulation screen backdrop simulating a 3D CAD/CAM workstation.
- #4F46E5 — Primary Indigo: Eyebrow labels, hero title emphasis, step badges 1-4, and toolpath glow.
- #F43F5E — Terminal Coral: Stage 5 outcome badge and final state highlights.
- #10B981 — Telemetry Success: Active machine status pips, collision-free notices, and quality pass badges.
- #0F172A — Primary Heading: Main titles, step titles, metric values, and high-emphasis labels.
- #64748B — Muted Body: Explanatory copy, inactive tabs, secondary specs, and graph axes.
- #E2E8F0 — Subtle Border: 1px container outlines, inner card dividers, and data table borders.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 20px heading, 24px heading-lg, 40px display. Tracking -0.02em at display, 0.05em at caps. The voice is hyper-precise, technical, and executive-ready. Inter (or Plus Jakarta Sans) provides geometric legibility that mimics high-end aerospace CAD suites without feeling cold. Code and machine tags use monospaced fonts to reinforce authentic software-defined manufacturing.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is communicated primarily through structural surface contrast and crisp 1px borders rather than heavy blur. Cards sit flat against the #F8FAFC canvas with an almost imperceptible ambient shadow (box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 10px 20px -5px rgba(15,23,42,0.03)). Inset viewports rely on pure black-to-light-surface contrast to carve out dimensional depth.
IMAGERY
Imagery consists exclusively of hyper-realistic CAD viewport renders, metallic toolpaths, false-color CMM tolerance heatmaps, and high-finish machined aluminum 6061-T6 physical parts. Photography and 3D renders look like precision aerospace artifacts, avoiding stylized 3D clay or cartoonish abstractions. Lighting is diffuse studio illumination on sandblasted metal.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-clean white SaaS bento card containing an immersive, deep-black 5-axis CNC simulation viewport with glowing lavender toolpaths. It immediately bridges digital cloud software with physical heavy industry. Misusing it involves placing dark themes arbitrarily across standard text cards instead of reserving it solely for virtual machinery.
MUST
- Use solid 1px borders (#E2E8F0) on white cards to maintain clean, technical separation.
- Restrict dark backgrounds exclusively to simulation viewports or terminal inspectors.
- Reserve the coral accent (#F43F5E) strictly for the final outcome step.
- Present machine telemetries and dimensions with monospace or tabular figures.
AVOID
- Do not introduce decorative drop shadows or heavy blur effects over 12px.
- Do not make the entire canvas dark; dark mode is strictly localized to viewports.
- Do not use generic illustrative icons in place of real engineered parts.
- Do not color stage 1 through 4 numbers in anything other than the primary indigo (#4F46E5).
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 中尝试 
