Design a dark-mode website section: precision dark-mode comparison matrix accented with high-chroma violet gradients and crisp tabular alignment.
LAYOUT
The page adheres to a centered vertical stack: an eyebrow badge leads into an oversized headline and paragraph, followed by a segmented pill toggle. Below, a 5-column table combines tier metadata and 10 feature comparison rows under unified vertical column outlines. The layout terminates with a stark full-width white trust bar dividing into four equal-width assurance columns.
PALETTE (use these exact hex values)
- #0b0f17 — Deep Obsidian Base: Primary background canvas for the entire hero and comparison matrix area.
- #111827 — Panel Surface: Background fill for the comparison matrix column containers and toggles.
- #1f293d — Structural Stroke: Subtle 1px boundaries dividing table rows, card edges, and toggle pills.
- linear-gradient(135deg, #4f75ff 0%, #d946ef 100%) — Chroma Gradient: Key highlight stroke for the Pro tier card, Pro CTA button, and hero gradient text.
- #38bdf8 — Electric Cyan: Checkmark icons across tier feature matrix and subtle badge icons.
- #ffffff — Pure White: Primary display text, pricing numbers, active toggle text, and trust bar surface.
- #94a3b8 — Muted Slate: Subtitles, secondary descriptions, table row headers, and trust bar body text.
- #334155 — Inactive Row Gray: Table empty dashes and inactive feature placeholders.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 24px heading, 40px heading-lg, 56px display. Tracking -0.025em for display headers, 0 for body text. The voice is hyper-modern, technical, and authoritative, matching developer tooling and Web3/fintech aesthetics. Clean geometric sans-serif shapes provide supreme tabular legibility at 12px to 14px, while dense negative tracking on 40px numbers creates confidence.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved through stroke illumination rather than heavy blur shadows. The standard cards rely on flat surfaces with thin 1px boundaries (#1f293d), while the featured tier gains depth via a vivid gradient border and slight outer glow that visually steps forward from the dark matrix plane.
IMAGERY
Iconography is strictly linear and mono-weight (1.5px stroke), rendered in neutral slate or electric cyan for functional clarity. Graphic art is avoided entirely in the comparison area, relying instead on typographic scale, gradient strokes, and disciplined geometry.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the illuminated 'Pro' card wrapped in a high-chroma cyan-to-magenta stroke, crowned by a gradient badge and anchored by a matched gradient button. Misusing this by applying gradient outlines to multiple neighboring tiers instantly destroys the visual priority and flattens the hierarchy.
MUST
- Anchor the entire composition with the glowing 1.5px cyan-to-magenta gradient border strictly on the Pro tier.
- Align all feature row labels precisely with the icon baseline on the far-left specification column.
- Use solid cyan checkmarks (#38bdf8) against the dark card surface for maximum visual legibility.
- Keep table cell heights uniform at 40px to ensure horizontal alignment remains unbroken across tiers.
AVOID
- Do not apply neon gradient borders to more than one card at a time.
- Never use busy full-bleed photographic backgrounds behind the matrix data rows.
- Avoid colored backgrounds for non-featured CTA buttons; keep them dark and stroke-defined.
- Do not reduce column widths below 220px to avoid text wrapping on numerical limits.
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 
