Design a dark-mode website section: deep terminal darkroom punctuated by glowing cyan telemetry and code-native structural precision.
LAYOUT
The top section adopts an asymmetrical two-column arrangement with the value proposition and dual CTAs on the left, counterbalanced by a four-column cluster of compact vertical metric cards on the right. Below, a full-width footer is segmented into a primary identity and newsletter column on the far left, followed by four cleanly organized link columns (Product, Industries, Resources, Legal). The layout terminates with a horizontal rule leading to copyright on the left and utility links on the right.
PALETTE (use these exact hex values)
- #07090e — Canvas Obsidian: Root background canvas behind hero and primary navigation sections
- #0d131f — Surface Elevated: Metric card backgrounds and lower footer structural section
- #1a2333 — Surface Border Hairline: 1px hairline outlines on metric cards, social pills, and input wrappers
- #0ea5e9 — Telemetry Cyan: Primary action button background, newsletter submit icon, and metric glyphs
- #4ade80 — Verification Mint: High-signal metric typography, checkmark icons, and headline gradient terminus
- linear-gradient(90deg, #38bdf8 0%, #86efac 100%) — Headline Gradient: Text fill gradient applied exclusively to the emphasized phrase in the main heading
- #f8fafc — Text Primary: Display headlines, metric values, button labels, and logo marks
- #8994a6 — Text Muted: Sub-copy, input placeholder, footer links, and metric supporting labels
- #141c2c — Watermark Telemetry: Faint JSON candidate payload watermark rendered in the upper-right canvas
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 48px display. Tracking -0.03em at display, 0.05em at caps metadata. The type communicates high-frequency engineering competence through a crisp neutral neo-grotesque sans paired with developer-native monospace touches. Display sizes use tight tracking (-0.03em) to convey urgency and density, while body copy remains open and highly readable. Geist or Inter acts as an ideal open-source substitute.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Elevation is expressed strictly through luminance contrast and soft colored radiance rather than traditional black drop shadows. Metric cards and the footer band rise subtly above the canvas with slightly lighter slate fills (#0d131f) and 1px borders (#1a2333). The only intense physical depth comes from the ambient diffuse cyan glow beneath the primary CTA button.
IMAGERY
Imagery is purely graphical and code-derived: no lifestyle photography or heavy 3D assets exist. Subtle ethereal particle waves composed of glowing cyan dust drift horizontally across the section divider, complemented by a watermark of real JSON endpoint code in the background.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone horizontal text gradient ('what they’ve shipped.') shifting seamlessly from sky blue to mint green against an obsidian ground, paired with the glowing cyan primary action button. Misusing this signature involves applying the gradient across entire paragraphs or using harsh, non-cyan color stops.
MUST
- Use JetBrains Mono or monospace styling strictly for code brackets, endpoints, and micro-eyebrows.
- Restrict the cyan-to-green gradient exclusively to high-emphasis words within display typography.
- Keep metric card widths uniform and compact (approx. 110-120px) to form a neat data bank.
- Pair the primary cyan CTA button with a soft, expansive cyan glow directly beneath it.
AVOID
- Do not use saturated cyan for large surface fills; reserve it for CTA and accents.
- Avoid solid bright borders; every dividing stroke must be an understated 1px hairline (#1a2333).
- Never substitute rounded pill buttons for the primary CTA; stick to an 8px technical radius.
- Do not introduce photographic imagery or non-vector illustrations into the layout.
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 中尝试 
