Design a dark-mode website section: dense dark-mode developer pricing matrix illuminated by razor-thin neon gradient accents and micro-grid alignment.
LAYOUT
The interface organizes horizontally into two asymmetric sections: a 28% left anchor containing the hero title, trust badge, and matrix row labels, and a 72% right container holding the 4-column comparison table. Vertically, the matrix stacks tier names, pricing, CTA buttons, and synchronized feature rows, culminating in an integrated full-width consultation bar.
PALETTE (use these exact hex values)
- #0b0f19 — Canvas Dark: Deepest structural backdrop behind the entire pricing section and viewport margins.
- #101622 — Surface Container: Primary matrix container surface fill providing subtle separation from the dark canvas.
- #1e2638 — Border Subtle: Hairline 1px cell dividers, row separators, and the outer matrix enclosing border.
- linear-gradient(135deg, #3b82f6 0%, #ec4899 100%) — Enterprise Gradient: Used exclusively for the Enterprise CTA button and highlighted plan card border.
- #4a1236 — Badge Magenta: Low-opacity tinted background for top metadata badges and pill headers.
- #10b981 — Status Green: Online status indicator dot located within the bottom chat button.
- #f8fafc — Text Primary: High-contrast headings, tier titles, numeric pricing, and prominent button text.
- #94a3b8 — Text Muted: Feature descriptions, matrix comparison labels, subheaders, and billing frequency tags.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px subheading, 28px heading, 36px display. Tracking -0.02em at display, -0.01em at body. The typographic character is austere, clinical, and developer-oriented, relying on an unembellished neo-grotesque sans-serif. It conveys enterprise reliability through tabular numerals, tight letter spacing in titles, and muted secondary weights. Inter or Plus Jakarta Sans serve as ideal matches without requiring proprietary licensing.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is communicated strictly through surface brightness steps and thin 1px border strokes rather than diffused drop shadows. The Enterprise card achieves prominence via a luminous gradient border stroke and slightly higher surface value (#131b2c). Background graphics provide ambient atmosphere without lifting elements along the z-axis.
IMAGERY
Abstract 3D luminous ribbon graphics in deep indigo, magenta, and cyan occupy the far-right canvas margin to convey generative AI speed and computational power. Realistic photography, illustrative cartoons, or skeuomorphic textures are prohibited and strictly out of brand.
SIGNATURE DETAIL — the thing that makes this design itself
The singular identifying move is the monolithic comparison matrix that encloses all four tiers inside a single unified boundary, while wrapping only the Enterprise tier in a continuous neon-gradient stroke that bleeds out from the Most Popular badge. Misusing this by highlighting multiple tiers or detaching the columns breaks the monolithic architectural cohesion.
MUST
- Keep all comparison row heights strictly identical across both feature labels and tier values.
- Use 1px borders (#1e2638) to establish micro-structure rather than heavy drop shadows.
- Reserve the blue-to-pink gradient exclusively for the Enterprise tier and key CTA.
- Align all numeric prices to the same baseline across all four comparison columns.
AVOID
- Do not split the pricing cards into disconnected floating boxes; maintain the unified grid.
- Never apply the saturated brand gradient to lower-tier buttons or standard table borders.
- Avoid using bright green anywhere other than the online status indicator dot.
- Do not use saturated pure black (#000000); use deep blue-gray tints (#0b0f19, #101622).
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. Try in DraPub 
