Design a light-mode website section: tactile technical planning with high-contrast serifs on generative blue point-cloud textures.
LAYOUT
The header spans the full width with a crisp brand mark on the far left, centered navigation links, and utility actions aligned to the far right. Below, the hero splits into two columns: left column contains the step eyebrow, multi-typeface headline, copy, CTA group, and trust metrics; the right column features a dark interactive product diagram overlapping the cyan generative particle wave. A small accelerator credential pill floats centered at the bottom.
PALETTE (use these exact hex values)
- #FAFAF7 — Cream Canvas: Light mode primary background wash across the main viewport
- #0D272A — Panel Slate Teal: Deep blue-teal background for the interactive preview cards and badge chips
- #E85A2A — Persimmon Primary: High-conversion CTA button fill and Y Combinator logo accent
- #2BBF89 — Emerald Mint: Status indicator pills, checkmark icons, and active workflow tags
- #0B3D3B — Deep Forest Text: Dark chromatic teal used exclusively for the highlighted serif italic headline text
- #111827 — Charcoal Headings: Primary headline grotesque text, nav links, and high-emphasis body text
- #5C6B73 — Subtle Muted Ink: Supporting descriptive text, secondary labels, and metadata subtitles
- #E5E7EB — Subtle Border Overlay: Card outlines on light background, pill badges, and secondary buttons
TYPOGRAPHY
Typeface Inter Display (or Geist, Plus Jakarta Sans, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 56px display. Tracking -0.03em at display, -0.01em at body. The typographic pairing bridges analytical software execution with human editorial thoughtfulness. The sans-serif grotesque communicates precision, speed, and standard UI legibility, while the rich forest-teal serif italic introduces an intentional, handcrafted feeling suited to architecture and deep planning. A modern pairing like Inter Display with Newsreader or Instrument Serif yields the exact personality.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 10px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved through stark container contrast rather than heavy blurred drop shadows. A dark teal workspace panel sits atop an organic stippled blue field, while secondary intelligence popovers sit on top of the workspace using slightly elevated borders (#1E494E) and deep tonal shifts. The primary cream canvas remains entirely flat.
IMAGERY
The dominant visual is an organic, computational stipple-wave graphic composed of thousands of fine cyan and cobalt blue dots that simulate sand dunes or fluid dynamics. It occupies the right half of the hero, receding into crisp cream negative space behind the product screenshot. Photography is completely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the hybrid headline phrasing: a heavy, black modern sans-serif statement that shifts into an elegant, sloping dark teal serif italic ('complex features.'). Without this deliberate typographic tension, the hero would collapse into standard developer tool aesthetics.
MUST
- Pair clean grotesque display headlines with italic editorial serif focal phrases for sophisticated contrast.
- Use warm persimmon (#E85A2A) strictly for active triggers and authoritative logo badges.
- Keep interface preview mockups dark (#0D272A) to provide high visual weight against the pale canvas.
- Confine dot-matrix noise textures to the right edge and underbelly of interface previews.
AVOID
- Do not render the entire page in dark mode; the cream-to-teal transition defines the brand tone.
- Avoid generic blue or purple gradients; stick strictly to cyan-cobalt stippled particle maps.
- Do not set the entire hero headline in serif; only italicise the terminal qualifier phrase.
- Never apply harsh black drop shadows; rely on 1px borders and contrasting dark container surfaces.
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 中尝试 
