Design a light-mode website section: precision biomechanical intelligence framed by porcelain cards, deep pine nodes, and bioluminescent telemetry accents.
LAYOUT
The section begins with a pinned asymmetric two-column header block (kicker, title, and body description) adjacent to three vertical pipeline stage cards (Steps 1-3). The second row balances a wide 3D simulation card (Step 4), a narrow data-export checklist (Step 5), and a wide dark climax card (Step 6). The sequence closes with a full-width horizontally sectioned four-column value bar.
PALETTE (use these exact hex values)
- #f3f6f5 — Canvas Sage: main page background giving soft contrast behind floating white cards
- #ffffff — Card Surface: primary container fill for steps 1 through 5 and bottom dock
- #e2e8e3 — Card Border: crisp 1px boundary stroke enclosing all step cards and input panels
- #062d24 — Deep Pine: numbered step badges, dark outcome card background, and primary emphasis anchors
- #10a37f — Emerald Signal: kicker eyebrow, active live indicators, sparklines, and verified checklist dots
- #0c1a14 — Primary Obsidian: h1 display heading, card titles, and high-priority metrics
- #5a6b63 — Secondary Slate: subheadings, step descriptions, table labels, and metadata captions
- #eaf0eb — Muted Sage Fill: pill badge fills, search inputs, and inactive secondary rows
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 40px display. Tracking -0.025em for display, -0.01em for UI, +0.06em for uppercase kicker. The voice is analytical, rigorous, and industrial, evoking high-assurance robotics and deterministic AI systems. Plus Jakarta Sans lends geometric discipline and human accessibility, while tight negative tracking on headlines prevents loose editorial float. Inter or Manrope are direct drop-in open-source replacements.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 9999px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is delivered almost entirely through boundary keylines (1px solid #e2e8e3) paired with an imperceptible ambient blur (y: 2px, blur: 8px, opacity: 0.03). The canvas contrast provides optical lifting without heavy physical shadows. The final outcome card creates deep elevation via its dark pine fill against the pale field.
IMAGERY
Visual assets consist exclusively of accurate synthetic telemetry: black-box 3D simulation viewports with humanoid robot models, 2D motion-capture skeleton wireframes with joint nodes, and glowing green point-cloud wavefields. Avoid consumer-facing stock photography or generic 3D glossy shapes.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of modular white telemetry cards led by deep pine circular step nodes, climaxing in an inverted dark-green particle card.
MUST
- Anchor each sequential step card with a 28px solid deep pine circular badge.
- Reserve the dark forest green fill exclusively for the final culmination step card.
- Use precise, muted emerald (#10a37f) for positive confirmation and live signals.
- Maintain a uniform 16px corner radius across all standalone primary cards.
AVOID
- Do not use generic colorful gradient fills across the workflow cards.
- Never replace the numbered sequence badges with standard plain text headings.
- Avoid harsh black drop shadows; keep elevation felt via subtle borders and light tonality.
- Do not allow the dark outcome card to expand beyond step six.
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. Try in DraPub 
