Design a light-mode website section: crystalline technical dark mode floating over warm, swirling sand textures and editorial rust typography.
LAYOUT
The header spans edge-to-edge within a 1280px max-width boundary. The hero splits into a 5-column left panel (eyebrow, multi-style title, value proposition, CTAs, 3-metric feature row) and a 7-column right composite consisting of an upper wide dark stage over a three-column card grid (policy, telemetry, code).
PALETTE (use these exact hex values)
- #FAF8F5 — Canvas Sand: Global page background featuring faint, swirling topographical wave illustrations
- #FFFFFF — Surface White: Light dashboard card surfaces and button backgrounds
- #0F1319 — Dark Console: Primary preview screen, code block background, and dark buttons
- #111418 — Deep Charcoal: Primary typography, main headlines, and brand glyph
- #B8432B — Editorial Rust: Serif italic emphasis words, eyebrow badges, and lightning feature icon
- #667085 — Muted Slate: Supporting body copy, secondary metadata, and table subtext
- #E5E1DA — Subtle Border: Hairline card borders, divider rules, and secondary button outline
- #4E82F7 — Telemetry Cyan: Sparkline wave graph and network node glow accents
- #2BB673 — Status Green: Operational status dots and verified policy badges
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,SF Pro Display,Helvetica Neue), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 56px display. Tracking -0.03em at display, -0.01em at body. The voice balances authoritative enterprise infrastructure with literary craft. Inter provides clinical legibility for developer telemetry and UI chrome, while the unexpected burst of serif italic in warm rust creates an editorial signature reminiscent of prestigious technical publications.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is handled strictly through high-contrast surface planar shifts rather than heavy drop shadows. Dark cards (#0F1319) float naturally against the pale textured sand, bordered by hairlines with soft, almost imperceptible 1-2px ambient contact diffusion.
IMAGERY
Centerpiece visual is a synthetic, glossy 3D glass pentagon surrounded by celestial particle fields and luminescent data rings. Photographic portraits or clip art are strictly absent; all imagery is technical, vector-lined, or abstract procedural render.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden typographic inflection in the headline: transitioning mid-phrase from a heavy sans-serif into an elegant, italicized warm rust serif ('world of agents.'). It instantly elevates a developer infrastructure product from a sterile SaaS tool into an ambitious philosophical platform.
MUST
- Reserve the warm rust serif italic exclusively for focal phrase emphasis inside headlines.
- Pair dark telemetry and terminal cards with crisp light cards on the cream canvas.
- Maintain high typographic contrast with tight negative tracking on display headlines.
- Use 8px corner radiuses for interactive buttons and 16px for content cards.
AVOID
- Do not apply the rust color across entire paragraphs; it is an accent, not a text color.
- Never use pure black #000000; ground deep tones in rich ink slate (#0F1319, #111418).
- Avoid harsh multi-stop drop shadows; delineate depth primarily through contrasting card fills.
- Do not replace the sand background (#FAF8F5) with stark cool white.
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 中尝试 
