Design a dark-mode website section: dark canvas framing a crisp white comparison deck anchored by an elevated midnight spotlight tier.
LAYOUT
The page follows a centered, single-axis flow starting with a pill tag, bold 44px display headline, subtitle, and billing toggle. Below, the centerpiece 1200px 5-column comparison tray organizes specs: column 1 details features, while columns 2-5 represent ascending plans. A 3-item horizontal trust row sits neatly below the card with generous 48px vertical breathing room.
PALETTE (use these exact hex values)
- #080D1A — Canvas Void: Deep navy base canvas hosting the entire page layout and hero lighting.
- #FFFFFF — Deck Surface: High-contrast white background for the primary comparison matrix container.
- #0F172A — Spotlight Tier: Dark navy container fill for the prominent Pro plan column.
- #2563EB — Cobalt Focus: Primary CTA fill on the Pro card, toggle active state, and icon accents.
- #06B6D4 — Growth Cyan: Icon container background and badge tint for the Growth tier.
- #D946EF — Enterprise Orchid: Text and icon accent designating the custom Enterprise tier.
- #0F172A — Text Primary Dark: Primary typography inside the white comparison table.
- #F8FAFC — Text Primary Light: Primary typography for hero text and content inside the Pro card.
- #64748B — Text Muted Dark: Subtitles, table row headers, and metadata across the white card.
- #F1F5F9 — Deck Hairline: Horizontal dividing rules between table rows inside the white slab.
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 32px heading, 44px display. Tracking -0.025em for display, 0 for body, 0.05em for caps. The typography uses a clean, modern neo-grotesque sans (Inter) characterized by neutral curves, tight display tracking (-0.03em), and tabular numbers for pricing. Its neutral precision conveys enterprise reliability, operational clarity, and algorithmic rigor. System UI fonts or Roboto make seamless drop-in replacements.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 999px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created through dramatic surface inversion rather than heavy drop shadows. The dark page canvas (#080D1A) sets the deepest plane, over which a crisp white card (#FFFFFF) sits with a crisp 1px perimeter border. The Pro tier achieves the highest perceived elevation by re-inverting into a midnight slate column (#0F172A) bordered with a glowing hairline, appearing as a physical inset card.
IMAGERY
No photographic imagery is used. The interface relies solely on clean, thin-line vector iconography enclosed in softly tinted 28px square rounded frames (cyan, blue, purple). Any realistic 3D graphics or rich photography would compromise the analytical, tool-like clarity.
SIGNATURE DETAIL — the thing that makes this design itself
The 'Inverted Spotlight Column'—a solid dark midnight card nested directly inside a bright white multi-column comparison table on an outer dark canvas. To implement correctly, keep the white outer tray border-radius at 20px and let the Pro column visually break or fill the vertical span with internal 16px corners. Commonly misused by making all columns dark, which destroys the immediate focal hook.
MUST
- Retain the sharp tonal contrast between the dark page canvas and the white table deck.
- Keep the Pro column visually elevated using dark slate (#0F172A) surrounded by white columns.
- Assign each plan a distinct icon accent color (Starter: blue, Growth: cyan, Pro: cobalt, Enterprise: orchid).
- Align all comparison table row dividing lines strictly across all five columns.
AVOID
- Do not split the 5 columns into separate floating white cards; keep them in one unified container.
- Do not invert the entire table into dark mode; the contrast between dark canvas and white tray is intentional.
- Do not give all plans solid-fill CTA buttons; only the Pro plan receives the primary cobalt fill.
- Do not omit the feature taxonomy column on the far left.
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 中尝试 
