Design a dark-mode website section: deep obsidian infrastructure illuminated by precision bioluminescent emerald pulses and micro-etched technical typography.
LAYOUT
The screen is structured in two distinct vertical zones. The upper zone features an asymmetric two-column bento-style grid: a large 8-column equivalent hero banner on the left, counterbalanced by two stacked 4-column cards on the right. The lower zone shifts into an open 6-column hierarchical footer terminated by a flat legal sub-bar.
PALETTE (use these exact hex values)
- #030708 — Obsidian Canvas: Deepest canvas background behind cards and base for footer
- #081014 — Substratum Card Surface: Background fill for elevated feature and CTA card containers
- #36c690 — Bioluminescent Mint: Primary CTA fill, active status indicators, and directional arrows
- #133128 — Mint Pulse Tint: Background fill for subtle status badges and pill chips
- #16272e — Etched Border Slate: Single-pixel borders defining cards, input boxes, and social icons
- #ffffff — Optic White: Primary headings, brandmark title, and high-emphasis body copy
- #7f9499 — Muted Cyan Grey: Secondary descriptors, category nav links, trust badges, and placeholders
- #4e6267 — Faint Metadata: Legal copy, uptime subtext, and subtle bullet separators
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, 20px heading, 44px display. Tracking -0.02em at display, 0.08em at uppercase labels. The type is restrained, modern, and engineering-centric, evoking terminal precision and reliability without becoming a monospace cliché. Inter or Geist serves this role via crisp apertures and high legibility at micro sizes. The severe contrast between bold 44px display type and whisper-quiet 11px uppercase metadata gives the interface an authoritative infrastructure voice.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved entirely without drop shadows. The design relies on surface lightness stepping (from #030708 canvas to #081014 card surface) and luminous contrast created by 1px borders (#16272e). Subtle background radial glows from embedded graphics provide perceived depth beneath flat vector text.
IMAGERY
Imagery is limited to abstract, high-precision technical vectors: a bioluminescent green particle wave on the primary CTA and isometric translucent stacked glass-like rounded slabs. Photographic imagery or non-technical illustrations would violate the sterile, cybernetic telemetry aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The singular defining move is the 'Bioluminescent Telemetry Pulse'—pairing dark-cyan obsidian containers with vibrant emerald particle waves and concentric status beacons. Misusing it involves tinting entire cards green or applying the emerald tone to non-interactive decorative borders, which instantly dilutes its operational urgency.
MUST
- Keep card backgrounds near-black (#081014) with fine 1px cyan-slate borders (#16272e).
- Use uppercase tracking (0.08em) strictly for 11px metadata tags and footer category headers.
- Reserve solid mint green (#36c690) for primary actionable buttons and active telemetry status.
- Maintain generous 32px to 36px internal padding on all upper interactive card containers.
AVOID
- Do not introduce warm tones like amber, red, or purple; stay strictly within cyan, mint, and obsidian.
- Do not add heavy blurred drop shadows; depth is strictly created by 1px border contrast.
- Do not use solid white fills for secondary action buttons or input backgrounds.
- Never center-align footer navigation lists or the hero card typography.
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 中尝试 
