Design a dark-mode website section: deep midnight console with high-voltage neon blue highlights engineered for industrial saas.
LAYOUT
The view is organized into a cohesive dual-zone structure: the top tier header balances an asymmetrical left-hand headline block against three equal pricing columns. Below, the layout locks into a rigid four-column comparison table with fixed horizontal dividers. The entire matrix concludes with an anchored, horizontal bottom banner providing proof-of-value metrics, trust signals, and an enterprise conversion route.
PALETTE (use these exact hex values)
- #040810 — Obsidian Base: Root background canvas behind all modular pricing containers
- #0A1120 — Surface Container: Background fill for cards, bottom banner, and comparison matrix cells
- #16233B — Border Subtle: Hairline grid lines separating comparison rows and default tier headers
- #38BDF8 — Electric Blue: Primary CTA fill, feature row icons, checkmarks, and active card glow
- #0284C7 — Electric Blue Hover: Interactive state for primary button and active badge outline
- #22C55E — Success Mint: Checkmark indicator in bottom banner guarantee copy
- #F8FAFC — Text Primary: High-contrast headings, tier titles, and numerical prices
- #94A3B8 — Text Secondary: Tier descriptions, unit cadences (/mo), and feature descriptions
- #64748B — Text Muted: Disabled dashes in comparison matrix and secondary meta tags
TYPOGRAPHY
Typeface Inter (or Geist, Roboto, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 24px heading, 36px display, 40px heading-lg. Tracking -0.02em at display, 0 at body. The typography speaks with cool, operational precision reminiscent of high-end industrial telemetry dashboards and developer infrastructure. Setting Inter or Geist with tight negative tracking at larger scales gives the pricing numbers an engineered, authoritative weight without feeling flashy.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created using border luminance and subtle background tonal shifts rather than heavy drop shadows. The canvas sits at pure obsidian (#040810), cards elevate slightly to midnight slate (#0A1120), and the recommended tier creates physical presence through an electrified cyan outline (rgba(56, 189, 248, 0.4)) and slight interior ambient glow.
IMAGERY
Iconography is technical, lightweight, and wireframe-drawn with consistent 1.5px stroke weight in bright slate-blue. No photographic imagery or decorative illustrations are present; clarity is delivered entirely through clean vector telemetry symbols (line chart, speedometer, microchip network, shield).
SIGNATURE DETAIL — the thing that makes this design itself
The uninterrupted four-column feature grid seamlessly integrated below disparate top header cards, united by the electric cyan border of the featured 'Growth' card running continuously from badge to table base.
MUST
- Use razor-thin 1px borders (#16233B) to separate rows instead of thick divider bars.
- Highlight only one tier ('Growth') with vibrant blue borders and an intersecting top pill badge.
- Pair feature titles with small (18-20px) outline iconography in the comparison table.
- Center-align all checkmarks, hyphens, and pricing metrics within their respective columns.
AVOID
- Do not use colorful badges on every card; limit high-visibility cyan pills to one tier.
- Avoid solid white backgrounds or light mode switches that ruin high-contrast technical depth.
- Do not use green checkmarks inside the feature table; reserve checkmark styling to cyan (#38BDF8).
- Never allow border radii on cards to exceed 20px or fall below 12px.
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 中尝试 
