Design a light-mode website section: crystalline technical precision softened by pastel step capsules and an ink-dark terminal console.
LAYOUT
The section follows a rigid top-to-bottom pyramid rhythm: small centered pill badge leading into a massive two-line centered headline. Below the subcopy sits a horizontal 5-column grid of equal-width step cards linked by arrows. Underneath rests an expansive single-card console housing terminal, telemetry, and 3D visualization, closed out by a balanced 4-column trust feature row.
PALETTE (use these exact hex values)
- #FAFCFF — Canvas Background: Global background providing an ultra-clean, clinical studio feel across the section.
- #FFFFFF — Card Surface: Background for the 5 floating process cards with soft atmospheric shadows.
- #060C18 — Console Navy: Deep midnight background for the lower interactive metrics and CLI terminal dock.
- #2563EB — Primary Accent Blue: Key visual focus in the main headline phrase and step 1/2 identity accents.
- #06D6A0 — Mint Cyan: Accent badge and glow for Step 3 (evaluations) and terminal success status text.
- #F59E0B — Amber Yellow: Accent badge and icon halo for Step 5 (deploy and iterate).
- #0F172A — Text Primary: Main headings, step titles, and high-emphasis labels.
- #64748B — Text Muted: Subtitle copy, body descriptions inside steps, and terminal prompt metadata.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 48px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, clean, and developer-aligned. A geometric grotesque sans (Inter/Geist) provides clinical precision, made human by generous line heights and balanced letter-spacing. Code snippets and status logs are typeset in a crisp monospace font, ensuring exact vertical alignment and computational credibility.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created via soft, diffused ambient light rather than harsh directional shadows. Process cards hover with an ultra-soft multi-stop drop shadow (0 10px 25px -5px rgba(0, 50, 150, 0.04), 0 8px 10px -6px rgba(0, 50, 150, 0.02)) and a faint 1px border. The dark terminal panel sits flat on the canvas, providing depth through high luminance contrast rather than shadow.
IMAGERY
Visual assets lean into high-precision technical robotics: wireframe point clouds, robotic arm 3D meshes rendered in glowing cyan lines over deep navy space. Icons inside step cards are clean, rounded dual-tone or 3D isometric geometric glyphs. Photography is deliberately avoided in favor of procedural, data-driven visualization.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone split: floating pastel-coded workflow cards with overlapping step badges directly juxtaposed against a solitary, hyper-technical midnight-navy robotics telemetry console.
MUST
- Highlight key verbs or phrases in headlines using electric blue (#2563EB).
- Keep card backgrounds pure white (#FFFFFF) against the off-white (#FAFCFF) background to maintain card definition.
- Overlap the step number badge exactly 50% across the top border of each step card.
- Use distinct pastel tints (blue, sky, green, cyan, amber) to color-code each sequential step.
AVOID
- Do not use harsh black borders on step cards; stick to subtle drop shadows and #F1F5F9 strokes.
- Do not remove connector arrows between cards; the visual continuum is critical to the narrative.
- Never make the terminal console dock light mode; the contrast shift creates intentional gravity.
- Avoid saturated, neon background fills on the cards; only use pastel washes in tags and icon circles.
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 中尝试