Design a light-mode website section: crisp manufacturing control plane marrying high-contrast editorial serifs with rigorous tabular telemetry and schematic clarity.
LAYOUT
The page follows a structured 3-tier modular bento grid spanning 1280px width. The top tier features an asymmetric split: editorial hero statement on the left, followed by three compact KPI cards on the right. The central tier showcases the interactive Walter Orchestration Map flanked by a team category selector on the left and a detailed case study spotlight on the right. The bottom tier resolves into a four-column row of tactical capabilities (Workflows, AI Chat Prompt, Architecture Guarantees, Industries Served).
PALETTE (use these exact hex values)
- #F8F9FA — Canvas Ground: Outer background wrapping the entire bento section and framing cards
- #FFFFFF — Card Surface: Background fill for all individual data modules and telemetry panels
- #0B0F19 — Obsidian Nexus: High-contrast hexagonal core anchor representing the central AI engine
- #111827 — Ink Primary: Primary headings, titles, active stat values, and prominent labels
- #6B7280 — Slate Secondary: Explanatory subtext, metadata labels, units, and timestamps
- #E5E7EB — Subtle Border: 1px hairline division lines around cards, inputs, and list rows
- #16A34A — Signal Emerald: Positive delta indicators, completion checks, and live status beacon
- #DC2626 — Warning Rose: KPI sparkline highlights, category eyebrow text, and downtime metric accents
- #FEF2F2 — Rose Tint: Soft pill background for spotlight tags and downtime callout strips
TYPOGRAPHY
Typeface Newsreader (or Charter, Georgia, Playfair Display), weights 400/500/600. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 17px subheading, 22px heading, 44px display. Tracking -0.02em at display, -0.01em at section headers. The typography balances intellectual enterprise gravity with industrial utility. The editorial serif evokes executive reporting and strategic command, while the technical sans-serif ensures rapid scanning of dense machine rates, audit events, and diagnostic logs. Newsreader or Charter serves as the primary aesthetic anchor, supported by Inter's neutral functionalism.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered purely through planar contrast and fine line-work rather than cast shadows. Pure white card surfaces (#FFFFFF) rest on an off-white ground (#F8F9FA) with 1px hairlines (#E5E7EB). Active states and focal hubs establish priority via absolute black-fill contrasts instead of z-axis blurring.
IMAGERY
This interface avoids illustrative or photorealistic raster art entirely. Visual weight is carried by schematic network topologies, vector system icons, precise micro-sparklines, and structured bulleted chat logs. Anything beyond geometric glyphs or diagrams would disrupt the industrial rigor.
SIGNATURE DETAIL — the thing that makes this design itself
The Orchestration Nexus: a dark obsidian hexagonal badge centered between incoming event streams and outbound actions, laced with delicate dashed bezier conduits and grounded by lower protocol pills.
MUST
- Pair high-contrast editorial serif headings strictly with sans-serif technical data and microcopy.
- Maintain uniform 14px border radii and 1px #E5E7EB borders across all bento cards.
- Use color exclusively to convey functional telemetry status (emerald for positive/live, rose for alerts/spotlight).
- Keep card backgrounds pure white (#FFFFFF) against the subtle #F8F9FA ground for crisp layering.
AVOID
- Never use heavy drop shadows; cards rely entirely on clean 1px borders for separation.
- Do not set UI controls, table cells, or telemetry labels in serif type.
- Avoid loud, saturated multi-color backgrounds or fully saturated banner headers.
- Never use sharp 0px or pill-shaped cards; keep the unified 14px card corner radius intact.
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 中尝试 
