Design a dark-mode website section: mission-critical biotech agent infrastructure wrapped in deep graphite and precise terracotta signals.
LAYOUT
The layout is divided into two distinct sections stacked within a 1200px grid. The top section is an asymmetric 55/45 split featuring an editorialized headline, description, CTAs, and trust items on the left against a live terminal window on the right. Below a clean separation, the footer distributes itself across six structured columns (brand description followed by four navigation categories and an integrated newsletter capture), resolving into a bottom baseline strip containing status badges on the left and copyright/legal anchors on the right.
PALETTE (use these exact hex values)
- #06070a — Obsidian Ground: Root canvas background spanning the full layout width
- #0d0f14 — Terminal Elevated: Container background for the terminal window and input fields
- #1c202a — Graphite Stroke: 1px hairline outlines for terminal window, cards, and input boundaries
- #e75d50 — Terracotta Coral: Primary conversion button fill, brand mark glyph, and emphasized header keyword
- #271616 — Coral Glow Surface: Background pill fill for the final step tag and secondary glow zones
- #22c55e — Signal Green: Operational indicator dots within system status pills and terminal logs
- #ffffff — Pure White: Hero display headers, primary button labels, and active navigation titles
- #8b929e — Muted Slate: Exploratory copy, inactive tabs, column headers, and legal text
- #60a5fa — Subdued Code Blue: Syntax-highlighted parameters, emails, and identifiers in the terminal
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 12px subheading, 14px body, 15px body-lg, 18px heading, 40px display. Tracking -0.02em at display, 0.05em at caps. The typographic tone is authoritative, austere, and deeply technical. The clean geometry of Inter balances human readability with engineering rigor, while JetBrains Mono injects genuine developer credibility. If substituting, choose Geist or SF Pro to preserve the tight letterforms and modern developer aesthetic.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is conveyed purely through luminance layer separation and delicate 1px hairline border contours (#1c202a) rather than drop shadows. The main terminal block gains prominence over the #06070a canvas through its slightly lifted #0d0f14 fill and the faint, diffuse radial light leaks emanating beneath it.
IMAGERY
No photographic or raster assets are utilized. Imagery is entirely functional and synthetic: vector iconography (thin line stroke shields, code layers, social glyphs) and an authentic CLI developer terminal interface with syntax-highlighted monospace tables. Any generic lifestyle photography or illustrative 3D art would severely compromise the precise, scientific-developer atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The two-column terminal CTA pairing: an asymmetric hero block placing an evocative biotech headline with a single terracotta-accented keyword opposite a functional, hyper-detailed dark terminal emulator. This is executed with hairline borders (#1c202a) and soft dual-spectrum radial glows (terracotta on the left, cool slate on the right). Misuse typically involves removing the hairline frame or overloading the terminal with bright, non-standard syntax highlighting.
MUST
- Reserve #e75d50 strictly for primary conversion buttons, brand glyphs, and high-priority terminal alerts.
- Wrap developer interfaces and terminal mockups in #0d0f14 with a continuous 1px #1c202a border.
- Render code and technical telemetry in monospace fonts at 12px or 13px.
- Use uppercase tracking (0.08em) for structural navigation column headers and step pills.
AVOID
- Do not introduce pure saturated primary blue or vibrant gradients across actionable surfaces.
- Never omit the 1px perimeter stroke (#1c202a) on elevated terminal windows and input fields.
- Avoid pill radii (999px) on functional inputs or buttons; restrict pills solely to tags.
- Do not use generic gray borders; maintain the dark slate-blue cast (#1c202a).
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 中尝试 
