Design a light-mode website section: clinical technical precision balanced with pastel architectural softness on cool neutral planes.
LAYOUT
The section adopts an asymmetric split layout: the left 35% is dedicated to an eyebrow pill, a dominant 2-line headline, narrative paragraph, and four vertical feature rows. The right 65% holds an expansive white canvas containing a dual-pane technical showcase: an EdenOS schematic flow on the left flowing directly toward an embedded dark code terminal on the right. Below both columns spans a full-width metrics banner organized horizontally into a brand statement followed by four KPI columns.
PALETTE (use these exact hex values)
- #F3F4F6 — Canvas Background: Outer structural page canvas surrounding cards
- #FFFFFF — Surface White: Primary elevated card and diagram container background
- #0B1120 — Obsidian Terminal: Background for live code snippet container and developer terminal
- #111827 — Primary Text: Main headline typography and bold metric numbers
- #6B7280 — Secondary Text: Subheads, descriptions, and passive metadata
- #E5E7EB — Border Hairline: Subtle borders around nodes, cards, and divider rules
- #38BDF8 — Electric Cyan: Terminal syntax highlighting and peripheral sensor icons
- #10B981 — Neon Emerald: Active status indicators, success metrics, and live pills
- #F43F5E — Coral Rose: Gradient hub outline corner and secondary icon accent
- #6366F1 — Digital Indigo: System core node highlight, category badge dot, and links
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, 32px heading, 44px display. Tracking -0.02em at headlines, +0.06em at uppercase labels. The voice is analytical, precise, and understated, embodied by Inter's neutral mechanical grotesque shapes. Tight negative letter-spacing (-0.03em) on display headlines provides modern density without sacrificing corporate seriousness. Code elements rely on JetBrains Mono to reinforce physical systems engineering and modern developer ergonomics.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created primarily through flat plane juxtaposition rather than drop shadows: elevated white containers sit directly over a cool light gray backdrop. The only notable shadow is an ultra-diffuse, low-opacity ambient blur (0px 20px 40px -15px rgba(0,0,0,0.04)) underneath the primary white card sections. The dark terminal card acts as an inverted visual depth pocket within the light diagram container.
IMAGERY
There are no photographic assets; visual interest is generated entirely through synthetic schematic illustrations and UI artifacts. Architecture is represented via wire-style vector nodes with line icons, dotted traces, and a gradient-stroke central hub. Decorative illustrations or photorealistic robotics imagery would conflict with the developer-first, API-centric identity.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-clean white schematic diagram containing a subtle gradient-bordered hub connected via delicate dashed lines directly to a dark, live-telemetry code editor card. Losing either the flow diagram or the embedded terminal destroys the balance between system architecture and developer implementation.
MUST
- Use generous whitespace (32px to 48px padding) inside the main white card surfaces.
- Keep diagram connecting lines strictly dashed, 1px thickness, in light gray (#CBD5E1).
- Anchor high-tech credibility by pairing the light diagram with an obsidian code card (#0B1120).
- Tint icon background circles with extremely light 50-shade pastel tones (#EFF6FF, #ECFDF5).
AVOID
- Never apply harsh black dropped shadows; rely purely on 1px borders (#E5E7EB) or ambient blurs.
- Do not use dark backgrounds for the entire page canvas; keep the dark surface scoped to the terminal.
- Avoid saturated solid background colors on feature icon badges.
- Do not omit the terminal bottom bar; the live status indicator is essential to the operational feel.
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 中尝试 
