Design a light-mode website section: structured enterprise workflow clarity paired with high-contrast obsidian interactive modules and warm editorial accents.
LAYOUT
The section is structured as an asymmetrical two-column layout spanning a max-width of 1240px with a 20px column gap. The left column contains the dominant obsidian hero module (stacked with copy, CTA, and flow diagram) atop a horizontal outcome-metric banner. The right column is organized as an even 2x2 grid of procedural step cards, maintaining identical heights and internal visual rhythms across all four stages.
PALETTE (use these exact hex values)
- #F9F8F6 — Canvas Warm Ivory: Global application page background providing soft warmth behind sharp white containers
- #12161A — Obsidian Surface: Main visual anchor card housing the interactive flowchart preview and primary conversion copy
- #FFFFFF — Card White: Background fill for step cards, outcome metrics strip, and active nodes
- #111827 — Deep Slate Text: Primary headings, titles, metric numbers, and high-emphasis labels on light surfaces
- #6B7280 — Muted Stone: Descriptions, checklist items, step subtitles, and metric metadata labels
- #E06248 — Terracotta Coral: Primary CTA fill, display serif accent word, step 01 badge tint, and section kicker text
- #3B82F6 — Cobalt Blue: Flowchart active node border, step 02 icon tint, and ingestion data indicator
- #10B981 — Emerald Green: Step 03 icon tint, exception status chip, outcome icon container, and final flowchart node
- #EDEBE6 — Subtle Light Border: Hairline card boundaries, artifact preview wells, and divider lines across light panels
- #1A2027 — Dark Card Inset: Internal canvas well for the pipeline flowchart inside the dark hero card
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 28px heading, 36px display. Tracking -0.02em at headings, 0.05em at all-caps kickers. The typography communicates rigorous enterprise engineering softened by modern editorial craftsmanship. Plus Jakarta Sans provides crisp, high-legibility geometric UI parsing for checklists, file names, and metrics. The abrupt transition into Newsreader serif italic within the headline injects executive sophistication, signaling human judgment within an automated AI environment.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through planar layering rather than diffuse blur shadows. Flat white panels and deep obsidian surfaces sit atop a warm ivory background, bound by crisp 1px borders (#EDEBE6 on light, #262E38 on dark). Internal artifact wells sit recessed via hairline outlines and delicate surface shifts (#F9F8F6), ensuring a tactile, precise architectural feel.
IMAGERY
This interface avoids stock photography entirely, substituting representational UI artifacts and state diagrams as imagery. Icons are simple monoline vector glyphs housed in 36px soft pastel squares with matching colored borders. The only visual graphics are crisp schematic diagrams featuring dashed vector flows, active state cards, and system file badges.
SIGNATURE DETAIL — the thing that makes this design itself
The split-canvas architecture: pairing a heavy, interactive obsidian dark module alongside an orderly 2x2 matrix of light workflow cards, tied together by four distinct phase-mapped pastel accents and an editorial serif headline punch.
MUST
- Use Newsreader italic only for the highlighted narrative phrase in the primary dark hero card.
- Keep card corners consistently rounded at 20px with matching hairline borders (#EDEBE6).
- Pair every workflow card with a tangible artifact preview well showing a real deliverable.
- Color-code the four step badges systematically: Coral (01), Blue (02), Green (03), Purple (04).
AVOID
- Do not apply heavy dark drop shadows; depth is established strictly by hairline borders and fills.
- Do not make the entire headline serif; only specific emotional payoff words should shift typeface.
- Never use pure black (#000000); use deep obsidian navy (#12161A) for dark mode modules.
- Do not remove the artifact preview wells; abstract descriptions alone weaken the workflow proof.
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 中尝试 
