Design a dark-mode website section: deep navy data tapestry illuminated by precise glowing schematics and editorial serif emphasis.
LAYOUT
The grid uses an asymmetric 3-column architecture over a 1360px container. Column 1 (left) houses the hero headline lockup and numbered sequential workflow cards (steps 1 through 4). Column 2 (center) commands the greatest width, presenting the large 'Your integration map' diagram atop step 5. Column 3 (right) stacks three vertical capability cards, while a full-width security and compliance footer spans the bottom.
PALETTE (use these exact hex values)
- #060B14 — Deep Space Canvas: Deepest canvas background behind all cards and global containers
- #0C1525 — Midnight Slate Panel: Primary card and container background fill
- #1C2C47 — Subtle Outline Stroke: One-pixel structural borders enclosing cards, pill badges, and diagram containers
- #F1F5F9 — Text Primary: Main headlines, step titles, card headings, and prominent labels
- #7A8C9E — Steel Blue Muted: Body copy, supporting explanations, section kickers, and secondary metadata
- #38BDF8 — Signal Cyan: Orchestrator core glow, active connector vectors, and step circle backgrounds
- #34D399 — Pulse Emerald: Live indicator dot and active service status pills
- #111E33 — Nested Node Fill: Background for individual source and destination nodes in the integration map
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, system-ui), weights 400/500/600. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 28px display. Tracking -0.01em at medium, 0.05em at uppercase. The typographical tone is architectural and intellectual, pairing modern engineered sans-serif (Inter) with a refined literary serif italic (Newsreader match) for the phrase 'to cultural intelligence'. This deliberate collision suggests high-performance enterprise data processing merged with deep archival reverence. When Inter or Newsreader are unavailable, Geist and Instrument Serif serve as faithful alternates.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 48px between sections, 1360px container, comfortable density.
DEPTH
Elevation is achieved through tonal separation rather than drop shadows. Cards sit slightly elevated above the #060B14 canvas using #0C1525 fill paired with a crisp 1px #1C2C47 stroke. Focused elements like the central orchestrator node utilize soft cyan radial glows (box-shadow: 0 0 24px rgba(56, 189, 248, 0.15)) to signal active computation.
IMAGERY
This interface avoids raster photography, relying entirely on clean programmatic vectors, monoline iconography, and an interactive system flow diagram. System icons utilize 1.5px stroke weights inside subtly tinted squircle containers. Any photographic element would break the architectural, high-precision technical atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The deliberate pairing of an editorial italic serif phrase ('to cultural intelligence') within an ultra-precise, dark-mode technical architecture diagram. It balances enterprise infrastructure aesthetic with humanistic curation. To keep it authentic, limit the serif strictly to short, philosophical payoff phrases and never use it for functional UI labels or metadata.
MUST
- Pair clean sans-serif display titles with an italic serif accent line on key emotional phrases.
- Use 1px borders in #1C2C47 to define cards on dark backgrounds instead of drop shadows.
- Accentuate live integration flows with thin glowing cyan bezier lines (#38BDF8).
- Keep numerical badge steps (#111E33) aligned with connecting vertical track lines.
AVOID
- Never use pure black (#000000) for card backgrounds; maintain deep navy tint (#0C1525).
- Do not apply heavy blurred drop shadows; use border outlines and subtle radial glow effects.
- Never replace the italic serif accent with sans-serif italic; the contrast is foundational.
- Do not use saturated primary colors across multiple cards; reserve bright hues for cyan and green data signals.
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 中尝试 
