Design a light-mode website section: crisp monochrome editorial typography grounded over warm cream paper and cosmic stippled dunes.
LAYOUT
Asymmetric two-column split. The left 45% is dedicated to editorial copy, CTA buttons, and a three-item value-prop grid. The right 55% houses a four-step horizontal process bar with four corresponding UI illustration cards arrayed beneath.
PALETTE (use these exact hex values)
- #FAF9F6 — Paper Cream: dominant canvas background across the entire viewport hero section
- #FFFFFF — Card White: background for floating workflow cards and light secondary buttons
- #111113 — Obsidian Black: primary headlines, heavy nav links, primary CTA fill, and step badges
- #6E6E73 — Muted Slate: subheadings, step micro-descriptions, feature captions, and secondary links
- #D9462F — Terracotta Dot: kicker category text, terminal punctuation dot, and continuous status mark
- #E8E6DF — Subtle Border: delicate 1px outlines on floating cards, secondary buttons, and divider tracks
- #10B981 — Metric Emerald: performance increase percentages and safety indicator dots
- #3B82F6 — Telemetry Blue: data-backed indicator dot and interactive card state highlights
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist Sans, Archivo), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 36px heading, 68px display. Tracking -0.03em at display, -0.01em at body. Plus Jakarta Sans delivers an authoritative yet modern European editorial tone. It feels clinical, rational, and exceptionally crisp when tightly tracked at display scale. If substituted, use Geist Sans or Inter with negative letter-spacing to preserve the architectural precision.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is deliberately restrained. The canvas is essentially flat paper, with workflow micro-cards raised by only an imperceptible drop shadow (0 4px 16px rgba(0,0,0,0.03)) and hairline 1px borders. Contrast and layering are communicated through pure tone rather than heavy blur.
IMAGERY
Abstract UI wireframes and stylized micro-charts rendered in clean geometric shapes. The single decorative flourish is the organic stippled grain landscape along the bottom edge, resembling a moonlit dune rendered in ink stippling. Photographic human figures are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of the bold title's terracotta-red terminal dot with the sweeping stippled sand dune along the bottom edge. This pairing transforms an otherwise strict monochrome SaaS layout into a tactile, literary artifact. Replicate it by keeping color to punctuation and using organic pointillist grain in dark anchor regions.
MUST
- Always set display headlines with tight tracking (-0.035em) and end sentences with a colored terracotta period.
- Maintain the warm off-white canvas (#FAF9F6) rather than pure clinical #FFFFFF.
- Use solid black circles (24px) with white interior numbers for process step sequences.
- Keep floating workflow cards faint with a 1px border (#E8E6DF) and ultra-subtle elevation.
AVOID
- Do not use colorful gradient backgrounds; depth belongs entirely to stippled textures and typography.
- Never replace the terracotta accent with cold electric neon reds or purples.
- Avoid heavy card drop shadows; cards must feel like lightweight paper on canvas.
- Do not center-align the main hero headline; it must remain strictly left-aligned.
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 中尝试 
