Design a dark-mode website section: boreal developer infrastructure framed by crisp alabaster product cards and an abyssal teal footer.
LAYOUT
The layout leads with a wide centered card featuring a 50/50 split between left-aligned headline/CTA copy and a right-aligned live product dashboard console. Below the hero card, the page transitions immediately into a sprawling dark footer divided into a brand/newsletter column on the left and four neatly spaced navigation columns on the right. A thin horizontal rule concludes the layout with copyright on the left and legal links on the right.
PALETTE (use these exact hex values)
- #081418 — Abyssal Ground: full-bleed primary canvas for the footer and developer ecosystem navigation
- #FFFFFF — Alabaster Ground: hero container and dashboard sub-card background surface
- #F4F5F7 — Canvas Muted: page background isolating the floating light hero card
- #11453B — Spruce Primary: primary CTA button fill, logo badge background, and headline highlight keyword
- #5EA897 — Sage Telegraphed: footer category eyebrow headers and active operational telemetry dots
- #C85A32 — Terracotta Flame: eyebrow pill text, icon, and subtle notification indicator in light mode
- #FFF3EF — Terracotta Tint: background fill for the hero status badge pill
- #0F2026 — Abyssal Input: background fill for email subscribe input and social icon discs
- #111827 — Charcoal Title: headline and heavy body text on light backgrounds
- #9EADB5 — Footer Slate: subordinate links, copyright, and description text in the footer
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 44px display. Tracking -0.02em for headings, 0.05em for micro caps. The typographic tone is authoritative, technical, and approachable, powered by a crisp neutral grotesque like Inter or Geist. Tight letter-spacing on the 44px display weight provides commanding polish, while mono-spaced numerical metrics inside the dashboard impart operational rigor. If substituting, choose modern developer-focused typefaces like Plus Jakarta Sans or Geist Sans rather than traditional humanistic serifs.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered almost entirely through crisp 1px structural borders (#E5E7EB on light, #14242A on dark) and deliberate surface contrast rather than blurred drop shadows. The hero card gently hovers over the #F4F5F7 ground with an ultra-soft 0 12px 32px rgba(0, 0, 0, 0.03) wash, keeping the aesthetic tactile and architectural.
IMAGERY
Avoid photographic assets or generic 3D illustrations. The core visual centerpiece is an authentic, high-density software console UI containing genuine metrics, deployment tables, and status pings. Visual decoration is strictly restricted to line-art micro-icons (sparkle, check, arrow).
SIGNATURE DETAIL — the thing that makes this design itself
The dual-plane collision of an expansive alabaster product card floating directly over an abyssal teal-black footer, unified by spruce green (#11453B) accenting both the headline's terminal words and primary CTAs. This distinct pairing prevents the technical footer from feeling detached and grounds the light mode product snapshot in heavy enterprise reliability.
MUST
- Reserve the terracotta accent exclusively for the status pill and urgent system warning states.
- Highlight only the final key phrase of the primary headline with the brand spruce green (#11453B).
- Enforce a sharp contrast transition between the floating alabaster hero section and the full-width dark footer.
- Format all footer column categories in uppercase tracking +0.08em using sage green (#5EA897).
AVOID
- Do not bleed the dark footer background into the hero card area; they must remain strictly segregated.
- Do not use bright saturated primary blues or purples; keep the palette anchored in boreal forest and deep sea tones.
- Do not drop heavy, diffused drop shadows beneath the hero card; rely on subtle borders and clean surface elevation.
- Do not make footer category headers white or low-contrast gray; they must carry the signature sage tint.
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 中尝试 
