Design a light-mode website section: high-velocity algorithmic publishing grounded in high-contrast editorial serifs and deep botanical teals.
LAYOUT
A two-column 50/50 hero layout nestled within a 1240px container. The left column stacks metadata pill, split-font headline, explanatory paragraph, dual CTA buttons, and avatar trust metrics. The right column showcases a broad 4-stage pipeline canvas where data flows from a dark telemetry card through a central white draft note into multi-channel output tiles.
PALETTE (use these exact hex values)
- #fafbfc — Canvas Background: dominant light page background supporting atmospheric gradients
- #ffffff — Card Surface: nested card containers, input backgrounds, and content cards
- #063934 — Botanical Pine: primary cta buttons, dark workflow card, and italic headline text
- #0f1923 — Ink Navy: primary headings, strong labels, and dominant typography
- #5c6970 — Slate Smoke: secondary body text, workflow micro-copy, and step descriptions
- #2bd99b — Mint Metric: dashboard growth statistics, glowing chart nodes, and verified badges
- #e6ebed — Border Subtle: card borders, pill outlines, button strokes, and diagram connectors
- #eb573d — Signal Coral: terminal period accent in headline and high-priority notification dots
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Work Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 56px display. Tracking -0.03em at display, -0.01em at body. The type system communicates algorithmic rigor softened by human editorial craft. Plus Jakarta Sans handles precision and clarity across dense UI labels, while Instrument Serif introduces a boutique, magazine-grade cadence. If licensing substitutes are needed, pair Inter with Newsreader Italic.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is restrained and architectural, relying primarily on 1px borders (#e6ebed) to define bounds. Floating draft cards and the main diagram container use an ultra-diffuse box-shadow (0 12px 32px rgba(15, 25, 35, 0.04)). The dark metric card recedes via deep tone (#063934) rather than heavy drop-shadowing.
IMAGERY
Avoid photographic stock or realistic product screenshots. The visual vocabulary consists exclusively of abstracted UI cards, clean vector node graphs, minimal social network glyphs, and micro-avatars. Technical workflow steps are depicted as diagrammatic blocks over an ultra-subtle dotted schematic matrix.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-typeface headline pairing heavy grotesque sans-serif with a rich pine-green italic serif and a single coral punctuation mark, coupled directly with an orchestrated left-to-right diagrammatic data pipeline.
MUST
- Pair heavy geometric sans headlines with an italic serif accent for data or editorial keywords.
- Maintain high value contrast between the #063934 pine containers and the bright #2bd99b metric figures.
- Use 10px radii on interactive buttons and 20px radii on parent visual containers.
- Render connector paths between workflow steps with light gray dashed 1px SVG lines.
AVOID
- Do not use generic blue or purple for active or brand states; stay strictly within pine and mint.
- Do not render the entire headline in serif; the serif must remain an intentional italic accent.
- Avoid harsh black drop-shadows; use diffuse shadows with opacity below 6% on light gray backdrops.
- Do not make buttons pill-shaped; keep CTAs tightly constrained to 10px rounded rectangles.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
