Design a light-mode website section: tactile earth tones meeting precision deep forest teal through fluted architectural glass.
LAYOUT
The page flows from an expansive horizontal split hero down into an orderly multi-column dark footer. The hero devotes the left 50% to high-impact typographic hierarchy (eyebrow, massive title, descriptive copy, dual CTAs, and inline trust features), while the right 50% presents a floating workflow diagram. Below, the transition into the deep spruce footer is razor-sharp, organizing brand summary on the left, four equidistant link columns in the center, and a newsletter capture component on the right.
PALETTE (use these exact hex values)
- #FBF6EF — Champagne Canvas: Primary light canvas background for hero section with warm undertone
- #071C19 — Abyssal Forest: Base dark background for footer, grounding the lower half of viewport
- #0E332E — Spruce Deep: Hero primary button background, core flow diagram hub node, and dark container
- #C8643C — Terracotta Accent: Headline emphasis on italic text, eyebrow rule, and warm ambient back-glow
- #2CA58D — Mint Glint: Footer submit button, active indicator pips, brand link text, and diagram cues
- #11211E — Deep Mineral Text: Primary hero typography and high-contrast labels on light surfaces
- #5A6763 — Earthy Slate Muted: Hero subheadings, feature badges, and secondary light canvas copy
- #8EA39E — Footer Slate Muted: Footer navigation links, legal copyright, and secondary footer body copy
- #4EB49D — Footer Category Teal: Tracked uppercase column headers within the dark footer
TYPOGRAPHY
Typeface Plus Jakarta Sans (or General Sans, Inter, Archivo), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 52px display. Tracking -0.03em at display, 0.05em at caps. Plus Jakarta Sans delivers an engineering-grade precision that avoids coldness through its rounded humanist geometry. The unexpected shift to an italicized terracotta display word introduces bespoke editorial warmth, reflecting the physical craft of construction. For production systems without access, General Sans or Inter will preserve the metric balance, provided the italic styling retains genuine angled posture.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using translucent white frosted backing plates (rgba(255, 255, 255, 0.45) with backdrop-blur 20px) rather than harsh multi-directional shadows. Node cards cast faint ambient drop shadows (0 4px 16px rgba(0, 0, 0, 0.04)) ensuring they float cleanly over the diagram substrate. In the footer, elevation is suppressed entirely into a flat, planar architectural structure separated by fine 1px dividers.
IMAGERY
Visual imagery is technical, diagrammatic, and non-photographic, emphasizing architectural workflow clarity through clean line-art icons and connected schematic blocks. The sole atmospheric element is the background texture: a bespoke, multi-hued vertical ribbed glass effect suggestive of architectural fluting and modern building materials. Photographic cutouts or skeuomorphic textures are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The ribbed-glass architectural gradient that washes vertically behind the hero canvas, fading warm clay terracotta into cool sage mint. It grounds abstract AI capability into tangible structural materials. Misusing it by replacing it with a flat pastel gradient or generic mesh blur instantly destroys the design's physical, industrial-grade software identity.
MUST
- Render the hero background with vertical ribbed fluting softly transitioning from terracotta to mint.
- Style the focal keyword in the main display headline with italic font and terracotta hex #C8643C.
- Keep footer column headers strictly uppercase with wide letter-spacing (+0.08em) in mint tone #4EB49D.
- Connect diagram nodes with delicate 1px dotted strokes and 8px connector radiuses.
AVOID
- Never use generic pure black (#000000); use deep abyssal teal (#071C19) for dark surfaces.
- Do not set footer link text to full white; reserve white for logos and primary CTAs.
- Avoid sharp 0px corners; all cards, inputs, and buttons require consistent 8px to 16px radii.
- Never apply harsh black drop-shadows; diagram elevation relies on diffuse low-opacity ambient tinting.
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 中尝试 
