Design a dark-mode website section: precision developer console aesthetic tuned for deep tech and programmable genomics.
LAYOUT
Two-zone vertical composition. The top zone is a balanced two-column 50/50 hero: value narrative, pill tag, and twin CTAs on the left; self-contained telemetry and API console on the right. Below a full-width 1px hairline divider, the bottom zone houses a 6-column footer encompassing brand metadata, four navigation groups, and an inline newsletter input module.
PALETTE (use these exact hex values)
- #030712 — Deep Void Canvas: Foundational dark background spanning the entire hero and footer viewport
- #08101a — Console Surface: Background fill for the interactive code console and input containers
- #152336 — Subtle Hairline: Internal structural borders, footer dividers, and metric cell dividers
- #22d3ee — Electric Cyan: Primary button fill, focal headline accent, and active tab indicator underline
- #10b981 — Telemetry Emerald: System operational indicator dot, 200 OK badges, and feature checkmarks
- #f8fafc — Optical White: Display headings, active code keys, and primary labels
- #94a3b8 — Slate Muted: Body descriptions, inactive tabs, and footer column hyperlinks
- #475569 — Slate Dim: Metadata keys, code line numbers, and copyright text
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px subheading, 15px body, 18px body-lg, 24px heading, 48px display. Tracking -0.03em at display, 0 at body. Engineered, clinical, and unapologetically technical. The tight letter tracking (-0.03em) on the large display header conveys cutting-edge finality, while the monospace secondary type communicates that biological engineering has been reduced to reliable software infrastructure. Geist or Inter are perfect drop-in replacements.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created without harsh drop shadows. Instead, surfaces use 1px stroke boundaries (#152336) overlaid on dark fills with a localized ambient cyan back-glow radiating behind the right console corner. The primary button employs a soft 20px cyan outer glow to float above the canvas.
IMAGERY
Avoid photographic assets or human imagery entirely. Visual authority is established via clean UI simulation: dense code editors, vector sparklines, JSON responses, and schematic UI wireframes. Any external art must be abstract vector curves or wave interference patterns in cyan.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone display headline where a single high-stakes verb ('Destroy') is colored in vibrant electric cyan while the surrounding sentence remains clinical white, directly paired with a working JSON payload pane on the right.
MUST
- Use solid electric cyan (#22d3ee) solely on the primary conversion button and the single headline punch word.
- Render code and payload responses in crisp JetBrains Mono with distinct syntax highlighting colors.
- Keep card and console borders at exactly 1px solid with low-contrast dark slate (#152336).
- Maintain strict 80px vertical breathing room between the hero split and the footer boundary line.
AVOID
- Do not use high-saturation gradients across button fills; keep buttons strictly flat cyan with soft glow.
- Never use pure white (#ffffff) borders on cards, as it breaks the deep terminal illusion.
- Do not omit the terminal icon or code-centric styling when addressing biotech developer personas.
- Avoid multi-colored body paragraphs; body text must remain consistently slate (#94a3b8).
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 中尝试 
