Design a dark-mode website section: deep obsidian terminal illuminated by emerald glows, crisp circuitry diagrams, and disciplined developer telemetry.
LAYOUT
Asymmetrical two-column hero layout with left-aligned value propositions and right-aligned interactive node architecture. Beneath the hero copy sits a 4-part horizontal metric ribbon. A full-width 1px dividing border cleanly segregates the upper product showcase from an organized 5-column navigation footer with email capture.
PALETTE (use these exact hex values)
- #040d0f — Obsidian Base: Root canvas background, creating deep contrast for glowing vector graphics and text.
- #07171a — Card Void: Background fill for telemetry modules, pill chips, and architecture schematic nodes.
- #2ed8a2 — Luminescent Mint: Primary CTA fill, headline gradient terminal, active glowing status dots, and brand icons.
- #1a5c54 — Deep Sea Teal: Subtle border strokes for interactive cards, gradient stops, and glow halos.
- #143438 — Cyan Border: Structure divider lines, column separators, node connection containers, and input borders.
- #ffffff — Pure White: Hero headline text, metric numbers, and primary button labels.
- #94a3b8 — Muted Sage Slate: Body paragraphs, unselected nav links, and architectural node labels.
- #4e6e73 — Dim Pine Text: Footer section superheaders, copyright notice, and inactive schematic pathways.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 48px display. Tracking -0.03em at display, 0.05em at caps subheadings. The typographic tone is terse, engineering-grade, and unapologetically technical. Inter or Geist delivers clinical legibility with tight negative display tracking that gives short punchy headlines an architectural presence. All system fonts use tabular numeric settings for SLA telemetry.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely via luminous luminescence and atmospheric border glows rather than standard black dropshadows. Background radial gradients in low-opacity emerald float subtly behind technical diagrams, lifting key orchestration nodes above the void.
IMAGERY
Abstract architecture diagrams and technical schematics built exclusively from clean line vectors, rounded nodes, and glowing green connector traces. Photographs, organic illustrations, or 3D clay graphics are strictly absent and incompatible with this terminal aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing orchestrator schematic node: a central card rimmed in bioluminescent mint (#2ed8a2) with dotted status pins that connects to secondary infrastructure nodes via subtle 1px circuit lines. If these glowing connectors are replaced with standard grey arrows, the signature developer-cloud aura is lost.
MUST
- Use solid mint #2ed8a2 strictly for primary intent and live operational status indicators.
- Maintain high stroke-contrast diagrams using 1px hairpins tinted in #143438.
- Format all telemetry metrics with bold weights and matching uppercase dim metadata labels.
- Pair gradient headlines seamlessly from pure white #ffffff into soft mint #2ed8a2.
AVOID
- Never introduce warm colors like orange or saturated red that break the deep cyber-marine palette.
- Do not omit subtle borders on dark cards; without 1px #143438 strokes, modules will visually bleed.
- Avoid heavy drop shadows; depth must come from radial background glows and border luminosity.
- Never center-align architectural footer links; maintain strictly left-aligned typographic columns.
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 中尝试 
