Design a dark-mode website section: command-line devtool precision anchored by cyan glow, deep midnight slate, and fine hairline borders.
LAYOUT
The view is stacked vertically as two massive floating cards on an edge-to-edge dark background. The top card hosts a two-column hero CTA (narrative on the left, code snippet on the right) anchored by a full-width bottom status bar. The lower card houses the brand summary, 4-column link tree, and newsletter form, concluding with an external copyright row.
PALETTE (use these exact hex values)
- #06090e — Void Black: Deepest canvas background behind all floating panels and bottom copyright bar.
- #0b1118 — Panel Slate: Background fill for the primary CTA hero container and the footer container.
- #070c12 — Code Window Dark: Background fill for the embedded code terminal window and input fields.
- #182330 — Border Hairline: 1px hairline strokes separating sections, framing panels, tab bars, and dividing metrics.
- #22d3ee — Electric Cyan: Primary action button background, prompt glyphs, glowing drop-shadows, and headline emphasis.
- #22c55e — Operational Green: Status indicator dots marking live API uptime and systems operational state.
- #38bdf8 — Lightning Blue: Icon tint for the data freshness lightning bolt indicator.
- #f8fafc — White Pure: Primary headings, active code parameters, and logo brandmark title.
- #94a3b8 — Muted Slate: Body copy descriptions, inactive code tab labels, and column links.
- #475569 — Dim Dusk: Line numbers in code blocks, category headers in footer, and copyright notices.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 36px display. Tracking -0.03em at display, 0.05em at caps. The typographic tone is authoritative, hyper-technical, and developer-first. The pairing of a clean neutral sans-serif (Inter) with a crisp monospaced font (JetBrains Mono) makes the marketing pitch feel like a natural extension of an IDE or terminal emulator. Free alternatives like Geist and Fira Code work identically.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 32px between sections, 1200px container, comfortable density.
DEPTH
Depth is created strictly through surface layering and localized emissive light rather than blurred drop shadows. Base layer #06090e supports #0b1118 elevated cards outlined by #182330 hairlines, while recessed elements sit on #070c12. The only true shadow is the electric cyan bloom under the primary call-to-action button.
IMAGERY
No photographic imagery is present or permitted. Visual weight is carried entirely by structural code blocks, mono prompt symbols (such as terminal chevrons '>_'), small status glyphs, and the geometric dual-triangle company logo mark.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an embedded IDE/terminal window directly beside high-converting marketing copy, paired with a glowing neon cyan prompt button and an live API status ticker spanning the bottom border.
MUST
- Use 1px border (#182330) with 16px corner radius for major section cards.
- Reserve the bright cyan glow (box-shadow: 0 0 24px rgba(34,211,238,0.4)) strictly for the primary CTA.
- Accent key terminal syntax and status indicators with monospace typography.
- Maintain high padding (36px to 44px) inside elevated slate containers.
AVOID
- Do not use white or light backgrounds; the dark technical mood must be preserved.
- Avoid standard rounded pills on action buttons; use sharp 8px radii instead.
- Never apply the cyan glow to secondary buttons or form inputs.
- Do not eliminate hairline borders between nested surfaces; contrast depends on them.
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 中尝试 
