Design a dark-mode website section: deep midnight canvas electrified by luminous cyan focal points and crisp linear architecture.
LAYOUT
The layout follows a centered vertical flow anchored within a 1200px bounding box. The top block features a balanced three-part arrangement: left metrics widget, center display headline with subtitle, and right contact helper. Below sits a centered billing frequency toggle, leading into the comprehensive 5-column comparison grid, resolved by a centered security compliance footer.
PALETTE (use these exact hex values)
- #050811 — Canvas Background: Deepest canvas tone acting as the dark foundational backdrop
- #080e1a — Card Surface: Fill color for primary comparison container, stat card, and helper card
- #142033 — Subtle Border: Internal grid cell dividing lines, header pill outlines, and container frames
- #38bdf8 — Luminous Cyan: Key accent for headline highlight, primary CTA button, metric numbers, and badge
- #1d69a6 — Accent Border Highlight: Contour stroke outlining the featured Growth tier column
- #f8fafc — Text Primary: Main title, pricing figures, and primary column headings
- #94a3b8 — Text Secondary: Feature row labels, tier descriptions, and helper descriptions
- #475569 — Text Muted: Per-month labels, unselected toggle buttons, and empty dash marks
- #22c55e — Savings Green: Discount pill badge inside the billing toggle selector
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist,system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 24px heading, 34px heading-lg, 52px display. Tracking -0.03em on display, -0.01em on body. The typographic tone is authoritative, technical, and hyper-functional. Using a tightly-kerned neo-grotesque like Inter provides clinical readability across compact table cells while maintaining weight and presence in the 52px headline. Numeric scales are rendered with precision and high contrast.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is created strictly through surface luminance and glow rather than drop shadows. An ambient radial cyan haze emanates behind the primary headline, while the featured tier container uses a vibrant contour stroke that subtly separates it from adjacent columns.
IMAGERY
This design strictly eschews photographic or illustrative imagery in favor of clean UI iconography and typographic data density. Icons are monochromatic 14-16px stroke graphics (SVGs) aligned with feature labels. Adding lifestyle or cartoon assets would compromise its sleek infrastructure aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated 5-column table architecture where the middle 'Growth' tier is encapsulated by an overlaid 1px glowing cyan rounded outline and an overlapping 'MOST POPULAR' pill badge, breaking the flat matrix plane.
MUST
- Use luminous cyan (#38bdf8) exclusively for key conversion paths, the headline focus word, and the featured tier
- Maintain uniform row heights across all columns in the pricing grid to ensure perfect horizontal scan lines
- Keep internal matrix division lines thin (1px) and low contrast (#142033) to prevent visual noise
- Anchor the featured tier with a full-height distinct border and an overlapping badge centered on the top edge
AVOID
- Do not split the pricing matrix into separated freestanding cards; it must remain one cohesive integrated table
- Never use pure white backgrounds or harsh neon borders outside of the cyan palette
- Do not allow secondary tier buttons to compete with the solid cyan fill of the featured CTA
- Avoid omitting row dividers; horizontal eye tracking across five columns requires clear guides
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 中尝试 
