Design a light-mode website section: warm editorial engineering anchored by terracotta accents and delicate parametric wave lines on cream.
LAYOUT
The structure is ordered in three clear horizontal zones. Zone 1 is an asymmetrical CTA block with left-aligned copy and right-aligned particle field. Zone 2 is a five-column footer separated by faint vertical guides, giving equal weight to the brand bio and four link categories. Zone 3 is a single-row copyright and compliance baseline pinned beneath a full-width rule.
PALETTE (use these exact hex values)
- #FAF8F5 — Warm Canvas: Global structural surface applied uniformly across CTA and footer backgrounds
- #BA3C35 — Terracotta Red: Primary CTA fill, eyebrow uppercase text, and particle wave accent
- #111111 — Ink Black: Primary headings, brand wordmark, column titles, and main button text
- #524F4B — Graphite Body: Descriptive body copy, footer column navigation links, and contact handles
- #8C8780 — Muted Stone: Footer sub-headers, copyright notice, legal links, and icon strokes
- #E5E1DB — Hairline Border: Horizontal section rules, vertical column dividers, and icon button outlines
- #5A738E — Particle Slate: Secondary contour coloration in the fine generative wave field
TYPOGRAPHY
Typeface Inter (or Geist Sans, Helvetica Neue, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px subheading, 15px body, 16px body-lg, 44px heading, 58px display. Tracking -0.03em at display, 0.08em at uppercase metadata. The typography speaks with authoritative, engineering-grade clarity using Inter or a neutral neo-grotesque sans. Tight display tracking (-0.035em) gives the headline an assertive editorial tone, while generous line-height on the body text ensures effortless legibility. Free equivalents like Geist Sans or SF Pro preserve the precision.
GEOMETRY & SPACING
Corner radii — cards 0px, links 2px, inputs 6px, buttons 6px. Spacing on a 4px unit, 32px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Elevation is entirely flat and architectural. Depth is achieved strictly through typographic weight contrast, hairline borders (#E5E1DB), and overlapping particle line geometry rather than drop shadows or z-axis offsets.
IMAGERY
The sole imagery consists of fine mathematical wireframe contour waves rendered in delicate particle stippling. These lines shift subtly between terracotta red and muted slate-blue, fading organically into the cream background. Photographs, gradients, or 3D renders would break the technical drafting character.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the contrast between the warm editorial cream canvas (#FAF8F5) and the generative, stippled parametric wave that emerges behind the CTA. It signals scientific precision without feeling cold. Misusing it involves making the wave too dense, using standard gradients, or applying it over pure white surfaces.
MUST
- Keep background strictly warm cream (#FAF8F5) rather than pure clinical white (#FFFFFF).
- Use uppercase tracking (0.08em) only on small subheaders and eyebrow labels below 12px.
- Rely on 1px rules (#E5E1DB) for sectioning instead of filled surface cards.
- Align all CTA headlines strictly flush-left with a crisp trailing punctuation mark.
AVOID
- Do not introduce box shadows or floating raised surface elevations.
- Do not round buttons beyond 6px; avoid pill-shaped primary CTA buttons.
- Do not set footer navigation links in bold or uppercase styling.
- Do not use high-saturation photography; keep visuals limited to parametric vector linefields.
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 中尝试 
