Design a dark-mode website section: clinical compliance authority draped in deep void slate and precise bio-luminescent mint accents.
LAYOUT
The page opens with an asymmetric hero: title, category indicator, and value proposition on the left; dual architectural feature callouts on the right. Below, a balanced four-column grid hosts the pricing plans with equal widths and matched heights. The composition terminates in an uninterrupted horizontal regulatory assurance bar anchored with four icon-lead trust modules.
PALETTE (use these exact hex values)
- #050a0e — Void Canvas: Deep background canvas providing high contrast and clinical focus across the page.
- #0c151e — Slate Card: Background fill for all pricing cards and bottom trust metric container area.
- #45d49e — Clinical Mint: Primary conversion button, active tier borders, category dot, and highlighted tier titles.
- #1a4738 — Mint Ring Glow: Subtle outer glow and border highlight surrounding the recommended Pro card.
- #192533 — Card Border: Subtle 1px perimeter outline defining unselected pricing cards and horizontal dividers.
- #ffffff — Stark White: Primary headings, tier titles, numeric price digits, and feature bullet titles.
- #8fa3b5 — Clinical Slate: Card subtitles, billing cycles, descriptive copy, and unchecked feature states.
- #506375 — Muted Ash: Currency symbols, pricing cadence text (/user/mo), and sub-bullet annotations.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 22px subheading, 38px heading, 44px display. Tracking -0.02em at display, 0.05em at uppercase micro. The typography is clinical, authoritative, and frictionless, evoking pharmaceutical and validation compliance. Inter or Geist delivers the necessary neutral geometry, using tight tracking (-0.02em) on large numbers and wide tracking on uppercase metadata to reinforce precision engineering. Open source alternatives include Roboto or SF Pro Text.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 72px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved flatly and structurally without drop shadows. The design relies entirely on surface contrast: the void background (#050a0e) recedes behind the elevated slate cards (#0c151e). The recommended 'Pro' card uses a 1px mint border with a faint ambient glow ring to establish immediate visual hierarchy.
IMAGERY
The interface is strictly non-photographic and relies on crisp, minimalist vector line iconography. Icons feature uniform 1.5px stroke weight depicting compliance motifs like shields, data cylinders, network globes, and security locks. Figurative artwork or decorative 3D renders are entirely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The singular green spotlight frame on the 'Pro' card—combining a luminous mint perimeter, mint header text, a miniature 'MOST POPULAR' pill, and the sole filled CTA button—anchoring the entire dark canvas to a single conversion anchor. Misusing this by highlighting multiple cards or introducing competing accent colors destroys the clinical decision path.
MUST
- Reserve vibrant mint (#45d49e) exclusively for the single primary recommended tier and key indicator dots.
- Maintain high contrast by rendering tier names and primary pricing numbers in crisp #ffffff.
- Use hairline dividers (#192533) inside cards to rigorously separate billing details from feature bullets.
- Keep card border radius at exactly 14px for a modern, approachable enterprise aesthetic.
AVOID
- Do not introduce multi-colored badges or rainbow accents; stick to mint, slate, and white.
- Do not apply drop shadows; depth is created strictly through background contrast and hairline borders.
- Do not give secondary tiers filled button backgrounds; keep them transparent with thin outlines.
- Do not use saturated backgrounds; the canvas must remain near-black void slate (#050a0e).
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 中尝试 
