Design a dark-mode website section: deep oceanic console styling with focused seafoam neon beacons for high-density technical comparison tables.
LAYOUT
The container uses an asymmetrical 2-column layout framed within a unified 1280px rounded dashboard card. The left column (spanning ~38% width) acts as the brand anchor, stacking an eyebrow pill, an aggressive 3-line display headline, explanatory copy, feature check-lists, and the squid pipeline diagram. The right column (~62% width) contains a 4-tier horizontal pricing matrix that smoothly transitions directly into the comparative feature rows beneath without visual breaks. A horizontal reassurance and utility dock spans the full width of the container base.
PALETTE (use these exact hex values)
- #070d13 — Abyss Canvas: Deepest canvas background behind the main dashboard container and outer periphery
- #0a131c — Console Surface: Primary chassis card background housing both narrative column and comparison matrix
- #0d1b22 — Highlighted Column Fill: Tonal elevation backing the featured Pro plan column within the matrix
- #5ce5a7 — Mint Phosphor: Key focal brand accent used for primary CTA button, active checkmarks, and keyword hero text
- #e66a35 — Alert Amber: Status indicator dot inside the top-left pricing category pill badge
- #162837 — Border Subtle: Structural grid divider lines, button outlines, and panel borders
- #204e4c — Border Highlight: Perimeter stroke enclosing the featured Pro plan column
- #ffffff — Text Stark White: Primary headings, plan names, prices, and high-priority metrics
- #7f93a7 — Text Muted Slate: Secondary descriptors, billing frequencies, table row subheaders, and neutral specs
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 10px caption, 11px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 32px heading-lg, 46px display. Tracking -0.03em on display, 0.05em on micro-caps. The typography speaks with the quiet confidence of mission-critical grid telemetry. By utilizing Inter with tightened letter-spacing (-0.03em on display headlines), it achieves an authoritative, computational density reminiscent of modern developer infrastructure platforms. Headlines are stark and crisp, while micro-subtitles at 11px ensure complex electric-grid domain jargon remains highly readable without dominating the layout.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 48px between sections, 1280px container, tight density.
DEPTH
Elevation is achieved entirely through planar brightness stepping and 1px border highlights without soft blur shadows. The base dark canvas sits at #070d13, the main wrapper lifts to #0a131c with a crisp #152636 perimeter stroke, and the highlighted Pro column lifts further with a faint #0d1b22 tint and an illuminated #204e4c cyan-slate boundary. This creates a flat, technical radar-like enclosure suitable for precision infrastructure tooling.
IMAGERY
Vector schematics and structural iconography replace traditional photographic imagery. The hero graphic is an abstract distributed agent circuit showing a central squid icon enclosed in a rounded chip, wired via dashed lines to surrounding capability nodes (code, security, storage, analytics). Any photographic splash art or generic 3D gradient spheres would violate this deliberate, infrastructure-grade system diagram aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The singular continuous 1px illuminated chassis enclosing the 'Pro' column, which extends upward into a unified 'MOST POPULAR' roof notch while seamlessly holding its own solid mint button and matrix cells down to the table footer. This avoids the clumsy detached card look and transforms the entire comparison matrix into an integrated mission-control console. Misusing this pattern by breaking the stroke or floating separate disconnected cards destroys the architecture.
MUST
- Reserve the seafoam green (#5ce5a7) strictly for conversion paths, check indicators, and the display heading emphasis.
- Maintain strict vertical column alignment across pricing headers, action buttons, and feature matrix cells.
- Keep secondary spec notes (like 'Topology, load flow, N-1...') at 11px in muted slate (#7f93a7) directly beneath the metric title.
- Frame the featured 'Pro' tier as one continuous vertical column stroke that breaks slightly above the card edge.
AVOID
- Do not apply drop shadows with blurred radii; rely entirely on 1px stroke contrast and subtle background value shifts.
- Do not color all CTA buttons mint; only the single recommended tier receives the solid neon fill.
- Do not use colorful badges across multiple tiers; keep the 'MOST POPULAR' pill quiet and integrated into the frame.
- Do not increase matrix row padding beyond 16px; data density must feel precision-engineered for engineers.
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 中尝试 
